@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/Ripple.js

@@ -1,11 +1,8 @@
 import CustomElement from '../core/CustomElement.js';
 import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
 
-import styles from './Ripple.css' assert { type: 'css' };
-
 export default CustomElement
   .extend()
-  .css(styles)
   .set({
     hadRippleHeld: false,
     hadRippleReleased: false,
@@ -111,4 +108,80 @@ export default CustomElement
       }
     },
   })
+  .css`
+    :host {
+      --enter-delay: 80ms;
+      --touch-down-acceleration: 1024;
+      --touch-up-acceleration: 3400;
+      --mdw-ripple-expand-duration: 300ms;
+      --mdw-ripple-simple-duration: 200ms;
+      --mdw-ripple-fade-out-duration: 333ms;
+      --mdw-ripple-standard-easing: var(--mdw-motion-standard-easing, cubic-bezier(0.4, 0.0, 0.2, 1));
+      --mdw-ripple-deceleration-easing: var(--mdw-motion-deceleration-easing, cubic-bezier(0.0, 0.0, 0.2, 1));
+    
+      --size: 0;
+      position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
+    
+      display: block;
+    
+      min-block-size: 141.42%; /* √2 * 100% */
+      min-inline-size: 141.42%;
+    
+      pointer-events: none;
+    
+      -webkit-tap-highlight-color: transparent;
+    
+      opacity: 0.12;
+      transform: translateX(-50%) translateY(-50%) scale(1);
+    
+      background-color: currentColor;
+      border-radius: 50%;
+    
+      /* Adds feathered appearance to ripple */
+      box-shadow: 0 0 calc(0.10 * var(--size)) calc(0.10 * var(--size)) currentColor;
+    
+      transition-delay: 0s;
+      transition-duration: var(--mdw-ripple-simple-duration);
+      transition-property: background-color, color;
+      transition-timing-function: var(--mdw-ripple-standard-easing);
+    
+      animation-name: ripple-fade-in, none;
+      animation-duration: var(--mdw-ripple-expand-duration), var(--mdw-ripple-fade-out-duration);
+      animation-timing-function: linear, var(--mdw-ripple-deceleration-easing);
+      animation-direction: normal;
+      animation-fill-mode: forwards;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      will-change: transform, opacity, top, left, box-shadow;
+    
+      aspect-ratio: 1/1;
+    }
+    
+    :host([ripple-state="filled"]) {
+      animation-name: none, ripple-fade-out;
+    }
+    
+    :host([ripple-state="filled"][hold-ripple]) {
+      animation-name: ripple-fade-in, none;
+    }
+    
+    :host([ripple-state="complete"]) {
+      animation-name: none, ripple-fade-out;
+      animation-duration: 0s;
+    }
+    
+    @keyframes ripple-fade-in {
+      from {
+        transform: translateX(-50%) translateY(-50%) scale(0);
+      }
+    }
+    
+    @keyframes ripple-fade-out {
+    
+      to { opacity: 0; }
+    }
+  `
   .autoRegister('mdw-ripple');

package/components/SegmentedButton.js

@@ -1,7 +1,6 @@
 import './Icon.js';
 
 import Button from './Button.js';
-import styles from './SegmentedButton.css' assert { type: 'css' };
 
 export default Button
   .extend()
@@ -12,7 +11,6 @@ export default Button
   .set({
     focusableOnDisabled: true,
   })
-  .css(styles)
   .on({
     composed({ html, inline }) {
       const { shape, icon, outline, control, slot, state } = this.refs;
@@ -46,4 +44,101 @@ export default Button
       this.outlined = true;
     },
   })
+  .css`
+    /* https://m3.material.io/components/segmented-buttons/specs */
+
+    :host {
+      --mdw-shape__size: var(--mdw-shape__full);
+      --mdw-ink: var(--mdw-color__on-surface);
+      gap: 8px;
+
+      min-inline-size: 24px;
+      padding-inline-start: max(12px, calc(16px + (var(--mdw-density) * 2px)));
+      padding-inline-end: max(20px, calc(24px + (var(--mdw-density) * 2px)));
+
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host([inner-segmented-button]) {
+      --mdw-shape__size: 0px;
+      --mdw-shape__rounded: 1;
+      --mdw-shape__mask-border-source: none;
+    }
+
+    #outline {
+      inset-inline-end: -1px;
+    }
+
+    #outline[shape-end] {
+      inset-inline-end: 0;
+    }
+
+    #shape[selected] {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    #label[selected] {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #icons {
+      position: relative;
+
+      display: inline-flex;
+    }
+
+    #icon {
+      box-sizing: border-box;
+      inline-size: 0;
+
+      opacity: 1;
+    }
+
+    #icon[has-icon] {
+      inline-size: 18px;
+
+      opacity: 1;
+    }
+
+    #icon[selected] {
+      inline-size: 18px;
+
+      opacity: 0;
+    }
+
+    #check-icon {
+      position: absolute;
+      inset: 0;
+
+      display: block;
+
+      overflow: visible;
+
+      margin: 0;
+
+      opacity: 0;
+
+      font-size: 18px;
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #check-icon[selected] {
+      opacity: 1;
+
+      font-size: 18px;
+    }
+
+    #icon[disabled] {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+    #shape[disabled][selected] {
+      background-color: rgba(var(--mdw-color__on-surface), 0.12);
+    }
+
+    #label[disabled][selected] {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+  `
   .autoRegister('mdw-segmented-button');

package/components/SegmentedButtonGroup.js

@@ -3,7 +3,6 @@ import KeyboardNav from '../mixins/KeyboardNavMixin.js';
 
 import Box from './Box.js';
 import SegmentedButton from './SegmentedButton.js';
-import styles from './SegmentedButtonGroup.css' assert { type: 'css' };
 
 /** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
 
@@ -35,7 +34,21 @@ export default Box
       },
     },
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/segmented-buttons/specs */
+
+    :host {
+      --mdw-bg: var(--mdw-color__secondary-container);
+      --mdw-ink: var(--mdw-color__on-secondary-container);
+
+      display: inline-flex;
+    }
+
+    :host([color]) {
+      background-color: transparent;
+    }
+
+  `
   .on({
     constructed() {
       this.setAttribute('aria-orientation', 'horizontal');

package/components/Select.js

@@ -4,7 +4,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Select.css' assert { type: 'css' };
 
 /* @implements {HTMLSelectElement} */
 
@@ -14,7 +13,6 @@ export default class Select extends CustomElement
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
   .extend()
-  .css(styles)
   .observe({
     autocomplete: 'string',
     trailingIcon: {
@@ -53,6 +51,60 @@ export default class Select extends CustomElement
       suffix.remove();
     },
   })
+  .css`
+    #slot {
+      display: none;
+    }
+    
+    #label {
+      padding: 0;
+    
+      cursor: pointer;
+    }
+    
+    #label[disabled] {
+      cursor: not-allowed;
+    }
+    
+    #icon {
+      position: absolute;
+    
+      /* padding-inline-start: 12px; */
+    }
+    
+    #trailing-icon {
+      position: absolute;
+      inset-inline-end: 16px;
+    }
+    
+    #control {
+      padding-inline-start: 16px;
+      padding-inline-end: calc(16px + 24px + 16px);
+      accent-color: rgb(var(--mdw-ink));
+    
+      cursor: inherit;
+    }
+    
+    #control[icon] {
+      margin-inline-start: calc(16px + 24px);
+      padding-inline-start: 0;
+    }
+    
+    option {
+      accent-color: rgb(var(--mdw-ink));
+    
+      min-block-size: var(--mdw-typescale__label-large__line-height);
+    
+      appearance: none;
+    
+      background-color: rgb(var(--mdw-color__surface)) !important;
+      border-radius: 0;
+      color: rgb(var(--mdw-color__on-surface)) !important;
+    
+      font: var(--mdw-typescale__label-large__font);
+      letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+    }
+  `
   .setStatic({
     controlTagName: 'select',
     controlVoidElement: false,

package/components/Shape.js

@@ -1,25 +1,62 @@
+import ShapeMixin from '../mixins/ShapeMixin.js';
+
 import Box from './Box.js';
-import outlineStyles from './Outline.css' assert { type: 'css' };
-import styles from './Shape.css' assert { type: 'css' };
 
 export default Box
+  .mixin(ShapeMixin)
   .extend()
-  .observe({
-    shapeTop: 'boolean',
-    shapeBottom: 'boolean',
-    shapeStart: 'boolean',
-    shapeEnd: 'boolean',
-    shapeStyle: 'string',
-    outlined: 'boolean',
+  .on({
+    composed() {
+      const { shape, outline } = this.refs;
+      shape.before(outline);
+      shape.remove();
+    },
   })
-  .css(
-    outlineStyles,
-    styles,
-  )
-  .html/* html */`
-    <div id=outline _if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}>
-      <div id=outline-left class="outline-section outline-left"></div>
-      <div id=outline-right class="outline-section outline-right"></div>
-    </div>
+  .css`
+    :host {
+      position: relative;
+
+      overflow: hidden;
+
+      z-index: auto;
+
+      background-color: var(--mdw-shape__bg, transparent);
+
+      border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
+      border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
+      border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
+      border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
+
+      transition-delay: 1ms;
+      transition-duration: 200ms;
+      transition-property: background-color, color;
+      will-change: background-color, color;
+
+    }
+
+    :host([color]) {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    :host(:where([ink],[color])) {
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host([outlined]) {
+      background-color: transparent;
+    }
+
+    :host(:is([color="none"], [color="transparent"])) {
+      background-color: transparent;
+    }
+
+    
+    @supports(-webkit-mask-box-image: none) {
+      :host {
+        transition-duration: 200ms, 200ms, 200ms;
+        transition-property: background-color, color, -webkit-mask-box-image-width;
+        will-change: background-color, color, -webkit-mask-box-image;
+      }
+    }
   `
   .autoRegister('mdw-shape');