@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/components/Slider.js

@@ -3,8 +3,6 @@ import InputMixin from '../mixins/InputMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Slider.css' assert { type: 'css' };
-
 /**
  * @param {string} value
  * @param {number} onNaN
@@ -170,7 +168,6 @@ export default CustomElement
       click: 'onControlFinish',
     },
   })
-  .css(styles)
   .expressions({
     computeTrackStyle({ ticks, _previewValue, min, max }) {
       return [
@@ -203,4 +200,313 @@ export default CustomElement
       this._previewValue = newValue;
     },
   })
+  .css`
+    /* https://m3.material.io/components/sliders/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+
+      display: inline-block;
+      vertical-align: middle;
+
+      min-block-size: 40px;
+      min-inline-size: 88px;
+
+      background-color: transparent;
+    }
+
+    :host,
+    :host([color]) {
+      background-color: transparent;
+    }
+
+    #label {
+      position: absolute;
+      inset: 0;
+
+      display: block;
+
+      cursor: pointer;
+
+      z-index: 1;
+
+      /* border-radius: 50%; */
+      color: rgb(var(--mdw-bg));
+    }
+
+    #control {
+      inset:0;
+
+      overflow: visible;
+
+      block-size: 100%;
+      min-block-size: 0;
+      inline-size: 100%;
+      min-inline-size: 0;
+
+      appearance: none;
+
+      cursor: inherit;
+
+      transform: none;
+
+      background-color: transparent;
+      color: inherit;
+    }
+
+    #control::-webkit-slider-runnable-track {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin-inline: -10px;
+
+      appearance: none;
+
+      background-color: transparent;
+    }
+
+    @supports (-moz-appearance:none ){
+      #control {
+        inset-inline: -10px;
+
+        inline-size: calc(100% + 20px);
+      }
+    }
+
+    #control::-moz-range-track {
+      inline-size: calc(100% + 20px) !important;
+
+      appearance: none;
+    }
+
+    #control::-webkit-slider-thumb {
+      display: block;
+
+      block-size: 20px;
+      inline-size: 20px;
+
+      -webkit-appearance: none;
+      cursor: inherit;
+
+      transform: scale(2);
+
+      background-color: transparent; /* Safari */
+
+      border-radius: 50%;
+      box-shadow: none; /* Safari */
+    }
+
+    #control::-moz-range-thumb {
+      display: block;
+
+      box-sizing: content-box;
+      block-size: 20px;
+      inline-size: 20px;
+      border: none;
+
+      appearance: none;
+      cursor: inherit;
+
+      transform: scale(2);
+
+      background-color: transparent;
+      border-radius: 50%;
+    }
+
+    #track {
+      --value: 0.5;
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+
+      block-size: 4px;
+      margin-block-start: -2px;
+
+      pointer-events: none;
+      user-select: none;
+
+      background-color: rgb(var(--mdw-color__surface-variant));
+      border-radius: inherit;
+    }
+
+    #thumb {
+      position: absolute;
+      inset-block-start: -18px;
+      inset-inline-start: -20px;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+
+      block-size: 40px;
+      inline-size: 40px;
+
+      pointer-events: none;
+
+      border-radius: 50%;
+
+      color: rgb(var(--mdw-bg));
+    }
+
+    #thumb::before {
+      content: '';
+
+      display: block;
+
+      block-size: 20px;
+      inline-size: 20px;
+
+      background-color: currentColor;
+      border-radius: 50%;
+
+      transition: background-color 100ms;
+    }
+
+    /* Inactive ticks */
+
+    #ticks::before,
+    #ticks::after {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      padding-inline: 10px;
+
+      background-clip: content-box;
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+      background-image: radial-gradient(circle at center, var(--tick-color) 0, var(--tick-color) 1px, transparent 0);
+      background-position: center center;
+      background-repeat: repeat-x;
+      background-size: 0 100%;
+      background-size: calc(100% / var(--ticks, 0)) 2px;
+    }
+
+    #ticks::before {
+      --tick-color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #ticks::after {
+      --tick-color: rgb(var(--mdw-ink));
+      /* TODO: Use single-paint implementation */
+      padding-inline-end: calc(100% - (100% * var(--value)) + 10px);
+
+      z-index: 1;
+
+      will-change: padding-inline-end;
+    }
+    /* Active Indicator */
+    #track-active {
+      position: absolute;
+      inset: 0;
+
+      overflow: hidden;
+
+      border-radius: 99px;
+    }
+
+    #track-active::before {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      transform: scaleX(var(--value));
+      transform-origin: 0 0;
+
+      background-color: rgb(var(--mdw-bg));
+
+      will-change: transform;
+    }
+
+    #thumb-anchor {
+      position: absolute;
+      inset-inline: 0;
+
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+
+      inline-size: 1%;
+
+      transform: translateX(calc(var(--value) * 100 * 100%));
+      transform-origin: 0 0;
+      z-index: 24;
+
+      will-change: transform;
+    }
+
+    #thumb-label {
+      position: absolute;
+      inset-block-end: 14px;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: content-box;
+      margin-block-end: 6px;
+
+      transform: translateX(-50%) scale(1);
+      transform-origin: 50% 100%;
+
+      font-weight: var(--mdw-typescale__label-medium__font-weight);
+      line-height: var(--mdw-typescale__label-medium__line-height);
+      font-family: var(--mdw-typescale__label-medium__font-family);
+      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+
+      transition: transform 200ms;
+      will-change: transform;
+    }
+
+    #thumb-label:is([hidden],[text=""]) {
+      transform: translateX(-50%) scale(0);
+    }
+
+    #thumb-label::before {
+      content: attr(text);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      min-block-size: 28px;
+      min-inline-size: 28px;
+
+      z-index: 1;
+
+      background-color: rgb(var(--mdw-bg));
+      border-radius: 50%;
+      color: rgb(var(--mdw-ink));
+    }
+
+    #thumb-label::after {
+      /* Values from Figma SVG */
+      --x-start: 14.6446%; /*4.1005px*/
+      --x-end: 85.3554%;
+      --y: 70.7106%; /*24.0416px*/
+
+      content: "";
+
+      position: absolute;
+      inset: 0;
+      inset-block-end: -6px;
+
+      clip-path: polygon(var(--x-start) var(--y), var(--x-end) var(--y), 50% 100%, var(--x-start) var(--y));
+
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    #track[disabled] {
+      background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
+    }
+
+    #label[disabled],
+    #track[disabled] {
+      --mdw-bg: var(--mdw-color__on-surface);
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+  `
   .autoRegister('mdw-slider');

package/components/Snackbar.js

@@ -7,7 +7,6 @@ import DensityMixin from '../mixins/DensityMixin.js';
 import './Button.js';
 import './IconButton.js';
 
-import styles from './Snackbar.css' assert { type: 'css' };
 import Surface from './Surface.js';
 
 export default Surface
@@ -71,5 +70,86 @@ export default Surface
       },
     },
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/snackbar/specs */
+
+    :host {
+      --mdw-shape__size: var(--mdw-shape__small);
+      --mdw-surface__shadow: var(--mdw-surface__shadow__3);
+      --mdw-surface__tint: var(--mdw-surface__tint__3);
+      --mdw-shape__bg: rgb(var(--mdw-color__inverse-surface));
+      --mdw-ink: var(--mdw-color__inverse-on-surface);
+
+      --mdw-type__line-height: var(--mdw-typescale__body-medium__line-height);
+      display: flex;
+      align-items: center;
+
+      padding-inline: 16px;
+
+      opacity: 0;
+      transform: translateY(25%) scaleY(0.25);
+      transform-origin: bottom center;
+      visibility: hidden; /* Remove from tab order */
+      z-index: 24;
+
+      font: var(--mdw-typescale__body-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+
+      transition: transform 200ms, opacity 200ms, visibility 200ms;
+    }
+
+    :host([action]) {
+      gap: 8px;
+
+      padding-inline-end: 8px;
+    }
+
+    :host([close-button]) {
+      gap: 4px;
+
+      padding-inline-end: 4px;
+    }
+
+    :host([open]) {
+      opacity: 1;
+      transform: scale(1);
+      visibility: visible;
+    }
+
+    #content {
+      display: flex;
+      align-items: center;
+
+      flex: 1;
+      padding-block: max(2px, calc(14px + (var(--mdw-density) * 2px)));
+    }
+
+    #slot {
+      display: block;
+      overflow-x: hidden;
+      overflow-y: hidden;
+
+      max-block-size: calc(var(--mdw-type__line-height) * 2);
+
+      text-align: start;
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: normal;
+      word-break: break-word;
+    }
+
+    @supports(width: 1lh) {
+      #slot {
+        max-block-size: 2lh;
+      }
+    }
+
+    @supports(-webkit-line-clamp:1) {
+      #slot {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+    }
+  `
   .autoRegister('mdw-snackbar');

package/components/Surface.js

@@ -4,14 +4,12 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Surface.css' assert {type:'css'};
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
   .mixin(SurfaceMixin)
   .mixin(ShapeMixin)
-  .css(styles)
+  .html/* html */`<slot id=slot></slot>`
   .on({
     composed() {
       const { surface, shape, surfaceTint } = this.refs;
@@ -19,5 +17,16 @@ export default CustomElement
       surface.append(shape);
     },
   })
-  .html/* html */`<slot id=slot></slot>`
+  .css`
+    :host {
+      --mdw-shape__bg: rgb(var(--mdw-color__surface));
+      --mdw-ink: var(--mdw-color__on-surface);
+      position: relative;
+    
+      color: rgb(var(--mdw-ink));
+    
+      font: var(--mdw-type__font);
+      letter-spacing: var(--mdw-type__letter-spacing);
+    }  
+  `
   .autoRegister('mdw-surface');

package/components/Switch.js

@@ -5,8 +5,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
-import styles from './Switch.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(InputMixin) // Label as root
@@ -26,8 +24,6 @@ export default CustomElement
     selectedSrc: 'string',
     unselectedSrc: 'string',
   })
-  .css(styles)
-
   .on({
     composed({ html }) {
       const { state, label, control, touchTarget } = this.refs;
@@ -124,4 +120,71 @@ export default CustomElement
       '~pointermove': 'onControlMouseOrTouch',
     },
   })
+  .css`
+    /* https://m3.material.io/components/switch/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+      position: relative;
+
+      display: inline-flex;
+      align-items: center;
+
+      gap: 12px;
+      vertical-align: middle;
+
+    }
+
+    #touch-target {
+      z-index: 0;
+    }
+
+    #label {
+      display: contents;
+
+      cursor: pointer;
+
+      /* border-radius: 50%; */
+    }
+
+    /** Switch **/
+
+    #switch {
+      --mdw-bg: inherit;
+      --mdw-ink: inherit;
+      flex:1;
+
+      pointer-events: none;
+    }
+
+    /** State **/
+
+    #state {
+      position: absolute;
+      inset: 50%;
+
+      block-size: 100%;
+      min-block-size: 40px;
+      inline-size: 100%;
+      min-inline-size: 40px;
+
+      pointer-events: none;
+
+      transform: translateX(-50%) translateY(-50%);
+
+      border-radius: 50%;
+    }
+
+    /** Disabled **/
+
+    #label[disabled] {
+      --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
+      --mdw-bg: var(--mdw-color__surface);
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+  `
   .autoRegister('mdw-switch');