@expressivecss/expressive 0.1.0-alpha.3 → 0.1.0

package/src/sass/tokens/_index.scss

@@ -0,0 +1,4 @@
+// Material Design 3 design tokens. Emits :root custom properties only.
+
+@forward "reference";  // raw ramps + resolved light/dark pairs
+@forward "theme";      // maps the pairs onto the live --md-sys-color-* names

package/src/sass/tokens/_reference.scss

@@ -0,0 +1,265 @@
+@use "sass:map";
+
+// Material Design 3 reference palette.
+//
+// Five of the six ramps are DERIVED from --md-source at runtime with relative
+// color syntax, rather than pasted out of the Material Theme Builder. Change
+// --md-source and the whole theme follows, with no rebuild.
+//
+// The tone -> lightness table below is the part that makes this work, and the
+// reason the obvious version of this idea fails. M3 "tone" is CIELAB L*:
+// tone 40 means L* 40. OKLCH lightness is a different scale - the same color
+// sits at OKLCH L 48.1%. So `oklch(40% c h)` does NOT give you M3 tone 40; it
+// drifts a mean dEok of 0.063 (max 0.147) from the real ramps, several times
+// the ~0.02 just-noticeable difference, turning #006495 into #004d74.
+//
+// Mapping tone -> OKLCH L through the table instead brings that to a mean of
+// 0.0026 and a max of 0.0069 - imperceptible. The table is shared by every
+// ramp because the mapping turns out to be near enough hue-independent (at
+// tone 40 the five ramps land within 48.0-48.8%).
+//
+// tests/color-drift.test.js recomputes every generated value and fails if it
+// moves more than DRIFT_BUDGET from the checked-in Material Theme Builder
+// reference, so this cannot regress silently. That test validates the formula
+// against #006495, the one source there is ground truth for - $md-source below
+// is a branding choice and is free to change without failing it.
+
+// The seed every generated ramp derives from. Chosen for a restaurant POS: the
+// error ramp is pinned at hue 27.7deg and both primary and tertiary (source
+// +62deg) derive from this, so the seed has to keep both clear of red. Warm
+// "appetising" hues (0-60deg) are disqualified outright - they put primary on
+// top of error, dEok 0.07-0.12 against ~0.28 here.
+//
+// Teal wins on *worst case* across both schemes rather than on either one
+// alone, which is the metric that matters: evening service runs dark mode in a
+// dim room, and that is where a confirm/void mix-up actually happens.
+//   light  primary40 vs error40  dEok 0.278
+//   dark   primary80 vs error80  dEok 0.212   <- best of the candidates
+//   light  tertiary40 vs error40 dEok 0.224
+// It also leaves green free for the "settled/paid" role a POS will want and
+// Material does not supply.
+$md-source: #006A79 !default;
+
+// tone -> OKLCH lightness. Fitted against the reference ramps; see the test.
+$tones: (
+  0: 0%, 10: 22.37%, 20: 30.99%, 25: 35.26%, 30: 39.48%, 35: 43.79%,
+  40: 48.14%, 50: 56.83%, 60: 65.42%, 70: 74.04%, 80: 82.63%, 90: 91.33%,
+  95: 95.62%, 98: 98.25%, 99: 99.19%, 100: 100%
+) !default;
+
+// Per-ramp hue offset from the source hue, and target chroma. Chroma is a
+// fixed per-role value, not taken from the source - that is M3's model, and it
+// means a desaturated brand color still yields a usable primary ramp. Where
+// the target exceeds the sRGB gamut the browser gamut-maps by reducing chroma,
+// which is what the reference ramps did too.
+//
+// These were fitted to minimise the WORST entry in each ramp, not the average.
+// Fitting the average is the tempting mistake: it buys a better headline number
+// while letting one tone sit near the budget, which is exactly the entry a
+// future edit would push over.
+//
+// neutral's hue offset is unconstrained noise - at chroma 0.004 the hue is not
+// visually meaningful, and anything from 0 to 360 scores about the same.
+$ramps: (
+  "primary":         ("hue":  1,  "chroma": 0.123),
+  "secondary":       ("hue":  5,  "chroma": 0.030),
+  "tertiary":        ("hue": 62,  "chroma": 0.058),
+  "neutral":         ("hue": 17,  "chroma": 0.004),
+  "neutral-variant": ("hue":  9,  "chroma": 0.013)
+) !default;
+
+// Which ramp entry each system color resolves to, per scheme.
+$sys-light: (
+  "primary": "primary40", "on-primary": "primary100",
+  "primary-container": "primary90", "on-primary-container": "primary10",
+  "secondary": "secondary40", "on-secondary": "secondary100",
+  "secondary-container": "secondary90", "on-secondary-container": "secondary10",
+  "tertiary": "tertiary40", "on-tertiary": "tertiary100",
+  "tertiary-container": "tertiary90", "on-tertiary-container": "tertiary10",
+  "error": "error40", "on-error": "error100",
+  "error-container": "error90", "on-error-container": "error10",
+  "background": "neutral99", "on-background": "neutral10",
+  "surface": "neutral99", "on-surface": "neutral10",
+  "surface-variant": "neutral-variant90", "on-surface-variant": "neutral-variant30",
+  "outline": "neutral-variant50", "outline-variant": "neutral-variant80",
+  "inverse-surface": "neutral20", "inverse-on-surface": "neutral95",
+  "inverse-primary": "primary80", "surface-tint": "primary40",
+  "shadow": "neutral0", "scrim": "neutral0"
+) !default;
+
+$sys-dark: (
+  "primary": "primary80", "on-primary": "primary20",
+  "primary-container": "primary30", "on-primary-container": "primary90",
+  "secondary": "secondary80", "on-secondary": "secondary20",
+  "secondary-container": "secondary30", "on-secondary-container": "secondary90",
+  "tertiary": "tertiary80", "on-tertiary": "tertiary20",
+  "tertiary-container": "tertiary30", "on-tertiary-container": "tertiary90",
+  "error": "error80", "on-error": "error20",
+  "error-container": "error30", "on-error-container": "error90",
+  "background": "neutral10", "on-background": "neutral90",
+  "surface": "neutral10", "on-surface": "neutral90",
+  "surface-variant": "neutral-variant30", "on-surface-variant": "neutral-variant80",
+  "outline": "neutral-variant60", "outline-variant": "neutral-variant30",
+  "inverse-surface": "neutral90", "inverse-on-surface": "neutral10",
+  "inverse-primary": "primary40", "surface-tint": "primary80",
+  "shadow": "neutral0", "scrim": "neutral0"
+) !default;
+
+:root {
+  --md-source: #{$md-source};
+
+  /* primary, secondary, tertiary, neutral, neutral-variant - all generated */
+  @each $name, $cfg in $ramps {
+    $off: map.get($cfg, "hue");
+    @each $tone, $l in $tones {
+      // Tones 0 and 100 are pure black and white in every M3 ramp.
+      $c: map.get($cfg, "chroma");
+      @if $tone == 0 or $tone == 100 { $c: 0; }
+
+      @if $off == 0 {
+        --md-ref-palette-#{$name}#{$tone}: oklch(from var(--md-source) #{$l} #{$c} h);
+      } @else {
+        --md-ref-palette-#{$name}#{$tone}: oklch(from var(--md-source) #{$l} #{$c} calc(h + #{$off}));
+      }
+    }
+  }
+
+  /* error - deliberately NOT generated.
+     M3 fixes the error hue rather than deriving it: "this went wrong" should
+     not rebrand when someone changes their brand color. It is also the ramp
+     where OKLab and CIELAB lightness diverge most (it carries the highest
+     chroma), so generating it was the only one to exceed the JND - 0.027
+     against 0.008 for everything else. Both reasons point the same way. */
+  --md-ref-palette-error0: #000000;
+  --md-ref-palette-error10: #410002;
+  --md-ref-palette-error20: #690005;
+  --md-ref-palette-error25: #7e0007;
+  --md-ref-palette-error30: #93000a;
+  --md-ref-palette-error35: #a80710;
+  --md-ref-palette-error40: #ba1a1a;
+  --md-ref-palette-error50: #de3730;
+  --md-ref-palette-error60: #ff5449;
+  --md-ref-palette-error70: #ff897d;
+  --md-ref-palette-error80: #ffb4ab;
+  --md-ref-palette-error90: #ffdad6;
+  --md-ref-palette-error95: #ffedea;
+  --md-ref-palette-error98: #fff8f7;
+  --md-ref-palette-error99: #fffbff;
+  --md-ref-palette-error100: #ffffff;
+
+  /* light scheme */
+  @each $role, $ref in $sys-light {
+    --md-sys-color-#{$role}-light: var(--md-ref-palette-#{$ref});
+  }
+
+  /* dark scheme */
+  @each $role, $ref in $sys-dark {
+    --md-sys-color-#{$role}-dark: var(--md-ref-palette-#{$ref});
+  }
+
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-weight: 400;
+  --md-sys-typescale-display-large-font-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-weight: 400;
+  --md-sys-typescale-display-medium-font-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-weight: 400;
+  --md-sys-typescale-display-small-font-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-weight: 400;
+  --md-sys-typescale-headline-large-font-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-weight: 400;
+  --md-sys-typescale-headline-medium-font-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-weight: 400;
+  --md-sys-typescale-headline-small-font-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-weight: 400;
+  --md-sys-typescale-body-large-font-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-weight: 400;
+  --md-sys-typescale-body-medium-font-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-weight: 400;
+  --md-sys-typescale-body-small-font-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Medium;
+  --md-sys-typescale-label-large-font-weight: 500;
+  --md-sys-typescale-label-large-font-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Medium;
+  --md-sys-typescale-label-medium-font-weight: 500;
+  --md-sys-typescale-label-medium-font-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Medium;
+  --md-sys-typescale-label-small-font-weight: 500;
+  --md-sys-typescale-label-small-font-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+}

package/src/sass/tokens/_theme.scss

@@ -0,0 +1,49 @@
+// Maps the resolved pairs from tokens/_reference.scss onto the live
+// --md-sys-color-* names that the rest of the framework consumes.
+//
+// This file used to spell out all 30 tokens four times - once for the light
+// default, once inside @media (prefers-color-scheme: dark), and once for each
+// of :root[theme='light'] / [theme='dark'] - because a custom property can
+// only hold one value per selector. light-dark() holds both, so the mapping is
+// written once and the two theme selectors only have to set color-scheme.
+//
+// Why that works: light-dark() resolves at computed-value time against the
+// element's used color-scheme. Inside a custom property it survives
+// substitution and resolves at the point of *use*, not the point of
+// declaration - so setting color-scheme anywhere re-resolves every token
+// below it. That is what makes a dark card on a light page possible; it also
+// means color-scheme is now load-bearing, not decorative.
+//
+// The --md-sys-color-*-light / -dark pairs are deliberately left in place.
+// They are the documented way to re-theme the framework (see the docs' Themes
+// page) and several components reference them directly.
+
+$sys-color-roles: (
+  "primary", "on-primary", "primary-container", "on-primary-container",
+  "secondary", "on-secondary", "secondary-container", "on-secondary-container",
+  "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container",
+  "error", "on-error", "error-container", "on-error-container",
+  "outline", "outline-variant",
+  "background", "on-background",
+  "surface", "on-surface", "surface-variant", "on-surface-variant",
+  "inverse-surface", "inverse-on-surface", "inverse-primary",
+  "shadow", "surface-tint", "scrim"
+) !default;
+
+:root, :host {
+  // `light dark` means: follow the OS unless an ancestor says otherwise.
+  color-scheme: light dark;
+
+  @each $role in $sys-color-roles {
+    --md-sys-color-#{$role}: light-dark(
+      var(--md-sys-color-#{$role}-light),
+      var(--md-sys-color-#{$role}-dark)
+    );
+  }
+}
+
+/* ===================================================================== Themes */
+
+// Opting out of the OS preference. Every token above re-resolves from these.
+:root[theme='light'] { color-scheme: light; }
+:root[theme='dark'] { color-scheme: dark; }

package/src/{scss → sass}/utilities/_helpers.scss

@@ -1,31 +1,15 @@
+// Small single-purpose classes a page author applies deliberately.
+//
+// Anything here must be one job, one class, and independent of any component.
+// If a rule only exists to support one widget, it belongs to that component's
+// partial instead.
+
 // Positioning
 .valign-wrapper { display: flex; align-items: center; }
 
 .clearfix { clear: both; }
 
-// Dividers
-.divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: var(--md-sys-color-outline-variant);
-}
-
-// Pushpin
-.pin-top, .pin-bottom {
-  position: relative;
-}
-
-.pinned {
-  position: fixed !important;
-}
-
-/*******************
-  Utility Classes
-*******************/
-
-.hide { display: none !important; }
-
-// Text Align
+// Text alignment
 .left-align { text-align: left; }
 .right-align { text-align: right }
 .center, .center-align { text-align: center; }
@@ -34,17 +18,36 @@
 .left { float: left !important; }
 .right { float: right !important; }
 
-// No Text Select
+// Dividers
+.divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+// Shape and text behaviour
 .no-select { user-select: none; }
 .circle { border-radius: 50%; }
 .center-block { display: block; margin-left: auto; margin-right: auto; }
 .truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .no-padding { padding: 0 !important; }
 
-// Docked display
-.display-docked {
-  position: absolute;
-  opacity: 0;
-  z-index: 9999;
-  visibility: hidden;
+// Responsive media
+img.responsive-img,
+video.responsive-video {
+  max-width: 100%;
+  height: auto;
+}
+
+.video-container {
+  position: relative;
+  aspect-ratio: 16 / 9;   // was padding-bottom: 56.25% + height: 0
+  overflow: hidden;
+
+  iframe, object, embed {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
 }

package/src/sass/utilities/_index.scss

@@ -0,0 +1,8 @@
+// Single-purpose helper classes.
+
+@forward "colors";           // .primary, .on-surface-text, ... (token-driven)
+@forward "typescale";        // .display-large, .body-medium, ...
+@forward "z-depth";          // .z-depth-0 ... .z-depth-5, .hoverable
+@forward "spacing";          // .m-3, .pt-2, .px-4, ...
+@forward "visibility";       // .hide, .hide-on-med-and-down, .show-on-large, ...
+@forward "helpers";          // alignment, floats, truncate, responsive media

package/src/{scss → sass}/utilities/_spacing.scss

@@ -1,6 +1,7 @@
-/**************************
-  Utility Spacing Classes
-**************************/
+// Margin and padding scale: .m-3, .pt-2, .px-4, .my-auto, ...
+//
+// Shortcut x value x direction, all !important so a helper wins over the
+// component it is applied to. Edit the maps here to change the scale.
 
 $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
 $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;

package/src/sass/utilities/_typescale.scss

@@ -0,0 +1,45 @@
+@use "../abstracts" as *;
+
+// M3 typescale helper classes, generated from the tokens in tokens/_reference.scss.
+//
+// Every property here must correspond to a token that file actually defines -
+// a var() pointing at an undefined custom property makes the whole
+// declaration invalid at computed-value time.
+//
+// Deliberately not set:
+//   font-style  - the -font-family-style token holds "Regular" / "Medium",
+//                 which describe weight, not a CSS font-style keyword.
+//
+// Semantic elements already consume these roles (see base/_typography.scss).
+// Use a class when the HTML cannot carry the role (a <p> that should display,
+// a <span> used as a label).
+
+$typescale-roles: (
+  "display-large", "display-medium", "display-small",
+  "headline-large", "headline-medium", "headline-small",
+  "body-large", "body-medium", "body-small",
+  "label-large", "label-medium", "label-small",
+  "title-large", "title-medium", "title-small"
+) !default;
+
+@each $role in $typescale-roles {
+  .#{$role} {
+    @include typescale($role);
+  }
+}
+
+// Emphasis and case. One job each, independent of the type role.
+.italic { font-style: italic; }
+.bold { font-weight: 500; }
+.light { font-weight: 300; }
+.thin { font-weight: 200; }
+.underline { text-decoration: underline; }
+.overline { text-decoration: overline; }
+.upper { text-transform: uppercase; }
+.lower { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+
+// Body-size aliases when the element is not a <p> / <small>.
+.large-text { @include typescale("body-large"); }
+.medium-text { @include typescale("body-medium"); }
+.small-text { @include typescale("body-small"); }

package/src/sass/utilities/_visibility.scss

@@ -0,0 +1,63 @@
+@use "../abstracts" as *;
+
+// Showing and hiding, globally and per breakpoint.
+// Breakpoint strings ($small-and-down, ...) come from abstracts/_variables.scss.
+
+.hide { display: none !important; }
+
+.hide-on-small-only, .hide-on-small-and-down {
+  @include bp-down("small") { display: none !important; }
+}
+
+.hide-on-med-and-down {
+  @include bp-down("large") { display: none !important; }
+}
+
+.hide-on-med-and-up {
+  @include bp-up("small") { display: none !important; }
+}
+
+.hide-on-med-only {
+  @include bp-between("small", "large") {
+    display: none !important;
+  }
+}
+
+.hide-on-large-only {
+  @include bp-up("large") { display: none !important; }
+}
+
+.hide-on-extra-large-only {
+  @include bp-up("xlarge") { display: none !important; }
+}
+
+.show-on-extra-large {
+  @include bp-up("xlarge") { display: block !important; }
+}
+
+.show-on-large {
+  @include bp-up("large") { display: block !important; }
+}
+
+.show-on-medium {
+  @include bp-between("small", "large") {
+    display: block !important;
+  }
+}
+
+.show-on-small {
+  @include bp-down("small") { display: block !important; }
+}
+
+.show-on-medium-and-up {
+  @include bp-up("small") { display: block !important; }
+}
+
+.show-on-medium-and-down {
+  @include bp-down("large") { display: block !important; }
+}
+
+// Center text on mobile
+.center-on-small-only {
+  @include bp-down("small") { text-align: center; }
+}

package/src/sass/utilities/_z-depth.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use "../abstracts" as *;
+
+// The .z-depth-N classes, generated from the shadow map in
+// abstracts/_elevation.scss so the classes and the z-depth() mixin cannot drift.
+
+@each $level in map.keys($elevations) {
+  .z-depth-#{$level} {
+    @include z-depth($level);
+  }
+}
+
+.hoverable {
+  transition: box-shadow 0.25s;
+  &:hover {
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+}

package/dist/js/components/index.d.ts

@@ -1,21 +0,0 @@
-export { Autocomplete, AutocompleteOptions } from './autocomplete';
-export { FloatingActionButton, FloatingActionButtonOptions } from './buttons';
-export { Cards, CardsOptions } from './cards';
-export { Carousel, CarouselOptions } from './carousel';
-export { Chips, ChipsOptions } from './chips';
-export { Collapsible, CollapsibleOptions } from './collapsible';
-export { Datepicker, DatepickerOptions } from './datepicker';
-export { Dropdown, DropdownOptions } from './dropdown';
-export { Materialbox, MaterialboxOptions } from './materialbox';
-export { Modal, ModalOptions } from './modal';
-export { Parallax, ParallaxOptions } from './parallax';
-export { Pushpin, PushpinOptions } from './pushpin';
-export { ScrollSpy, ScrollSpyOptions } from './scrollspy';
-export { Sidenav, SidenavOptions } from './sidenav';
-export { Slider, SliderOptions } from './slider';
-export { Tabs, TabsOptions } from './tabs';
-export { TapTarget, TapTargetOptions } from './tap-target';
-export { Timepicker, TimepickerOptions } from './timepicker';
-export { Toast, ToastOptions } from './toast';
-export { Tooltip, TooltipOptions } from './tooltip';
-export { Waves } from './waves';

package/dist/js/forms/index.d.ts

@@ -1,4 +0,0 @@
-export { CharacterCounter } from './character-counter';
-export { Forms } from './forms';
-export { Range, RangeOptions } from './range';
-export { FormSelect, FormSelectOptions } from './select';

package/dist/js/foundation/index.d.ts

@@ -1,2 +0,0 @@
-export { Component, BaseOptions, MElement, InitElements, I18nOptions, Openable } from './component';
-export { Utils, Edges, Bounding } from './utils';

package/dist/js/index.d.ts

@@ -1,52 +0,0 @@
-import { AutocompleteOptions, FloatingActionButtonOptions, CardsOptions, CarouselOptions, ChipsOptions, CollapsibleOptions, DatepickerOptions, DropdownOptions, MaterialboxOptions, ModalOptions, ParallaxOptions, PushpinOptions, ScrollSpyOptions, SidenavOptions, TabsOptions, TapTargetOptions, TimepickerOptions, TooltipOptions } from './components';
-import { FormSelectOptions } from './forms';
-export { Autocomplete } from './components';
-export { FloatingActionButton } from './components';
-export { Cards } from './components';
-export { Carousel } from './components';
-export { Chips } from './components';
-export { Collapsible } from './components';
-export { Datepicker } from './components';
-export { Dropdown } from './components';
-export { Materialbox } from './components';
-export { Modal } from './components';
-export { Parallax } from './components';
-export { Pushpin } from './components';
-export { ScrollSpy } from './components';
-export { Sidenav } from './components';
-export { Slider } from './components';
-export { Tabs } from './components';
-export { TapTarget } from './components';
-export { Timepicker } from './components';
-export { Toast } from './components';
-export { Tooltip } from './components';
-export { Waves } from './components';
-export { CharacterCounter, Forms, Range, FormSelect } from './forms';
-export declare const version = "2.2.2";
-export interface AutoInitOptions {
-    Autocomplete?: Partial<AutocompleteOptions>;
-    Cards?: Partial<CardsOptions>;
-    Carousel?: Partial<CarouselOptions>;
-    Chips?: Partial<ChipsOptions>;
-    Collapsible?: Partial<CollapsibleOptions>;
-    Datepicker?: Partial<DatepickerOptions>;
-    Dropdown?: Partial<DropdownOptions>;
-    Materialbox?: Partial<MaterialboxOptions>;
-    Modal?: Partial<ModalOptions>;
-    Parallax?: Partial<ParallaxOptions>;
-    Pushpin?: Partial<PushpinOptions>;
-    ScrollSpy?: Partial<ScrollSpyOptions>;
-    FormSelect?: Partial<FormSelectOptions>;
-    Sidenav?: Partial<SidenavOptions>;
-    Tabs?: Partial<TabsOptions>;
-    TapTarget?: Partial<TapTargetOptions>;
-    Timepicker?: Partial<TimepickerOptions>;
-    Tooltip?: Partial<TooltipOptions>;
-    FloatingActionButton?: Partial<FloatingActionButtonOptions>;
-}
-/**
- * Automatically initialize components.
- * @param context Root element to initialize. Defaults to `document.body`.
- * @param options Options for each component.
- */
-export declare function AutoInit(context?: HTMLElement, options?: Partial<AutoInitOptions>): void;

package/dist/js/plugins/index.d.ts

@@ -1 +0,0 @@
-export { DockedDisplayPlugin, DockedDisplayPluginOptions } from './docked-display';