kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materialize.kevinzarshenas.com",
-  "version": "2.3.3-1.0.2",
+  "version": "2.3.3-1.0.21",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",
@@ -56,19 +56,62 @@
   "dependencies": {
     "normalize.css": "^8.0.1"
   },
+  "peerDependencies": {
+    "@simonwep/pickr": "^1.9.0",
+    "air-datepicker": "^3.5.0",
+    "filepond": "^4.30.0",
+    "filepond-plugin-file-validate-type": "^1.2.0",
+    "filepond-plugin-image-exif-orientation": "^1.0.0",
+    "filepond-plugin-image-preview": "^4.6.0",
+    "imask": "^7.6.0",
+    "tom-select": "^2.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@simonwep/pickr": {
+      "optional": true
+    },
+    "air-datepicker": {
+      "optional": true
+    },
+    "filepond": {
+      "optional": true
+    },
+    "filepond-plugin-file-validate-type": {
+      "optional": true
+    },
+    "filepond-plugin-image-exif-orientation": {
+      "optional": true
+    },
+    "filepond-plugin-image-preview": {
+      "optional": true
+    },
+    "imask": {
+      "optional": true
+    },
+    "tom-select": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@fontsource/material-icons": "^5.2.5",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@simonwep/pickr": "^1.9.0",
     "@storybook/addon-docs": "^9.0.12",
     "@storybook/addon-themes": "^9.0.12",
     "@storybook/html": "^9.0.12",
     "@storybook/html-vite": "^9.0.12",
     "@types/node": "^20.5.2",
+    "air-datepicker": "^3.5.0",
     "archiver": "^7.0.1",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.10.0",
     "eslint-plugin-storybook": "^9.0.12",
+    "filepond": "^4.30.0",
+    "filepond-plugin-file-validate-type": "^1.2.0",
+    "filepond-plugin-image-exif-orientation": "^1.0.0",
+    "filepond-plugin-image-preview": "^4.6.0",
+    "imask": "^7.6.0",
     "jasmine": "^5.1.0",
     "jasmine-browser-runner": "^2.5.0",
     "jasmine-core": "^5.2.0",
@@ -79,6 +122,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "sass": "^1.77.8",
     "storybook": "^9.0.12",
+    "tom-select": "^2.3.0",
     "tslib": "^2.6.3",
     "typescript": "^5.4.3",
     "typescript-eslint": "^8.6.0",

package/sass/_colors.scss

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "sass:math";
 // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
 
 $materialize-red: (
@@ -371,12 +375,12 @@ $colors: (
 
 
 // usage: colorFunc("name_of_color", "type_of_color")
-// to avoid to repeating map-get($colors, ...)
+// to avoid to repeating map.get($colors, ...)
 @function colorFunc($color, $type) {
-  @if map-has-key($colors, $color) {
-    $curr_color: map-get($colors, $color);
-    @if map-has-key($curr_color, $type) {
-      @return map-get($curr_color, $type);
+  @if map.has-key($colors, $color) {
+    $curr_color: map.get($colors, $color);
+    @if map.has-key($curr_color, $type) {
+      @return map.get($curr_color, $type);
     }
   }
   @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
@@ -385,6 +389,11 @@ $colors: (
 
 
 // Color Classes
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss
+// Adds the -border variant (background/text already existed) plus
+// .light-mode-*/.dark-mode-* variants below, so a color can be forced
+// regardless of the current color-scheme (e.g. an element that should
+// always render "the light-mode red" no matter which theme is active).
 @each $color_name, $color in $colors {
   @each $color_type, $color_value in $color {
     @if $color_type == "base" {
@@ -394,6 +403,32 @@ $colors: (
       .#{$color_name}-text {
         color: $color_value !important;
       }
+      .#{$color_name}-border {
+        border-color: $color_value !important;
+      }
+
+      @media (prefers-color-scheme: light) {
+        .light-mode-#{$color_name} {
+          background-color: $color_value !important;
+        }
+        .light-mode-#{$color_name}-text {
+          color: $color_value !important;
+        }
+        .light-mode-#{$color_name}-border {
+          border-color: $color_value !important;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        .dark-mode-#{$color_name} {
+          background-color: $color_value !important;
+        }
+        .dark-mode-#{$color_name}-text {
+          color: $color_value !important;
+        }
+        .dark-mode-#{$color_name}-border {
+          border-color: $color_value !important;
+        }
+      }
     }
     @else if $color_name != "shades" {
       .#{$color_name}.#{$color_type} {
@@ -402,11 +437,38 @@ $colors: (
       .#{$color_name}-text.text-#{$color_type} {
         color: $color_value !important;
       }
+      .#{$color_name}-border.border-#{$color_type} {
+        border-color: $color_value !important;
+      }
+
+      @media (prefers-color-scheme: light) {
+        .light-mode-#{$color_name}.#{$color_type}-light-mode {
+          background-color: $color_value !important;
+        }
+        .light-mode-#{$color_name}-text.text-#{$color_type}-light-mode {
+          color: $color_value !important;
+        }
+        .light-mode-#{$color_name}-border.border-#{$color_type}-light-mode {
+          border-color: $color_value !important;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        .dark-mode-#{$color_name}.#{$color_type}-dark-mode {
+          background-color: $color_value !important;
+        }
+        .dark-mode-#{$color_name}-text.text-#{$color_type}-dark-mode {
+          color: $color_value !important;
+        }
+        .dark-mode-#{$color_name}-border.border-#{$color_type}-dark-mode {
+          border-color: $color_value !important;
+        }
+      }
     }
   }
 }
 
 // Shade classes
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss
 @each $color, $color_value in $shades {
   .#{$color} {
     background-color: $color_value !important;
@@ -414,4 +476,128 @@ $colors: (
   .#{$color}-text {
     color: $color_value !important;
   }
+  .#{$color}-border {
+    border-color: $color_value !important;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .light-mode-#{$color} {
+      background-color: $color_value !important;
+    }
+    .light-mode-#{$color}-text {
+      color: $color_value !important;
+    }
+    .light-mode-#{$color}-border {
+      border-color: $color_value !important;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .dark-mode-#{$color} {
+      background-color: $color_value !important;
+    }
+    .dark-mode-#{$color}-text {
+      color: $color_value !important;
+    }
+    .dark-mode-#{$color}-border {
+      border-color: $color_value !important;
+    }
+  }
+}
+
+/// Gradients
+///////////////////////////////////////////////////////
+///
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss (angle/direction helpers + linear-gradient mixin)
+// Convert an angle between units. @author Chris Eppstein
+@function convert-angle($value, $unit) {
+  $convertable-units: deg grad turn rad;
+  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
+
+  @if list.index($convertable-units, math.unit($value)) and list.index($convertable-units, $unit) {
+    @return $value / list.nth($conversion-factors, list.index($convertable-units, math.unit($value))) * list.nth($conversion-factors, list.index($convertable-units, $unit));
+  }
+
+  @warn "Cannot convert `#{math.unit($value)}` to `#{$unit}`.";
+}
+
+// Is `$value` a direction keyword or an angle?
+@function is-direction($value) {
+  $is-direction: list.index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-angle: meta.type-of($value) == 'number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value));
+
+  @return $is-direction or $is-angle;
+}
+
+// Prints a linear-gradient with a plain color fallback (the gradient's own
+// start color, so something reasonable still shows if gradients aren't
+// supported) ahead of the real `linear-gradient()` declaration.
+@mixin linear-gradient($direction, $color-stops...) {
+  @if is-direction($direction) == false {
+    $color-stops: ($direction, $color-stops);
+    $direction: 180deg;
+  }
+
+  background: list.nth(list.nth($color-stops, 1), 1);
+  background: linear-gradient($direction, $color-stops);
+}
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_gradient_collection.scss
+// 30 ready-made two-color gradients, each built from the palette above via
+// colorFunc() so they stay in sync if a palette color ever changes.
+$gradient-colors: (
+  gradient-45deg-light-blue-teal: ('start-color': colorFunc("light-blue", "lighten-4"), 'end-color': colorFunc("teal", "accent-2"), 'direction': 45deg),
+  gradient-45deg-indigo-light-blue: ('start-color': colorFunc("indigo", "darken-1"), 'end-color': colorFunc("light-blue", "lighten-2"), 'direction': 45deg),
+  gradient-45deg-light-blue-indigo: ('start-color': colorFunc("light-blue", "lighten-4"), 'end-color': colorFunc("indigo", "lighten-3"), 'direction': 45deg),
+  gradient-45deg-yellow-green: ('start-color': colorFunc("yellow", "accent-1"), 'end-color': colorFunc("green", "accent-1"), 'direction': 45deg),
+  gradient-45deg-orange-deep-orange: ('start-color': colorFunc("orange", "lighten-4"), 'end-color': colorFunc("deep-orange", "lighten-4"), 'direction': 45deg),
+  gradient-45deg-deep-purple-purple: ('start-color': colorFunc("deep-purple", "lighten-4"), 'end-color': colorFunc("purple", "lighten-5"), 'direction': 45deg),
+  gradient-45deg-red-pink: ('start-color': colorFunc("red", "accent-2"), 'end-color': colorFunc("pink", "lighten-3"), 'direction': 45deg),
+  gradient-45deg-light-green-amber: ('start-color': colorFunc("light-green", "lighten-3"), 'end-color': colorFunc("amber", "lighten-5"), 'direction': 45deg),
+  gradient-45deg-amber-amber: ('start-color': colorFunc("amber", "darken-4"), 'end-color': colorFunc("amber", "lighten-1"), 'direction': 45deg),
+  gradient-45deg-purple-pink: ('start-color': colorFunc("purple", "accent-1"), 'end-color': colorFunc("pink", "lighten-5"), 'direction': 45deg),
+  gradient-45deg-teal-cyan: ('start-color': colorFunc("teal", "lighten-5"), 'end-color': colorFunc("cyan", "accent-3"), 'direction': 45deg),
+  gradient-45deg-blue-grey-blue-grey: ('start-color': colorFunc("blue-grey", "lighten-4"), 'end-color': colorFunc("blue-grey", "darken-1"), 'direction': 45deg),
+  gradient-45deg-orange-amber: ('start-color': colorFunc("orange", "darken-4"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
+  gradient-45deg-indigo-blue: ('start-color': colorFunc("indigo", "darken-2"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
+  gradient-45deg-brown-brown: ('start-color': colorFunc("brown", "darken-1"), 'end-color': colorFunc("blue", "lighten-4"), 'direction': 45deg),
+  gradient-45deg-blue-grey-blue: ('start-color': colorFunc("blue-grey", "darken-4"), 'end-color': colorFunc("blue", "accent-3"), 'direction': 45deg),
+  gradient-45deg-purple-deep-orange: ('start-color': colorFunc("purple", "darken-1"), 'end-color': colorFunc("deep-orange", "accent-2"), 'direction': 45deg),
+  gradient-45deg-green-teal: ('start-color': colorFunc("green", "darken-1"), 'end-color': colorFunc("teal", "accent-3"), 'direction': 45deg),
+  gradient-45deg-purple-light-blue: ('start-color': colorFunc("purple", "accent-2"), 'end-color': colorFunc("light-blue", "lighten-2"), 'direction': 45deg),
+  gradient-45deg-cyan-cyan: ('start-color': colorFunc("cyan", "accent-2"), 'end-color': colorFunc("cyan", "accent-3"), 'direction': 45deg),
+  gradient-45deg-yellow-teal: ('start-color': colorFunc("yellow", "lighten-4"), 'end-color': colorFunc("teal", "accent-2"), 'direction': 45deg),
+  gradient-45deg-purple-deep-purple: ('start-color': colorFunc("purple", "darken-2"), 'end-color': colorFunc("deep-purple", "accent-2"), 'direction': 45deg),
+  gradient-45deg-cyan-light-green: ('start-color': colorFunc("cyan", "darken-2"), 'end-color': colorFunc("light-green", "accent-2"), 'direction': 45deg),
+  gradient-45deg-purple-amber: ('start-color': colorFunc("purple", "accent-3"), 'end-color': colorFunc("amber", "darken-2"), 'direction': 45deg),
+  gradient-45deg-indigo-purple: ('start-color': colorFunc("indigo", "darken-2"), 'end-color': colorFunc("purple", "darken-2"), 'direction': 45deg),
+  gradient-45deg-deep-purple-blue: ('start-color': colorFunc("deep-purple", "accent-4"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
+  gradient-45deg-deep-orange-orange: ('start-color': colorFunc("deep-orange", "darken-4"), 'end-color': colorFunc("orange", "darken-2"), 'direction': 45deg),
+  gradient-45deg-light-blue-cyan: ('start-color': colorFunc("light-blue", "darken-2"), 'end-color': colorFunc("cyan", "lighten-1"), 'direction': 45deg),
+  gradient-45deg-blue-indigo: ('start-color': colorFunc("blue", "accent-4"), 'end-color': colorFunc("indigo", "darken-1"), 'direction': 45deg),
+  gradient-45deg-semi-dark: ('start-color': #00aeff, 'end-color': #3369e6, 'direction': -90deg),
+) !default;
+
+@each $gcolor_name, $gcolor in $gradient-colors {
+  $start-color: map.get($gcolor, start-color);
+  $end-color: map.get($gcolor, end-color);
+  $direction: map.get($gcolor, direction);
+
+  .#{$gcolor_name} {
+    @include linear-gradient($direction, $start-color, $end-color);
+
+    // Drop shadow tinted to match the gradient's end color, for a
+    // raised/glowing look instead of a flat generic shadow.
+    &.gradient-shadow {
+      box-shadow: 0 6px 20px 0 rgba($end-color, 0.5) !important;
+    }
+  }
+
+  // Standalone version of the same shadow: doesn't require the matching
+  // .#{$gcolor_name} background class, so it can be dropped onto any
+  // element (e.g. a plain card, a button) that just wants the tinted
+  // glow without the actual gradient fill.
+  .#{$gcolor_name}-shadow {
+    box-shadow: 0 6px 20px 0 rgba($end-color, 0.5) !important;
+  }
 }

package/sass/_global.scss

@@ -91,7 +91,15 @@ a {
 }
 
 //  Blockquote
-blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
+blockquote { margin: 20px 0; padding-left: 0.9rem; border-left: 1px solid var(--md-sys-color-primary); }
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+// Icon inside a blockquote inherits the surrounding text size and sits on
+// the baseline instead of towering over the first line.
+blockquote i.material-icons {
+  font-size: inherit;
+  vertical-align: sub;
+}
 
 // Icon Styles
 i {
@@ -470,6 +478,21 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
   }
 }
 
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/dimensions.scss
+// Same all-direction spacing as .p-*/.m-* above (reuses $spacing-values,
+// so the 0-6 steps and their rem values stay a single source of truth),
+// under the .padding-*/.margin-* names some projects already use in their
+// markup. Excludes "auto": the source only ever defined steps 0-6.
+@each $property, $shortcut in $spacing-shortcuts {
+  @each $name, $value in $spacing-values {
+    @if $name != "auto" {
+      .#{$property}-#{$name} {
+        #{$property}: $value !important;
+      }
+    }
+  }
+}
+
 // Docked display
 .display-docked {
   position: absolute;
@@ -478,13 +501,229 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
   visibility: hidden;
 }
 
+/**************************
+  Utility Typography Classes
+**************************/
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/typography.scss
+// Numeric font weights: .font-weight-100 through .font-weight-900
+@for $i from 1 through 9 {
+  .font-weight-#{$i * 100} {
+    font-weight: $i * 100 !important;
+  }
+}
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/typography.scss
+// Keyword font weights
+.font-weight-normal { font-weight: normal !important; }
+.font-weight-bold { font-weight: bold !important; }
+.font-weight-lighter { font-weight: lighter !important; }
+.font-weight-bolder { font-weight: bolder !important; }
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/typography.scss
+.line-height-normal { line-height: normal !important; }
+
+/**************************
+  Utility Cursor Classes
+**************************/
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/cursors.scss
+// One class per CSS cursor keyword (.cursor-pointer, .cursor-grab, ...),
+// plus an !important variant of each for overriding a more specific rule.
+$cursor-types: (
+  "alias": alias,
+  "all-scroll": all-scroll,
+  "auto": auto,
+  "cell": cell,
+  "col-resize": col-resize,
+  "context-menu": context-menu,
+  "copy": copy,
+  "crosshair": crosshair,
+  "default": default,
+  "e-resize": e-resize,
+  "ew-resize": ew-resize,
+  "grab": grab,
+  "grabbing": grabbing,
+  "help": help,
+  "move": move,
+  "n-resize": n-resize,
+  "ne-resize": ne-resize,
+  "nesw-resize": nesw-resize,
+  "ns-resize": ns-resize,
+  "nw-resize": nw-resize,
+  "nwse-resize": nwse-resize,
+  "no-drop": no-drop,
+  "none": none,
+  "not-allowed": not-allowed,
+  "pointer": pointer,
+  "progress": progress,
+  "row-resize": row-resize,
+  "s-resize": s-resize,
+  "se-resize": se-resize,
+  "sw-resize": sw-resize,
+  "text": text,
+  "w-resize": w-resize,
+  "wait": wait,
+  "zoom-in": zoom-in,
+  "zoom-out": zoom-out
+) !default;
+
+@each $name, $value in $cursor-types {
+  .cursor-#{$name} {
+    cursor: $value;
+  }
+  .cursor-#{$name}-important {
+    cursor: $value !important;
+  }
+}
+
 .confirmation-btns {
   margin-left: auto;
 }
 
+/**************************
+  Utility Screen-Fit Classes
+**************************/
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/dimensions.scss
+// Size an element to (or at least to) the viewport.
+.screen-fit {
+  width: 100%;
+  height: 100vh;
+}
+
+.screen-fit-x {
+  width: 100%;
+}
+
+.screen-fit-y {
+  align-items: stretch;
+}
+
+.screen-fit-min {
+  min-width: 100%;
+  min-height: 100vh;
+}
+
+.screen-fit-min-x {
+  min-width: 100%;
+  height: 100vh;
+}
+
+.screen-fit-min-y {
+  width: 100%;
+  min-height: 100vh;
+}
+
+/**************************
+  Utility Screen-Flex Classes
+**************************/
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/dimensions.scss
+// A one-class-per-modifier flexbox layout system: `.screen-flex` turns the
+// element into a flex container, and each `.screen-*` modifier below is
+// meant to be combined with it directly on the same element.
+.screen-flex {
+  display: flex;
+
+  &.screen-flex-important {
+    display: flex !important;
+  }
+
+  // Alignment on both axes
+  &.screen-center {
+    justify-content: center;
+    align-items: center;
+  }
+  &.screen-left {
+    justify-content: left;
+    align-items: center;
+  }
+  &.screen-right {
+    justify-content: right;
+    align-items: right;
+  }
+
+  // Wrapping
+  &.screen-wrap {
+    flex-wrap: wrap;
+  }
+  &.screen-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  // Vertical (cross-axis) alignment only
+  &.screen-center-y {
+    align-items: center;
+  }
+  &.screen-bottom-y {
+    align-items: flex-end;
+  }
+  &.screen-top-y {
+    align-items: flex-start;
+  }
+
+  // Horizontal (main-axis) alignment only
+  &.screen-center-x {
+    justify-content: center;
+  }
+  &.screen-center-space-x {
+    justify-content: space-around;
+  }
+  &.screen-center-distributed-x {
+    justify-content: space-evenly;
+  }
+  &.screen-distributed-x {
+    justify-content: space-between;
+  }
+
+  // Direction
+  &.screen-direction-y-asc {
+    flex-direction: column;
+  }
+  &.screen-direction-y-desc {
+    flex-direction: column-reverse;
+  }
+  &.screen-direction-x-asc {
+    flex-direction: row;
+  }
+  &.screen-direction-x-desc {
+    flex-direction: row-reverse;
+  }
+
+  // Direct children
+  .element-flex-grow-1 {
+    flex-grow: 1;
+  }
+}
+
+.element-flex {
+  display: flex;
+}
+
+/**************************
+  Utility Object-Fit Classes
+**************************/
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/dimensions.scss
+.object-fit-cover {
+  object-fit: cover;
+}
+
+.object-fit-fill {
+  object-fit: fill;
+}
+
 /* This is needed for some mobile phones to display the Google Icon font properly */
 .material-icons, .material-symbols-outlined,
 .material-symbols-rounded, .material-symbols-sharp {
   text-rendering: optimizeLegibility;
   font-feature-settings: 'liga';
+
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Icon glyphs are decorative/actionable, not text - a double-click or
+  // drag shouldn't be able to select them.
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }

package/sass/materialize.scss

@@ -13,12 +13,13 @@
 @forward './grid';
 // animations
 @forward './transitions.css';
-@forward './pulse.css';
 // custom
 @forward './table_of_contents';
 @forward './tapTarget';
 
 @forward '../components/button/buttons';
+@forward '../components/alert/alerts';
+@forward '../components/kanban/kanban';
 @forward '../components/collapsible/collapsible'; // custom
 @forward '../components/badge/badges';
 @forward '../components/card/cards';
@@ -31,6 +32,7 @@
 @forward '../components/dialog/modal';
 @forward '../components/dialog/materialbox'; // custom
 @forward '../components/chip/chips';
+@forward '../components/toolbar/toolbar';
 //@forward '../components/appbar/navbar';
 @forward '../components/appbar/appbar.css';
 @forward '../components/navigation-drawer/sidenav';
@@ -49,3 +51,14 @@
 @forward '../components/textfield/select';
 @forward '../components/textfield/file-input';
 @forward '../components/textfield/formfields.css';
+@forward '../components/color-input/color-input';
+@forward '../components/air-datepicker/air-datepicker';
+@forward '../components/file-input/file-input-enhanced';
+@forward '../components/tom-select/tom-select-field';
+
+// Forwarded last so its overflow:visible on .pulse wins any specificity
+// ties against components like .btn-floating (overflow:hidden) - pulse's
+// expanding ::before ring needs to render outside its host element's
+// bounds, which an earlier source position let .btn-floating silently
+// clip away.
+@forward './pulse.css';

package/sass/mixins.module.scss

@@ -75,23 +75,23 @@
 }
 
 @mixin btn-elevated {
-  //color: var(--md-sys-color-on-secondary-container);
-  //background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
   @extend .z-depth-1;
 
   &:hover,
   &:focus {
-    //color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-primary);
   }
 
   &:hover {
     @extend .z-depth-2;
-    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
   }
 
   &:focus {
     @extend .z-depth-1;
-    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
   }
 
   @include focus-visible();
@@ -127,7 +127,7 @@
 @mixin btn-flat {
   @extend .z-depth-0;
   color: var(--md-sys-color-primary);
-  background-color: transparent;
+  background-color: var(--md-sys-color-surface-variant);
 
   &:hover,
   &:focus {