@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_fab-menu.scss

@@ -0,0 +1,232 @@
+@use "../abstracts" as *;
+
+// FAB menu. A FAB that expands into a list of labelled actions and morphs
+// into a close button while it is open. `.fab-menu` is the host; `.active`
+// and `aria-expanded` are the framework's, never the author's.
+//
+// It shares the FloatingActionButton class with the `.fab` speed dial next
+// door and nothing else. The two never collide: `$_fab` is
+// `:is(.fab, .fixed-action-btn)`, and a class selector matches whole class
+// names, so `.fab` does not reach `.fab-menu`. The one name that looks shared
+// is `--md-comp-fab-menu-gap`, which is the speed dial's own gap token and is
+// deliberately not one of the names below.
+//
+// Tokens (M3 md.comp.fab-menu.*, DSP 34.0.21):
+//
+//   close-button   56x56, icon 20dp, corner.full, elevation 3, 8dp above list
+//   menu-item      56dp tall, icon 24dp, 24dp insets, 8dp icon-label space,
+//                  4dp between items, corner.full, elevation 0, title-medium
+//
+// The colour axis is M3's three roles, and each one moves two pairs at once:
+// the list item takes `<role>-container` / `on-<role>-container`, the close
+// button the solid `<role>` / `on-<role>`. That pairing is M3's - the close
+// button is deliberately the louder of the two.
+$_fab-menu-roles: ("primary", "secondary", "tertiary");
+
+.fab-menu {
+  --md-comp-fab-menu-close-button-container-height: 56px;
+  --md-comp-fab-menu-close-button-container-width: 56px;
+  --md-comp-fab-menu-close-button-icon-size: 20px;
+  --md-comp-fab-menu-close-button-between-space: 8px;
+  --md-comp-fab-menu-close-button-container-color: var(--md-sys-color-primary);
+  --md-comp-fab-menu-close-button-icon-color: var(--md-sys-color-on-primary);
+  --md-comp-fab-menu-menu-item-container-height: 56px;
+  --md-comp-fab-menu-menu-item-between-space: 4px;
+  --md-comp-fab-menu-menu-item-icon-size: 24px;
+  --md-comp-fab-menu-menu-item-icon-label-space: 8px;
+  --md-comp-fab-menu-menu-item-leading-space: 24px;
+  --md-comp-fab-menu-menu-item-trailing-space: 24px;
+  --md-comp-fab-menu-menu-item-container-color: var(
+    --md-sys-color-primary-container
+  );
+  --md-comp-fab-menu-menu-item-label-text-color: var(
+    --md-sys-color-on-primary-container
+  );
+  --md-comp-fab-menu-offset: 16px;
+  --md-comp-fab-menu-z: 997;
+  --md-comp-fab-menu-duration: 200ms;
+  --md-comp-fab-menu-stagger: 40ms;
+  --md-comp-fab-menu-easing: cubic-bezier(0.65, 0, 0.35, 1);
+
+  position: fixed;
+  inset-inline-end: var(--md-comp-fab-menu-offset);
+  bottom: var(--md-comp-fab-menu-offset);
+  z-index: var(--md-comp-fab-menu-z);
+  margin: 0;
+
+  // The trigger is the host's only in-flow child, so the host is exactly its
+  // size and the list can hang off `bottom: 100%`. Taking the list out of
+  // flow is what keeps a closed menu from reserving its own height.
+  > :is(a, button) {
+    position: relative;
+    z-index: 1;
+
+    // A second glyph in the trigger is the close button's, and only one of
+    // the two is ever in the box. With one glyph the morph is the whole
+    // affordance. `inline-block` is restated rather than reverted: the icon's
+    // own rule is in this layer too, so `revert-layer` would skip past it to
+    // the base default.
+    > #{$icon}:nth-child(2) {
+      display: none;
+    }
+  }
+
+  :is(ul, menu) {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + var(--md-comp-fab-menu-close-button-between-space));
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--md-comp-fab-menu-menu-item-between-space);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    visibility: hidden;
+    transition: visibility 0s var(--md-comp-fab-menu-duration);
+
+    // Opening runs bottom-up, so the item nearest the FAB moves first. Past
+    // six the ladder runs out and the rest move together, which is where M3
+    // stops recommending actions anyway.
+    li:nth-last-child(1) { --i: 0; }
+    li:nth-last-child(2) { --i: 1; }
+    li:nth-last-child(3) { --i: 2; }
+    li:nth-last-child(4) { --i: 3; }
+    li:nth-last-child(5) { --i: 4; }
+    li:nth-last-child(6) { --i: 5; }
+
+    > li > :is(a, button) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--md-comp-fab-menu-menu-item-icon-label-space);
+      height: var(--md-comp-fab-menu-menu-item-container-height);
+      padding-inline: var(--md-comp-fab-menu-menu-item-leading-space)
+        var(--md-comp-fab-menu-menu-item-trailing-space);
+      border: none;
+      border-radius: 9999px;
+      color: var(--md-comp-fab-menu-menu-item-label-text-color);
+      background-color: var(--md-comp-fab-menu-menu-item-container-color);
+      white-space: nowrap;
+      text-decoration: none;
+      cursor: pointer;
+      appearance: none;
+      opacity: 0;
+      transform: scale(.8) translateY(1rem);
+      transition:
+        opacity var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        transform var(--md-comp-fab-menu-duration) var(--md-comp-fab-menu-easing),
+        background-color .2s ease-out,
+        box-shadow .2s ease-out;
+      @include typescale("title-medium");
+      @include focus-visible;
+
+      > #{$icon} {
+        font-size: var(--md-comp-fab-menu-menu-item-icon-size);
+        width: var(--md-comp-fab-menu-menu-item-icon-size);
+        height: var(--md-comp-fab-menu-menu-item-icon-size);
+        line-height: var(--md-comp-fab-menu-menu-item-icon-size);
+        color: inherit;
+      }
+
+      // Enabled is elevation 0; only the states lift.
+      &:hover {
+        @include z-depth("4");
+        background-color: color-mix(
+          in oklab,
+          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("hover"),
+          var(--md-comp-fab-menu-menu-item-container-color)
+        );
+      }
+
+      &:active,
+      &:focus {
+        @include z-depth("3");
+        background-color: color-mix(
+          in oklab,
+          var(--md-comp-fab-menu-menu-item-label-text-color) state-opacity("focus"),
+          var(--md-comp-fab-menu-menu-item-container-color)
+        );
+      }
+    }
+  }
+
+  &.active :is(ul, menu) {
+    visibility: visible;
+    transition-delay: 0s;
+
+    > li > :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-menu-stagger) * var(--i, 0));
+    }
+  }
+
+  // Open, the FAB is the close button: the same disc on corner.full, the
+  // solid role colour, and a 20dp glyph. Four of those are the FAB's own
+  // tokens, so retuning them is the whole morph - `.fab-menu.active` outweighs
+  // `:where(.button).extra.circle`, which contributes only `.extra.circle`.
+  &.active > :is(a, button) {
+    --md-comp-fab-container-height: var(
+      --md-comp-fab-menu-close-button-container-height
+    );
+    --md-comp-fab-container-width: var(
+      --md-comp-fab-menu-close-button-container-width
+    );
+    --md-comp-fab-container-shape: 9999px;
+    --md-comp-fab-icon-size: var(--md-comp-fab-menu-close-button-icon-size);
+
+    color: var(--md-comp-fab-menu-close-button-icon-color);
+    background-color: var(--md-comp-fab-menu-close-button-container-color);
+
+    > #{$icon}:first-child:not(:only-child) {
+      display: none;
+    }
+
+    > #{$icon}:nth-child(2) {
+      display: inline-block;
+    }
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("hover"),
+        var(--md-comp-fab-menu-close-button-container-color)
+      );
+    }
+
+    &:active,
+    &:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-fab-menu-close-button-icon-color) state-opacity("focus"),
+        var(--md-comp-fab-menu-close-button-container-color)
+      );
+    }
+  }
+
+  // `.primary-container` is the default and is named anyway, so all three
+  // roles are a class a page can be written with.
+  @each $role in $_fab-menu-roles {
+    &.#{$role}-container {
+      --md-comp-fab-menu-menu-item-container-color: var(
+        --md-sys-color-#{$role}-container
+      );
+      --md-comp-fab-menu-menu-item-label-text-color: var(
+        --md-sys-color-on-#{$role}-container
+      );
+      --md-comp-fab-menu-close-button-container-color: var(
+        --md-sys-color-#{$role}
+      );
+      --md-comp-fab-menu-close-button-icon-color: var(
+        --md-sys-color-on-#{$role}
+      );
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fab-menu {
+    --md-comp-fab-menu-duration: 0s;
+    --md-comp-fab-menu-stagger: 0s;
+  }
+}

package/src/sass/components/_floating-sheet.scss

@@ -0,0 +1,86 @@
+@use "../abstracts" as *;
+
+// Floating sheets.
+//
+// The third member of M3's sheet family (`md.comp.sheet.floating`). A
+// dialog.floating-sheet is the surface, detached from every window edge
+// instead of docked to one. showModal() is the modal variant (scrim,
+// page inert); show() is the standard variant (no scrim, the page stays
+// interactive and the sheet floats above it).
+//
+// It is a <dialog>, so every dialog slot already applies - heading, body,
+// optional <hr> and extra content, and a last-child form[method=dialog]
+// as the action row. Only the container differs, and the sheet states it
+// by re-pointing the basic-dialog container tokens at its own.
+//
+// The token set is small on purpose: md.comp.sheet.floating publishes
+// exactly three values (DSP 34.0.21) and nothing about placement.
+//   container    surface-container-low, 28dp corners, elevation 1
+//   inset        24dp from every edge; the sheet centres in what is left
+//
+// There are deliberately no edge modifiers. `.bottom` and `.left` /
+// `.right` already select a bottom or side sheet, so a floating sheet
+// that borrowed those names would pick up two sheets' rules at once.
+// Author placement with `inset` / `margin` when a corner is wanted.
+
+dialog.floating-sheet {
+  --md-comp-floating-sheet-container-color: var(--md-sys-color-surface-container-low);
+  --md-comp-floating-sheet-container-shape: 28px;
+  --md-comp-floating-sheet-container-max-width: 400px;
+  --md-comp-floating-sheet-inset: 24px;
+
+  // The surface is the dialog's; the sheet only swaps what it owns.
+  --md-comp-basic-dialog-container-color: var(--md-comp-floating-sheet-container-color);
+  --md-comp-basic-dialog-container-shape: var(--md-comp-floating-sheet-container-shape);
+
+  box-sizing: border-box;
+  position: fixed;
+  inset: var(--md-comp-floating-sheet-inset);
+  width: min(
+    var(--md-comp-floating-sheet-container-max-width),
+    calc(100% - 2 * var(--md-comp-floating-sheet-inset))
+  );
+  min-width: 0;
+  max-width: var(--md-comp-floating-sheet-container-max-width);
+  // `inset` sets both block edges, and an `auto` height between two fixed
+  // edges is *solved*, not shrink-wrapped - the sheet would fill the window
+  // whatever it holds. `fit-content` makes all three non-auto, which is the
+  // case where auto margins centre instead.
+  height: fit-content;
+  // A percentage max-height resolves against the containing block, which is
+  // the whole viewport - not the box `inset` leaves. At 100% a tall sheet
+  // grew to viewport height, went over-constrained, and auto margins split
+  // the overflow as -24px top and bottom: the inset disappeared exactly when
+  // the sheet was large enough to need it.
+  max-height: calc(100% - 2 * var(--md-comp-floating-sheet-inset));
+  margin: auto;
+  @include z-depth("1");
+  opacity: 1;
+  scale: 1;
+  transition: opacity 200ms ease, scale 200ms ease;
+
+  // Non-modal `show()` is not in the top layer - sit above page content
+  // and below snackbars (z-index 10000).
+  &:not(:modal) {
+    z-index: 1100;
+  }
+
+  // Standard: no scrim. Modal keeps the basic-dialog backdrop.
+  &:not(:modal)::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+}
+
+@starting-style {
+  dialog.floating-sheet[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog.floating-sheet {
+    transition: none;
+  }
+}

package/src/sass/components/_icon-buttons.scss

@@ -0,0 +1,172 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// Icon buttons.
+//
+// Its own component, not a modifier on the common button: M3 gives it nine
+// token families of its own — md.comp.icon-button.{xsmall…xlarge} for the size
+// ladder and md.comp.icon-button-{standard,filled,tonal,outlined} for the
+// colours — and neither the sizes nor the colours line up with a common
+// button's. `.icon-button` is listed in `$_not-btn` in `_buttons.scss` for
+// exactly that reason, so none of the common-button geometry reaches it.
+//
+// The 40dp `.button.circle` icon button is untouched. It stays what it always
+// was: a common button wearing a round shape.
+//
+// Hosts step aside for it. A component that styles its own child controls
+// already lets a control that styles itself opt out - that is what `.button` is
+// doing in those `:not()` lists - and `.icon-button` is now in every one of
+// them (toolbar, app bar, list row, dialog, snackbar, rail, panes, footer,
+// side sheet). `tests/icon-buttons.test.js` keeps the lists in step; the member
+// goes inside the existing `:not()` argument list, never chained after it, so
+// the host rule stays exactly as specific as it was.
+//
+// The navigation drawer is the deliberate exception. Its `$_row` geometry has
+// no opt-out for `.button` either: every row in a drawer is one shape, and
+// carving an icon button out of that is the drawer's decision to make, not
+// this component's.
+//
+// Anatomy is the HTML — one control, one icon, and the name on the control.
+// The icon is decoration (`aria-hidden`), so `aria-label` is the only name the
+// control has; `semantics.json` enforces both halves of that.
+//
+// Tokens (M3 md.comp.icon-button.*, DSP 34.0.21):
+//
+//   size     height  icon  space  narrow  wide  square  pressed  outline
+//   xsmall     32     20     6      4      10     12       8        1
+//   small      40     24     8      4      14     12       8        1  <- default
+//   medium     56     24    16     12      24     16      12        1
+//   large      96     32    32     16      48     28      16        2
+//   xlarge    136     40    48     32      72     28      16        3
+//
+// Width is not a token: it is leading + icon + trailing. That is why every
+// size's default width equals its height, and why `.narrow` / `.wide` need
+// nothing but a different inset.
+// Standard is the default style: no container, `on-surface-variant` icon. Every
+// other style is two tokens.
+.icon-button {
+  @include icon-button-size("small");
+
+  --md-comp-icon-button-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-icon-button-container-color: transparent;
+  --md-comp-icon-button-container-shape: 9999px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  height: var(--md-comp-icon-button-container-height);
+  padding-block: 0;
+  padding-inline: var(--md-comp-icon-button-leading-space)
+    var(--md-comp-icon-button-trailing-space);
+  border: none;
+  border-radius: var(--md-comp-icon-button-container-shape);
+  color: var(--md-comp-icon-button-color);
+  background-color: var(--md-comp-icon-button-container-color);
+  text-decoration: none;
+  cursor: pointer;
+  outline: 0;
+  user-select: none;
+  appearance: none;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color .2s ease-out, border-radius .2s ease-out;
+
+  > #{$icon} {
+    flex: 0 0 auto;
+    font-size: var(--md-comp-icon-button-icon-size);
+    width: var(--md-comp-icon-button-icon-size);
+    height: var(--md-comp-icon-button-icon-size);
+    line-height: var(--md-comp-icon-button-icon-size);
+    color: inherit;
+    overflow: hidden;
+  }
+
+  // The state layer is the icon colour mixed into the container, whatever the
+  // style set those two to - `transparent` included, which is how a standard
+  // icon button gets a translucent tint instead of an opaque one.
+  @each $state, $selector in ("hover": "&:hover", "focus": "&:focus", "pressed": "&:active") {
+    #{$selector} {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-icon-button-color) state-opacity($state),
+        var(--md-comp-icon-button-container-color)
+      );
+    }
+  }
+
+  @include focus-visible;
+}
+
+// Styles. Each is the icon colour and the container it sits on; the state
+// layers above follow from those two.
+.icon-button.filled {
+  --md-comp-icon-button-color: var(--md-sys-color-on-primary);
+  --md-comp-icon-button-container-color: var(--md-sys-color-primary);
+}
+
+.icon-button.tonal {
+  --md-comp-icon-button-color: var(--md-sys-color-on-secondary-container);
+  --md-comp-icon-button-container-color: var(--md-sys-color-secondary-container);
+}
+
+// The outline is a border rather than an inset box-shadow so it survives
+// forced-colors mode, and the inset gives the width back — otherwise a 3dp
+// xlarge outline makes a round button 6px wider than it is tall.
+.icon-button.outlined {
+  border: var(--md-comp-icon-button-outline-width) solid var(--md-sys-color-outline-variant);
+  padding-inline: calc(var(--md-comp-icon-button-leading-space) - var(--md-comp-icon-button-outline-width))
+    calc(var(--md-comp-icon-button-trailing-space) - var(--md-comp-icon-button-outline-width));
+}
+
+// Sizes. Default is small (40dp), which is M3's default icon button.
+@each $name in ("xsmall", "medium", "large", "xlarge") {
+  .icon-button.#{$name} {
+    @include icon-button-size($name);
+  }
+}
+
+// Width axis. Narrow and wide only move the inset, so they compose with every
+// size and with the outlined padding above.
+.icon-button.narrow {
+  --md-comp-icon-button-leading-space: var(--md-comp-icon-button-narrow-space);
+  --md-comp-icon-button-trailing-space: var(--md-comp-icon-button-narrow-space);
+}
+
+.icon-button.wide {
+  --md-comp-icon-button-leading-space: var(--md-comp-icon-button-wide-space);
+  --md-comp-icon-button-trailing-space: var(--md-comp-icon-button-wide-space);
+}
+
+// Shape. Round by default, `.square` for the squared container. The pressed
+// shape is the M3 Expressive corner morph, and it has to be written after
+// `.square`: both are one class plus the root, so a tie is decided by order,
+// and a squared button pressed would otherwise keep its resting corner.
+.icon-button.square {
+  --md-comp-icon-button-container-shape: var(--md-comp-icon-button-container-shape-square);
+}
+
+.icon-button:active {
+  border-radius: var(--md-comp-icon-button-pressed-container-shape);
+}
+
+// Disabled. The icon fades to 38% on-surface; a container that exists fades to
+// 10%. Standard and outlined have none, so theirs stays transparent.
+//
+// `aria-disabled="true"` is in the list because an <a> cannot take `disabled`,
+// and it is the attribute that actually tells a screen reader. Note what CSS
+// cannot do for a link: `pointer-events: none` stops the pointer and nothing
+// else, so a disabled-looking <a href> is still reachable by Tab and still
+// navigates on Enter. Drop the `href` (or the link) rather than painting a
+// control that lies about being inert - the docs page says so too.
+.icon-button:is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
+  --md-comp-icon-button-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+
+  pointer-events: none;
+  cursor: default;
+}
+
+.icon-button:is(.filled, .tonal):is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
+  --md-comp-icon-button-container-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
+}

package/src/sass/components/_icons-material-design.scss

@@ -1,18 +1,18 @@
 @use "../abstracts" as *;
 
-// Material Symbols. The framework does not ship the font files — outlined,
-// rounded, and sharp are three separate variable fonts, and pulling all
-// three into the main sheet would dwarf the rest of the CSS. Load the
-// families you use (see the Icons docs). Outlined with every axis:
-//
-//   fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+// Material Symbols. The compiled sheet ships @font-face rules for outlined,
+// rounded, and sharp variable fonts (opsz / wght / FILL / GRAD) plus Roboto
+// and Noto Sans. Browsers only download a family after markup uses it, so
+// rounded and sharp stay cheap until `icon-style` or a family class asks
+// for them. Override $expressive-include-fonts when compiling Sass if the
+// page already loads these families.
 //
 // Style (outlined / rounded / sharp) is the font family, not a variation
 // axis. Switch it with the `icon-style` attribute (same idea as `theme`)
 // or by setting --md-icon-font. Fill, weight, grade, and optical size
 // are axes and inherit as custom properties.
 
-:root {
+:root, :host {
   --md-icon-font-outlined: "Material Symbols Outlined";
   --md-icon-font-rounded: "Material Symbols Rounded";
   --md-icon-font-sharp: "Material Symbols Sharp";
@@ -23,9 +23,12 @@
   --md-icon-optical-size: 24;
 }
 
-[icon-style="outlined"] { --md-icon-font: var(--md-icon-font-outlined); }
-[icon-style="rounded"] { --md-icon-font: var(--md-icon-font-rounded); }
-[icon-style="sharp"] { --md-icon-font: var(--md-icon-font-sharp); }
+[icon-style="outlined"],
+:host([icon-style="outlined"]) { --md-icon-font: var(--md-icon-font-outlined); }
+[icon-style="rounded"],
+:host([icon-style="rounded"]) { --md-icon-font: var(--md-icon-font-rounded); }
+[icon-style="sharp"],
+:host([icon-style="sharp"]) { --md-icon-font: var(--md-icon-font-sharp); }
 
 $_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons";
 
@@ -54,6 +57,15 @@ $_icon: ".material-symbols, .material-symbols-outlined, .material-symbols-rounde
   // Nest so each class in $_icon gets the suffix. `#{$_icon}.tiny` would
   // only attach `.tiny` to the last item and leave every other icon
   // matching the bare `.material-symbols` selector — including `.large`.
+  // Float helpers, moved off the `i` element selector in base/_global so they
+  // survive the canonical <span class="material-symbols"> form.
+  &.left {
+    float: left;
+    margin-left: -8px;
+  }
+  &.right {
+    float: right;
+  }
   &.tiny {
     font-size: 1rem;
     --md-icon-optical-size: 20;

package/src/sass/components/_index.scss

@@ -1,10 +1,19 @@
 // One line per component. Order is cascade order, so keep related widgets
 // together and append new components at the end unless order matters.
 
+// Icons first: it is the base glyph default (font-size, line-height) that a
+// component's own icon rule is meant to override. `$icon` interpolates to an
+// :is() carrying classes, so a component rule ties with the base rule on
+// specificity and the winner is decided by source order alone - with icons
+// loaded 4th, `buttons`, `list` and `badges` silently lost that tie. That is
+// why a button icon rendered as an 18px box around a 24px glyph.
+@forward "icons-material-design";
 @forward "buttons";
+@forward "button-groups";
+@forward "split-button";
+@forward "icon-buttons";
 @forward "list";
 @forward "badges";
-@forward "icons-material-design";
 @forward "navbar";
 @forward "navigation-bar";
 @forward "navigation-rail";
@@ -16,23 +25,30 @@
 @forward "tooltip";
 @forward "menu";
 @forward "dialog";
+@forward "expanding-card";
 @forward "bottom-sheet";
 @forward "side-sheet";
+@forward "floating-sheet";
 @forward "chips";
 @forward "lightbox";
-@forward "parallax";
 @forward "docked-display";
 @forward "page-footer";
 @forward "forms";
 @forward "table_of_contents";
 @forward "scrollspy";
-@forward "sidenav";
-@forward "preloader";
-@forward "slider";
+@forward "navigation-drawer";
+@forward "progress";
 @forward "carousel";
-@forward "pulse";
 @forward "datepicker";
 @forward "timepicker";
 @forward "breadcrumb";
 @forward "pagination";
 @forward "panes";
+@forward "fab-menu";
+@forward "loading-indicator";
+@forward "search";
+@forward "segmented-buttons";
+@forward "banners";
+@forward "drag-handle";
+@forward "bottom-app-bar";
+@forward "scrim";