@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/tokens/_state.scss

@@ -0,0 +1,24 @@
+// Material Design 3 state layer opacities.
+//
+// A state layer is the translucent overlay a component paints over itself to
+// show hover, focus, pressed or dragged. M3 replaced the ripple with it, which
+// is why this is a foundation and not a component: no author writes markup for
+// it, components put it behind themselves.
+//
+// Values are md.sys.state.* from DSP 34.0.21, verified against
+// material-web/tokens/versions/latest/sass/_md-sys-state.scss. Note focus and
+// pressed are 0.1, not the 0.12 quoted in some secondary sources.
+//
+// Two shapes consume these. An overlay pseudo-element uses the number as an
+// `opacity` directly; a ring drawn with `color-mix()` needs a percentage, so it
+// multiplies by 100% - see the `state-layer-ring` mixin in abstracts.
+
+@use "../abstracts" as *;
+
+:root,
+:host {
+  --md-sys-state-hover-state-layer-opacity: 0.08;
+  --md-sys-state-focus-state-layer-opacity: 0.1;
+  --md-sys-state-pressed-state-layer-opacity: 0.1;
+  --md-sys-state-dragged-state-layer-opacity: 0.16;
+}

package/src/sass/tokens/_theme.scss

@@ -36,6 +36,9 @@
 
 // Opting out of the OS preference. Every token above re-resolves from these.
 // `auto` is the explicit follow-OS value — same as omitting the attribute.
-:root[theme='light'] { color-scheme: light; }
-:root[theme='dark'] { color-scheme: dark; }
-:root[theme='auto'] { color-scheme: light dark; }
+:root[theme='light'],
+:host([theme='light']) { color-scheme: light; }
+:root[theme='dark'],
+:host([theme='dark']) { color-scheme: dark; }
+:root[theme='auto'],
+:host([theme='auto']) { color-scheme: light dark; }

package/src/sass/tokens/_vibrant.scss

@@ -0,0 +1,76 @@
+@use "sass:list";
+@use "sass:string";
+@use "../abstracts" as *;
+
+// Vibrant emphasis (M3 Expressive).
+//
+// Vibrant is not a component variant. It is a surface *emphasis*: the same
+// component, drawn on an accent container instead of a neutral surface. M3
+// ships it as a parallel token set per component - md.comp.menus-vibrant,
+// md.comp.toolbar-vibrant, VibrantTimePickerDialog in Compose - which means
+// every component that gains the axis restates the same mappings and every one
+// of them can drift. Here it is one subtree remap of the surface family, so a
+// component needs no vibrant code at all to sit on a vibrant surface.
+//
+// The mechanism is the one tokens/_theme.scss already relies on: a custom
+// property redeclared on an element is inherited by everything under it, and a
+// light-dark() token substituted into it stays unresolved until it is *used*.
+// So [vibrant] follows a runtime theme switch for free - it points at the live
+// --md-sys-color-* roles, not at the -light / -dark pair behind them.
+//
+// What is deliberately NOT remapped, because a vibrant surface is a surface
+// change and nothing else:
+//
+//   accent roles     primary, secondary, tertiary and their containers keep
+//                    their values, which is what lets a filled button still
+//                    stand out on a vibrant panel. It is also the constraint
+//                    that keeps this to one ramp: tertiary is what M3 uses for
+//                    the axis, and pointing the surfaces at primary or
+//                    secondary instead would erase every component whose own
+//                    fill is that container - a tonal button, a FAB, and
+//                    .toolbar.vibrant itself. An author who wants a different
+//                    ramp sets --md-sys-color-surface* on their own wrapper,
+//                    the way the Themes page already shows for any token.
+//   outline roles    neutral-variant in M3, not an opacity of the text color.
+//                    Deriving them from on-*-container turns every checkbox,
+//                    radio and switch border inside the subtree translucent.
+//   surface-tint     an accent despite the name - it is the elevation tint.
+//   inverse-*, scrim they exist to contrast with the page, not to follow it.
+//
+// The elevation ladder does collapse: every surface-container rung resolves to
+// the one container color, because that is what a vibrant surface is in M3 and
+// inventing intermediate tints would put five numbers in the framework that the
+// spec does not have. on-surface-variant collapses onto on-surface for the same
+// reason - the container has one text color. The consequence of both is that
+// nesting surfaces inside a vibrant subtree stops distinguishing them, so put
+// [vibrant] on the component you want emphasized, not on the page.
+//
+// A component that carries its own .vibrant class - Menu, Toolbar - is
+// unaffected inside a vibrant subtree: those rules are in the components layer
+// and beat this one, so each keeps the colors its own M3 token set gives it.
+
+// Every surface role, derived rather than restated: a rung added to
+// $sys-color-roles and forgotten here would keep its neutral value and sit as a
+// grey patch on an accent one. `on-` and `inverse-surface` are excluded by the
+// prefix test; surface-tint by name, per the note above.
+$_vibrant-surfaces: ();
+@each $role in $sys-color-roles {
+  @if $role == "background" or
+      (string.index($role, "surface") == 1 and $role != "surface-tint") {
+    $_vibrant-surfaces: list.append($_vibrant-surfaces, $role);
+  }
+}
+
+// :host([vibrant]) for the same reason tokens/_theme.scss carries :host - a
+// sheet loaded inside a shadow root cannot reach its own host with a descendant
+// selector, so <my-panel vibrant> would leave the whole shadow tree neutral.
+[vibrant],
+:host([vibrant]) {
+  @each $role in $_vibrant-surfaces {
+    --md-sys-color-#{$role}: var(--md-sys-color-tertiary-container);
+  }
+
+  --md-sys-color-on-surface: var(--md-sys-color-on-tertiary-container);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-tertiary-container);
+  --md-sys-color-on-background: var(--md-sys-color-on-tertiary-container);
+}

package/src/sass/utilities/_colors.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "../abstracts" as *;
 
 // One fill class and one `-text` foreground class per color role.
@@ -5,8 +6,20 @@
 // token layer. Pair a fill with its `on-*` text class — container
 // roles are fills, not text; `on-*` roles are text/icons, not fills.
 
+// Three fills step aside for the components that name those same roles as
+// their own colour axis, the way `.circle` steps aside for the FAB's corner
+// in `_helpers`. Utilities win by layer, not by weight, so a role class on
+// one of these would repaint the container and leave the label colour and
+// both state layers - which are mixed from the same role - behind. On the FAB
+// menu it is worse than a miss: the class sits on the host, which is a bare
+// 56px box behind a round FAB, so the fill lands as a square. Only those
+// three roles: a role no component names has nothing to lose and keeps its
+// fill everywhere.
+$_role-named: "primary-container", "secondary-container", "tertiary-container";
+$_role-named-hosts: ":not(.extend):not(.fab-menu)";
+
 @each $role in $sys-color-roles {
-  .#{$role} {
+  #{if(list.index($_role-named, $role), ".#{$role}#{$_role-named-hosts}", ".#{$role}")} {
     background-color: var(--md-sys-color-#{$role});
   }
 

package/src/sass/utilities/_helpers.scss

@@ -12,10 +12,6 @@
 .right-align { text-align: right }
 .center-align { text-align: center; }
 
-// TODO: Remove this
-.left { float: left !important; }
-.right { float: right !important; }
-
 // Dividers
 .divider {
   height: 1px;
@@ -25,7 +21,11 @@
 
 // Shape and text behaviour
 .no-select { user-select: none; }
-.circle { border-radius: 50%; }
+// A FAB is `circle extra` / `circle large`, and its container shape is
+// 16dp rounded corners, not a full round - so the utility skips it. Layer
+// order puts utilities after components, which is why the exclusion has to
+// live here: no selector in `components` can outrank this one.
+.circle:not(.extra, .large) { 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; }

package/src/sass/utilities/_visibility.scss

@@ -1,71 +1,93 @@
 @use "../abstracts" as *;
 
-// Showing and hiding, globally and per breakpoint.
-// Queries come from bp-up / bp-down / bp-between in abstracts/_breakpoints.scss.
+// Showing and hiding by the exact M3 window size classes.
+// The Materialize-era small/med/xxl names remain aliases for compatibility.
 
 .hide { display: none !important; }
 
-.hide-on-small-only {
-  @include bp-down("small") { display: none !important; }
+.hide-on-compact-only,
+.hide-on-small-only,
+.hide-on-small-and-down {
+  @include bp-down("medium") { display: none !important; }
 }
 
 .hide-on-med-and-down {
-  @include bp-down("large") { display: none !important; }
+  @include bp-down("expanded") { display: none !important; }
 }
 
 .hide-on-med-and-up {
-  @include bp-up("small") { display: none !important; }
+  @include bp-up("medium") { display: none !important; }
 }
 
+.hide-on-medium-only,
 .hide-on-med-only {
-  @include bp-between("small", "large") {
+  @include bp-between("medium", "expanded") {
     display: none !important;
   }
 }
 
-.hide-on-large-only {
-  @include bp-up("large") { display: none !important; }
+.hide-on-expanded-only {
+  @include bp-between("expanded", "large") {
+    display: none !important;
+  }
 }
 
-.hide-on-extra-large-only {
-  @include bp-up("xlarge") { display: none !important; }
+.hide-on-expanded-and-up {
+  @include bp-up("expanded") { display: none !important; }
 }
 
+.hide-on-large-only {
+  @include bp-between("large", "extra-large") {
+    display: none !important;
+  }
+}
+
+.hide-on-extra-large-only,
 .hide-on-xxl-only {
-  @include bp-up("xxlarge") { display: none !important; }
+  @include bp-up("extra-large") { display: none !important; }
 }
 
-.show-on-extra-large {
-  @include bp-up("xlarge") { display: block !important; }
+.show-on-compact,
+.show-on-small {
+  @include bp-down("medium") { display: block !important; }
 }
 
-.show-on-xxl {
-  @include bp-up("xxlarge") { display: block !important; }
+.show-on-medium {
+  @include bp-between("medium", "expanded") {
+    display: block !important;
+  }
 }
 
-.show-on-large {
-  @include bp-up("large") { display: block !important; }
+.show-on-expanded {
+  @include bp-between("expanded", "large") {
+    display: block !important;
+  }
 }
 
-.show-on-medium {
-  @include bp-between("small", "large") {
+.show-on-expanded-and-up {
+  @include bp-up("expanded") { display: block !important; }
+}
+
+.show-on-large {
+  @include bp-between("large", "extra-large") {
     display: block !important;
   }
 }
 
-.show-on-small {
-  @include bp-down("small") { display: block !important; }
+.show-on-extra-large,
+.show-on-xxl {
+  @include bp-up("extra-large") { display: block !important; }
 }
 
 .show-on-medium-and-up {
-  @include bp-up("small") { display: block !important; }
+  @include bp-up("medium") { display: block !important; }
 }
 
 .show-on-medium-and-down {
-  @include bp-down("large") { display: block !important; }
+  @include bp-down("expanded") { display: block !important; }
 }
 
-// Center text on mobile
+// Center text on Compact windows.
 .center-on-small-only {
-  @include bp-down("small") { text-align: center; }
+  @include bp-down("medium") { text-align: center; }
 }

package/dist/types/behaviors/waves.d.ts

@@ -1,15 +0,0 @@
-type RGBColor = {
-    r: number;
-    g: number;
-    b: number;
-};
-type Position = {
-    x: number;
-    y: number;
-};
-export declare class Waves {
-    private static _offset;
-    static renderWaveEffect(targetElement: HTMLElement, position?: Position | null, color?: RGBColor | null): void;
-    static Init(): void;
-}
-export {};

package/dist/types/components/parallax.d.ts

@@ -1,16 +0,0 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
-export interface ParallaxOptions extends BaseOptions {
-}
-/**
- * Parallax. The effect is CSS (see components/_parallax.scss). This class
- * exists so AutoInit / getInstance / destroy keep working; it does not
- * attach scroll or resize listeners.
- */
-export declare class Parallax extends Component<ParallaxOptions> {
-    constructor(el: HTMLElement, options: Partial<ParallaxOptions>);
-    static get defaults(): ParallaxOptions;
-    static init(el: HTMLElement, options?: Partial<ParallaxOptions>): Parallax;
-    static init(els: InitElements<InitElement>, options?: Partial<ParallaxOptions>): Parallax[];
-    static getInstance(el: HTMLElement): Parallax;
-    destroy(): void;
-}

package/dist/types/components/range.d.ts

@@ -1,43 +0,0 @@
-import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
-export interface RangeOptions extends BaseOptions {
-}
-export declare class Range extends Component<RangeOptions> {
-    el: HTMLInputElement;
-    private _mousedown;
-    value: HTMLElement;
-    thumb: HTMLElement;
-    constructor(el: HTMLInputElement, options: Partial<RangeOptions>);
-    static get defaults(): RangeOptions;
-    /**
-     * Initializes instance of Range.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLInputElement, options?: Partial<RangeOptions>): Range;
-    /**
-     * Initializes instances of Range.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<RangeOptions>): Range[];
-    static getInstance(el: HTMLInputElement): Range;
-    destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleRangeChange: () => void;
-    _handleRangeMousedownTouchstart: (e: MouseEvent | TouchEvent) => void;
-    _handleRangeInputMousemoveTouchmove: () => void;
-    _handleRangeMouseupTouchend: () => void;
-    _handleRangeBlurMouseoutTouchleave: () => void;
-    _setupThumb(): void;
-    _removeThumb(): void;
-    _isVertical(): boolean;
-    _host(): HTMLElement | null;
-    _clampDual(): void;
-    _fraction(el: HTMLInputElement): number;
-    _sync(): void;
-    /**
-     * Initializes every range input in the current document.
-     */
-    static Init(): void;
-}

package/dist/types/core/bounding.d.ts

@@ -1,6 +0,0 @@
-export declare class Bounding {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-}

package/dist/types/core/edges.d.ts

@@ -1,6 +0,0 @@
-export declare class Edges {
-    top: boolean;
-    right: boolean;
-    bottom: boolean;
-    left: boolean;
-}

package/src/sass/components/_parallax.scss

@@ -1,104 +0,0 @@
-@use "../abstracts" as *;
-
-// Parallax. Anatomy is the HTML: a .parallax (or <figure class="parallax">)
-// clips an <img>, <picture>, or <video>. A heading / <p> / <figcaption> is
-// the overlay.
-//
-// Motion is CSS. A named view timeline on the clip drives the image; without
-// animation-timeline the image is just object-fit: cover. JS does not scroll.
-//
-// Tokens:
-//   --md-comp-parallax-height   visible window (500px)
-//   --md-comp-parallax-travel   how far the image moves (64px)
-//   --md-comp-parallax-shape    12px, same as media / lightbox / slider
-
-.parallax {
-  --md-comp-parallax-height: 500px;
-  --md-comp-parallax-travel: 120px;
-  --md-comp-parallax-shape: 12px;
-
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  box-sizing: border-box;
-  height: var(--md-comp-parallax-height);
-  margin: 0;
-  border-radius: var(--md-comp-parallax-shape);
-  view-timeline-name: --parallax;
-  view-timeline-axis: block;
-}
-
-.parallax > :is(img, video),
-.parallax > picture {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
-.parallax > picture img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
-.parallax > :is(img, video),
-.parallax > picture img {
-  object-fit: cover;
-  object-position: center;
-}
-
-// Overlay. A heading or <p> is a centered hero; figcaption docks to the
-// bottom on a translucent surface, same idea as a card figure.
-.parallax > :is(h1, h2, h3, h4, h5, h6),
-.parallax > p {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  margin: 0;
-  padding: 24px;
-  color: var(--md-sys-color-on-surface);
-  text-align: center;
-}
-
-.parallax > figcaption {
-  position: absolute;
-  inset: auto 0 0;
-  z-index: 1;
-  margin: 0;
-  padding: 16px 24px;
-  color: var(--md-sys-color-on-surface);
-  background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
-}
-
-// Full-bleed hero. Meets the viewport edges; no corners.
-.parallax.max {
-  height: 100vh;
-  height: 100dvh;
-  border-radius: 0;
-}
-
-// Progressive enhancement: without animation-timeline the image stays a
-// static cover. Named timeline is the clip, not the (taller) image.
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    .parallax > :is(img, video),
-    .parallax > picture img {
-      height: calc(100% + 2 * var(--md-comp-parallax-travel));
-      inset: calc(-1 * var(--md-comp-parallax-travel)) 0 auto;
-      animation: parallax-shift linear both;
-      animation-timeline: --parallax;
-      animation-range: cover;
-    }
-  }
-}
-
-@keyframes parallax-shift {
-  from { transform: translateY(var(--md-comp-parallax-travel)); }
-  to { transform: translateY(calc(-1 * var(--md-comp-parallax-travel))); }
-}

package/src/sass/components/_pulse.scss

@@ -1,37 +0,0 @@
-@use "../abstracts" as *;
-
-.pulse {
-  overflow: visible;
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: inherit;
-    border-radius: inherit;
-    transition: opacity .3s, transform .3s;
-    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-    z-index: -1;
-  }
-}
-
-@keyframes pulse-animation {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0;
-    transform: scale(1.5);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.5);
-  }
-}

package/src/sass/components/_slider.scss

@@ -1,129 +0,0 @@
-@use "../abstracts" as *;
-
-.slider {
-  position: relative;
-  height: 400px;
-  width: 100%;
-  // Same 12px as .responsive-img / .lightboxed. Applied to the slide
-  // stack, not the slider: init() adds 40px under the slides for the
-  // indicators, so a radius on the outer box never meets the photo.
-  // Fullscreen stays square so it can meet the viewport edges.
-  &:not(.fullscreen) .slides,
-  &:not(.fullscreen) .slides li {
-    border-radius: 12px;
-  }
-
-  // Fullscreen slider
-  &.fullscreen {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    ul.slides {
-      padding-left: 0;
-      list-style-type: none;
-      height: 100%;
-    }
-
-    ul.indicators {
-      padding-left: 0;
-      list-style-type: none;
-      z-index: 2;
-      bottom: 30px;
-
-      .indicator-item {
-        background-color: rgba(255, 255, 255, 0.45);
-
-        &.active {
-          background-color: var(--md-ref-palette-primary100);
-        }
-      }
-
-    }
-  }
-
-  .slides {
-    background-color: var(--md-sys-color-surface);
-    margin: 0;
-    height: 400px;
-    padding-left: 0;
-    list-style-type: none;
-
-    li {
-      padding-left: 0;
-      list-style-type: none; 
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      height: inherit;
-      overflow: hidden;
-
-      img {
-        height: 100%;
-        width: 100%;
-        background-size: cover;
-        background-position: center;
-      }
-
-      .caption {
-        color: #fff;
-        position: absolute;
-        top: 15%;
-        left: 15%;
-        width: 70%;
-        opacity: 0;
-
-        p {
-          color: rgba(255, 255, 255, 0.75);
-        }
-      }
-
-      &.active {
-        z-index: 2;
-      }
-    }
-  }
-
-  .indicators {
-    padding-left: 0;
-    list-style-type: none;
-    position: absolute;
-    text-align: center;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-
-    .indicator-item {
-      display: inline-block;
-      position: relative;
-      height: 16px;
-      width: 16px;
-      margin: 0 12px;
-    }
-
-    .indicator-item-btn {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      background-color: var(--md-sys-color-shadow);
-      transition: background-color .3s;
-      border-radius: 50%;
-      border-width: 0;
-      
-      &.active {
-        background-color: var(--md-sys-color-primary);
-      }
-    }
-  }
-}