@materializecss/materialize 2.0.3-alpha → 2.0.3-beta

package/dist/src/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"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"}

package/dist/src/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { Component, BaseOptions, InitElements, MElement } from "./component";
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipOptions extends BaseOptions {
     /**
      * Delay time before tooltip disappears.
@@ -10,6 +11,11 @@ export interface TooltipOptions extends BaseOptions {
      * @default 0
      */
     enterDelay: number;
+    /**
+     * Element Id for the tooltip.
+     * @default ""
+     */
+    tooltipId?: string;
     /**
      * Text string for the tooltip.
      * @default ""
@@ -40,7 +46,7 @@ export interface TooltipOptions extends BaseOptions {
      * Set the direction of the tooltip.
      * @default 'bottom'
      */
-    position: 'top' | 'right' | 'bottom' | 'left';
+    position: TooltipPosition;
     /**
      * Amount in px that the tooltip moves during its transition.
      * @default 10
@@ -107,6 +113,6 @@ export declare class Tooltip extends Component<TooltipOptions> {
     _handleMouseLeave: () => void;
     _handleFocus: () => void;
     _handleBlur: () => void;
-    _getAttributeOptions(): {};
+    _getAttributeOptions(): Partial<TooltipOptions>;
 }
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/src/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAcD,qBAAa,OAAQ,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpD;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,iBAAiB,CAAmC;IAC5D,OAAO,CAAC,kBAAkB,CAAmC;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;gBAEN,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC;IAgB7D,MAAM,KAAK,QAAQ,IAAI,cAAc,CAEpC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,OAAO;IACxE;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,OAAO,EAAE;IAUtF,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO;IAI5C,OAAO;IAMP,gBAAgB;IAWhB,kBAAkB,CAAC,gBAAgB,EAAE,WAAW;IAIhD,qBAAqB;IAIrB,mBAAmB;IAOnB,oBAAoB;IAOpB;;OAEG;IACH,IAAI,aAAc,OAAO,UAQxB;IAED;;OAEG;IACH,KAAK,aAMJ;IAED,oBAAoB;IAQpB,qBAAqB,CAAC,QAAQ,KAAA;IAQ9B,gBAAgB;IA0ChB,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;IA+B3E,UAAU;IAcV,WAAW;IAYX,iBAAiB,aAIhB;IAED,iBAAiB,aAIhB;IAED,YAAY,aAKX;IAED,WAAW,aAGV;IAED,oBAAoB;CAYrB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAcD,qBAAa,OAAQ,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpD;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,iBAAiB,CAAmC;IAC5D,OAAO,CAAC,kBAAkB,CAAmC;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;gBAEN,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC;IAiB7D,MAAM,KAAK,QAAQ,IAAI,cAAc,CAEpC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,OAAO;IACxE;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,OAAO,EAAE;IAUtF,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO;IAI5C,OAAO;IAMP,gBAAgB;IAgBhB,kBAAkB,CAAC,gBAAgB,EAAE,WAAW;IAMhD,qBAAqB;IAIrB,mBAAmB;IAOnB,oBAAoB;IAOpB;;OAEG;IACH,IAAI,aAAc,OAAO,UAQxB;IAED;;OAEG;IACH,KAAK,aAMJ;IAED,oBAAoB;IAQpB,qBAAqB,CAAC,QAAQ,KAAA;IAQ9B,gBAAgB;IA0ChB,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;IA+B3E,UAAU;IAcV,WAAW;IAYX,iBAAiB,aAIhB;IAED,iBAAiB,aAIhB;IAED,YAAY,aAKX;IAED,WAAW,aAGV;IAED,oBAAoB,IAAI,OAAO,CAAC,cAAc,CAAC;CAiBhD"}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Builds Materialize distribution packages",
   "author": "Alvin Wang, Alan Chang",
   "homepage": "https://materializecss.github.io/materialize/",
-  "version": "2.0.3-alpha",
+  "version": "2.0.3-beta",
   "main": "dist/js/materialize.js",
   "module": "src/index.ts",
   "style": "dist/css/materialize.css",
@@ -23,7 +23,6 @@
     "release": "grunt release",
     "watch": "webpack --watch",
     "precommit": "lint-staged",
-    "docs": "grunt docs",
     "commit": "npx cz",
     "_postinstall": "husky install",
     "prepack": "pinst --disable",
@@ -51,9 +50,7 @@
     "grunt-concurrent": "^3.0.0",
     "grunt-contrib-compress": "^1.4.1",
     "grunt-contrib-connect": "^3.0.0",
-    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jasmine": "^3.0.0",
-    "grunt-contrib-pug": "^3.0.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-postcss": "^0.9.0",
     "grunt-remove-logging": "^0.2.0",

package/sass/components/_buttons.scss

@@ -1,18 +1,58 @@
-// shared styles
-.btn,
-.btn-flat {
-  font-weight: 500;
-  border: $button-border;
-  border-radius: $button-radius;
-  display: inline-block;
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+  --font-size-icon: 16px;
+  --padding: 24px;
+  --padding-icon: 16px;
+  --gap-icon: 8px;
+  
   height: $button-height;
-  line-height: $button-height;
-  padding: $button-padding;
-  vertical-align: middle;
-  user-select: none;
+  
+  // line-height: $button-height;
+  border: $button-border;
+  border-radius: $button-radius;  
+  
+  // padding: $button-padding;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  
+  color: $button-raised-color;
+  font-size: $button-font-size;
+  font-weight: 500;
+  text-decoration: none;
+  
+  display: inline-flex;
+  align-items: center;
+  
+  cursor: pointer;
   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  
+  transition: background-color .2s ease-out;
 }
 
+// Icon
+.btn.icon-left, .btn.icon-right {
+  position: relative;
+}
+.btn.icon-left {
+  padding-left: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+}
+.btn.icon-right {
+  padding-right: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon)); 
+}
+.btn.icon-left i, .btn.icon-right i {
+  position: absolute;
+  font-size: var(--font-size-icon);
+}
+.btn.icon-left i {
+  left: var(--padding-icon);
+}
+.btn.icon-right i {
+  right: var(--padding-icon);
+}
+
+
 // Disabled shared style
 .btn.disabled,
 .btn-floating.disabled,
@@ -40,53 +80,103 @@
   }
 }
 
-// Shared icon styles
-.btn,
-.btn-floating,
-.btn-large,
-.btn-small,
-.btn-flat {
-  font-size: $button-font-size;
-  outline: 0;
-  i {
-    font-size: $button-icon-font-size;
-    line-height: inherit;
+//--- Filled Button
+.btn.filled {
+  background-color: var(--md-sys-color-primary);
+}
+//--- Filled Tonal
+.btn.tonal {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+//--- Text-Button (Flat)
+.btn.text, .btn-flat {
+  box-shadow: none;
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  cursor: pointer;
+  transition: background-color .2s;
+  &:focus,
+  &:hover {
+    box-shadow: none;
+    background-color: $button-flat-hover-background-color;
+  }
+  &:focus {
+    background-color: $button-flat-focus-background-color;
+  }
+  &.disabled,
+  &.btn.text[disabled], &.btn-flat[disabled] {
+    background-color: transparent !important;
+    color: $button-flat-disabled-color !important;
+    cursor: default;
   }
 }
+//--- Outlined-Button
+.btn.outlined {
+  background-color: transparent;
+  color: $button-raised-background;
+  border: 1px solid $button-raised-background;
+}
+//--- Elevated
+.btn.elevated {
+  @extend .tonal;
+  @extend .z-depth-1;
+}
+
+
+//======================== States (Hover, Focused, ...)
 
-// Raised Button
 .btn {
-  text-decoration: none;
-  color: $button-raised-color;
-  background-color: $button-raised-background;
-  text-align: center;
-  letter-spacing: .5px;
-  @extend .z-depth-1;
-  transition: background-color .2s ease-out;
-  cursor: pointer;
+  @extend .filled;
+
   &:hover {
     background-color: $button-raised-background-hover;
     @extend .z-depth-1-half;
   }
+
   &:focus {
     background-color: $button-raised-background-focus;
     @extend .z-depth-1-half;
-  }
+  }  
 }
 
+
+
+//----------
+// .btn-floating {
+//   border-radius: 16px;
+//   width: unset;
+//   display: grid;
+//   grid-auto-flow: column;
+//   align-items: center;
+//   padding: 16px !important;
+//   padding-right: 24px !important; /* only with icon */
+//   gap: 8px;
+// }
+// .btn-floating.btn-large {
+//   width: unset;
+// }
+// .btn-large {
+//   font-size: 14px;
+// }
+//-----
 // Floating button
 .btn-floating {
+
   &:hover {
     background-color: $button-floating-background-hover;
     @extend .z-depth-1-half;
   }
+
   &:focus {
     background-color: $button-floating-background-focus;
     @extend .z-depth-1-half;
   }
+
   &:before {
     border-radius: 0;
   }
+
   &.btn-large {
     &.halfway-fab {
       bottom: -$button-floating-large-size * 0.5;
@@ -94,9 +184,10 @@
     width: $button-floating-large-size;
     height: $button-floating-large-size;
     padding: 0;
-    i {
-      line-height: $button-floating-large-size;
-    }
+    // font-size: 
+    // i {
+    //   // line-height: $button-floating-large-size;
+    // }
   }
 
   &.btn-small {
@@ -105,9 +196,9 @@
     }
     width: $button-floating-small-size;
     height: $button-floating-small-size;
-    i {
-      line-height: $button-floating-small-size;
-    }
+    // i {
+    //   line-height: $button-floating-small-size;
+    // }
   }
 
   &.halfway-fab {
@@ -119,36 +210,48 @@
     right: 24px;
     bottom: -$button-floating-size * 0.5;
   }
-  display: inline-block;
+
+  // FIXES
+  // width: unset;  
+  // padding: 16px !important;
+  // padding-right: 24px !important; /* only with icon */
+  // gap: 8px;
+
   color: $button-floating-color;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
+  
   width: $button-floating-size;
   height: $button-floating-size;
-  line-height: $button-floating-size;
-  padding: 0;
+  // line-height: $button-floating-size;
+
   background-color: $button-floating-background;
   border-radius: $button-floating-radius;
+  padding: 0;
+
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
   @extend .z-depth-1;
   transition: background-color .3s;
   cursor: pointer;
   vertical-align: middle;
+
   i {
+    color: $button-floating-color;
+    font-size: $button-large-icon-font-size;
+    // line-height: $button-floating-size;
     width: inherit;
     display: inline-block;
     text-align: center;
-    color: $button-floating-color;
-    font-size: $button-large-icon-font-size;
-    line-height: $button-floating-size;
   }
 }
-
 // button fix
 button.btn-floating {
   border: $button-border;
 }
-
 // Fixed Action Button
 .fixed-action-btn {
   &.active {
@@ -274,37 +377,15 @@ button.btn-floating {
   }
 }
 
-// Flat button
-.btn-flat {
-  box-shadow: none;
-  background-color: transparent;
-  color: $button-flat-color;
-  cursor: pointer;
-  transition: background-color .2s;
-  &:focus,
-  &:hover {
-    box-shadow: none;
-    background-color: $button-flat-hover-background-color;
-  }
-  &:focus {
-    background-color: $button-flat-focus-background-color;
-  }
-  &.disabled,
-  &.btn-flat[disabled]  {
-    background-color: transparent !important;
-    color: $button-flat-disabled-color !important;
-    cursor: default;
-  }
-}
+//--- Helper classes (for all)
 
 // Large button
 .btn-large {
   @extend .btn;
   height: $button-large-height;
-  line-height: $button-large-height;
+  // line-height: $button-large-height;
   font-size: $button-large-font-size;
   padding: 0 28px;
-
   i {
     font-size: $button-large-icon-font-size;
   }
@@ -325,3 +406,7 @@ button.btn-floating {
 .btn-block {
   display: block;
 }
+
+.btn.rounded {
+  border-radius: 99999px;
+}

package/sass/components/_chips.scss

@@ -1,45 +1,87 @@
 .chip {
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+
+  background-color: $chip-bg-color;
+
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+
+  margin: 0;
+  height: 32px;
+
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  
+  font-size: var(--font-size);
+  font-weight: 500;  
+  color: $chip-font-color;
+  
+  border-radius: 8px;
+
+  align-items: center;
+  user-select: none;
+  vertical-align: top;
+
   &:focus {
     outline: none;
     background-color: $chip-selected-color;
     color: $chip-selected-font-color;
   }
+}
 
-  display: inline-block;
-  height: 32px;
-  font-size: 13px;
-  font-weight: 500;
-  color: $chip-font-color;
-  line-height: 32px;
-  padding: 0 12px;
-  border-radius: 16px;
-  background-color: $chip-bg-color;
-  margin-bottom: $chip-margin;
-  margin-right: $chip-margin;
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
 
-  > img {
-    float: left;
-    margin: 0 8px 0 -12px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-  }
+.chip > img {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 12px;
+}
 
-  .close {
-    cursor: pointer;
-    float: right;
-    font-size: 16px;
-    line-height: 32px;
-    padding-left: 8px;
-  }
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
+  @extend .on-surface-variant-text;
+}
+
+.chip .close {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+}
+
+.chip .close:hover {
+  background-color: #8888;
 }
 
+//--------------------------
+
 .chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+
   border: none;
   border-bottom: 1px solid $chip-border-color;
   box-shadow: none;
   margin: $input-margin;
-  min-height: 45px;
+
+  padding: 4px;
+  // min-height: 45px;
+
   outline: none;
   transition: all .3s;
 
@@ -58,13 +100,18 @@
     color: $input-color;
     display: inline-block;
     font-size: $input-font-size;
-    height: $input-height;
-    line-height: 32px;
+
+    // height: 32px;
+    // height: $input-height;
+    // line-height: 32px;
+    height: 32px;
+
     outline: 0;
     margin: 0;
     padding: 0;
     width: 120px;
 
+
     &:focus {
       border: 0;
       box-shadow: none;