@expressivecss/expressive 0.2.0 → 0.4.0

package/src/sass/components/forms/_input-fields.scss

@@ -2,14 +2,17 @@
 
 // Text fields.
 //
-// Anatomy is the HTML. .field (or .input-field) is the container. The
-// <label> after the control is the floating label. A leading <i> is the
-// leading icon. <small> is supporting text. .outlined / .border is the
-// outlined variant; the default is filled.
+// Anatomy is the HTML. .field is the container. The <label> after the
+// control is the floating label. A leading <i> (or .prefix) is the
+// leading icon; .suffix (or a second / trailing <i>) is the trailing
+// icon. Icons come before the control in the documented markup, so
+// trailing cannot be selected with :last-child — that left .suffix
+// in flow above the well. <small> is supporting text. .outlined is
+// the outlined variant; the default is filled.
 //
 // Tokens follow https://m3.material.io/components/text-fields/specs
-//   filled     surface-variant well, 4dp top corners, 1dp/2dp bottom indicator
-//   outlined   1dp/2dp outline, 4dp corners
+//   filled     surface-variant well, 1rem corners, 1dp/2dp bottom indicator
+//   outlined   1dp/2dp outline, 1rem corners
 //   height     56dp
 //   label      body-large rest, body-small floated
 //   input      body-large / on-surface
@@ -34,21 +37,23 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   font-family: $font-stack;
 }
 
-.field,
-.input-field {
+.field {
   --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-text-field-container-shape: 1rem;
   --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
   --input-color: var(--md-comp-filled-text-field-caret-color);
 
   position: relative;
   clear: both;
 
-  input:not([type="range"]),
+  // Checkboxes / radios inside a field (multi-select menu) are not text
+  // fields — do not give them the 56dp well.
+  input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]),
   textarea {
     box-sizing: border-box;
     padding: 20px 16px 8px;
     border: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--md-comp-filled-text-field-container-shape);
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     background-color: var(--md-comp-filled-text-field-container-color);
     caret-color: var(--input-color);
@@ -67,16 +72,16 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     }
 
     &:focus:not([readonly]) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret) {
       color: var(--input-color);
     }
 
     &:focus:not([readonly]) + label,
     &:not([placeholder=" "]) + label,
     &:not(:placeholder-shown) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
       transform: scale(calc(12 / 16));
       top: 8px;
     }
@@ -119,7 +124,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   }
 
   > label,
-  > span:not(.supporting-text, .character-counter, .file-path) {
+  > span:not(.supporting-text, .character-counter, .file-path, .caret) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -152,10 +157,11 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     font-family: $font-stack;
   }
 
-  > i:first-child:not(.suffix),
-  > .prefix {
+  // Shared icon box. Position is set on the leading / trailing rules;
+  // a lone <i> matches several of the :is() items and must not pick
+  // a side here.
+  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child) {
     position: absolute;
-    left: 12px;
     top: 16px;
     display: flex;
     align-items: center;
@@ -165,53 +171,44 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     line-height: 24px;
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
+  }
+
+  > i:first-of-type:not(.suffix):not(:last-child),
+  > i.prefix {
+    left: 12px;
     pointer-events: none;
   }
 
-  > .suffix,
-  > i.suffix {
-    position: absolute;
+  > i.suffix,
+  > i:last-of-type:not(:first-of-type),
+  > i:last-child:not(:first-child):not(.prefix) {
     right: 12px;
-    top: 16px;
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-    user-select: none;
   }
 
-  > i:first-child:not(.suffix) ~ input,
-  > i:first-child:not(.suffix) ~ textarea,
-  > .prefix ~ input,
-  > .prefix ~ textarea {
-    padding-left: 52px;
-  }
+  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) {
+    > :is(input, textarea) {
+      padding-left: 52px;
+    }
 
-  > .suffix ~ input,
-  > .suffix ~ textarea,
-  > i.suffix ~ input,
-  > i.suffix ~ textarea {
-    padding-right: 52px;
+    > :is(label, span:not(.supporting-text, .character-counter, .file-path, .caret)) {
+      left: 52px;
+    }
   }
 
-  > i:first-child:not(.suffix) ~ label,
-  > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
-  > .prefix ~ label {
-    left: 52px;
+  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix)) {
+    > :is(input, textarea) {
+      padding-right: 52px;
+    }
   }
 
-  &.outlined,
-  &.border {
+  &.outlined {
     > input,
     > textarea {
       padding-top: 8px;
       padding-bottom: 8px;
       background-color: transparent;
       border: 1px solid var(--md-sys-color-outline);
-      border-radius: 4px;
+      border-radius: var(--md-comp-filled-text-field-container-shape);
 
       &:focus:not([readonly]) {
         border-width: 2px;
@@ -223,9 +220,9 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
       &:focus:not([readonly]) + label,
       &:not([placeholder=" "]) + label,
       &:not(:placeholder-shown) + label,
-      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
         top: -8px;
         left: 16px;
         margin-left: -4px;
@@ -253,7 +250,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 }
 
 .searchbar {
-  .prefix {
+  > i:first-child {
     position: absolute;
     padding-left: 1rem;
     top: 0;

package/src/sass/components/forms/_select.scss

@@ -1,103 +1,218 @@
 @use "../../abstracts" as *;
 
+// Select (exposed dropdown).
+//
+// Anatomy is the HTML. A <select> is the control. FormSelect wraps it
+// in .field (or reuses an existing one) and paints a text field + menu.
+// .browser-default keeps the native control. .caret is the trailing
+// expand icon (CSS, not an SVG node).
+//
+// Tokens follow https://m3.material.io/components/menus/overview
+// (exposed dropdown = text field + menu) and the filled/outlined field
+// tokens in _input-fields.scss.
+//   field          56dp, same chrome as .field
+//   trailing icon  24dp, 12dp from the end, rotates when open
+//   selected item  10% on-surface + trailing check
+//   optgroup       on-surface-variant, outline-variant rule
+//
+$_select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+$_select-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
+
+// Native / no-js / .browser-default: a 56dp field, not a 3rem box.
+select {
+  --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-select-container-shape: 1rem;
+  --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 56px;
+  margin: 0;
+  padding: 16px 12px;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: var(--md-comp-filled-select-container-shape);
+  background-color: var(--md-comp-filled-select-container-color);
+  color: var(--md-comp-filled-select-input-text-color);
+  @include typescale("body-large");
+  font-family: $font-stack;
+
+  &:focus {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &:disabled {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+  }
+}
+
 select.browser-default {
   opacity: 1;
-  color: var(--md-sys-color-on-background);
 }
 
-// TODO: Change to ".select" and not use tag name directly
-// Keep selects useable without javascript
+@supports (appearance: base-select) {
+  select.browser-default,
+  select.browser-default::picker(select) {
+    appearance: base-select;
+  }
 
-select {
-  background-color: var(--md-sys-color-surface);
-  width: 100%;
-  padding: 5px;
-  border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
-  height: 3rem;
+  select.browser-default::picker(select) {
+    border: none;
+    border-radius: var(--md-comp-menu-container-shape, 1rem);
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+    @include z-depth("2");
+  }
 }
 
-.select-wrapper:focus-within {
-  outline: 2px solid var(--md-sys-color-primary);
-  border-radius: 4px;
-}
+.field:has(> .hide-select) {
+  // BeerCSS menu: 1rem surface, stadium items. Same radius on the
+  // field so the closed control and the open list read as one shape.
+  --md-comp-filled-select-container-shape: 1rem;
+  --md-comp-menu-container-shape: 1rem;
+  --md-comp-filled-select-trailing-icon-size: 24px;
+  --md-comp-filled-select-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-menu-item-leading-image-size: 40px;
 
-.select-wrapper {
   position: relative;
+  border-radius: var(--md-comp-filled-select-container-shape);
 
+  > input.dropdown-trigger {
+    border-radius: inherit;
+  }
+
+  > input.dropdown-trigger {
+    padding-inline-end: 52px;
+  }
+
+  // Trailing expand icon. Empty .caret is the hook; the glyph is a mask.
+  // `left: auto` beats `.field > span { left: 16px }` if that rule ever
+  // matches again — left + width would otherwise ignore inset-inline-end
+  // and pin the chevron over the value.
   .caret {
     position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    z-index: 0;
-    fill: var(--md-sys-color-on-background);
+    inset-block-start: 16px;
+    inset-inline-start: auto;
+    left: auto;
+    inset-inline-end: 12px;
+    z-index: 1;
+    width: var(--md-comp-filled-select-trailing-icon-size);
+    height: var(--md-comp-filled-select-trailing-icon-size);
+    margin: 0;
     pointer-events: none;
+    background-color: var(--md-comp-filled-select-trailing-icon-color);
+    mask: $_select-chevron center / 24px no-repeat;
+    transition: transform 0.2s ease;
+  }
+
+  &:has(> input[aria-expanded="true"]) .caret,
+  &:has(> menu:popover-open) .caret {
+    transform: rotate(180deg);
   }
 
-  // Hide select with overflow hidden instead of using display none
-  // (this prevents form validation errors with hidden form elements)
+  // Keep the native select in the field's box so constraint-validation
+  // bubbles land on the control, not at (0, 0).
   .hide-select {
-    width: 0;
-    height: 0;
-    overflow: hidden;
     position: absolute;
-    top: 0;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
     z-index: -1;
-  }
-}
 
-select:disabled {
-  color: var(--md-sys-color-on-surface);
+    select {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+  }
 }
 
-.select-wrapper.disabled {
-  + label {
-    color: var(--md-sys-color-on-surface);
-  }
+.field:has(> .hide-select).disabled {
   .caret {
-    fill: var(--md-sys-color-on-surface);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  + label,
+  > label {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
 }
 
-.select-wrapper input.select-dropdown:disabled {
-  color: var(--md-sys-color-on-surface);
+.field:has(> .hide-select) > input.dropdown-trigger:disabled {
   cursor: default;
   user-select: none;
 }
 
-.select-wrapper i {
-  color: var(--md-sys-color-on-surface);
+menu[role="listbox"] > li.disabled,
+menu[role="listbox"] > li.disabled > span,
+menu[role="listbox"] > li.optgroup {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+}
+
+menu[role="listbox"] > li:not(.optgroup, .divider) {
+  display: flex;
+  align-items: center;
 }
 
-.select-dropdown li.disabled,
-.select-dropdown li.disabled > span,
-.select-dropdown li.optgroup {
-  color: var(--md-sys-color-on-surface);
-  //background-color: transparent;
+menu[role="listbox"] > li.selected:not(.disabled, .optgroup) {
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
 }
 
-// Icons
-.select-dropdown li {
-  img {
-    height: $dropdown-item-height - 10;
-    width: $dropdown-item-height - 10;
-    margin: 5px 15px;
-    float: right;
+// Single-select: trailing check. Multi-select already has a leading checkbox.
+menu[role="listbox"]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
+  content: "";
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  margin-inline-start: auto;
+  margin-inline-end: 12px;
+  background-color: var(--md-sys-color-on-surface);
+  mask: $_select-check center / 24px no-repeat;
+}
+
+menu[role="listbox"] li img {
+  box-sizing: border-box;
+  flex: 0 0 var(--md-comp-menu-item-leading-image-size);
+  width: var(--md-comp-menu-item-leading-image-size);
+  height: var(--md-comp-menu-item-leading-image-size);
+  margin: 4px 12px;
+  object-fit: cover;
+  border-radius: 4px;
+  order: 1;
+  margin-inline-start: auto;
+
+  &.left {
+    order: 0;
+    margin-inline-start: 12px;
+    margin-inline-end: 0;
   }
 }
 
-// Optgroup styles
-.select-dropdown li.optgroup {
-  border-top: 1px solid rgba(0, 0, 0, 0.04);
-  &.selected > span {
-    color: var(--md-sys-color-on-background);
+menu[role="listbox"] li.optgroup {
+  cursor: default;
+  pointer-events: none;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--md-sys-color-outline-variant);
   }
-  & > span {
+
+  > span {
     color: var(--md-sys-color-on-surface-variant);
   }
-  & ~ li.optgroup-option {
-    padding-left: 1rem;
+}
+
+menu[role="listbox"] li.optgroup-option {
+  padding-inline-start: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .field:has(> .hide-select) .caret {
+    transition: none;
   }
 }

package/src/sass/components/forms/_switches.scss

@@ -68,13 +68,21 @@
   border: 2px solid var(--md-sys-color-outline);
   border-radius: 16px;
   background-color: var(--md-sys-color-surface-variant);
+  // Size the image to the handle. A 100% gradient keeps the circle in
+  // the middle of the track, so background-position cannot put off on
+  // the start and on on the end.
   background-image: radial-gradient(
-    circle,
-    var(--md-sys-color-outline) 0 8px,
-    transparent 8.5px
+    circle closest-side,
+    var(--md-sys-color-outline) 100%,
+    transparent 101%
   );
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-origin: padding-box;
+  background-size: var(--md-comp-switch-handle-unselected) var(--md-comp-switch-handle-unselected);
+  // Lengths only. A % in background-position is “align this point of the
+  // image with that point of the box”, so calc(100% - handle) leaves the
+  // thumb on the start and it only grows.
+  background-position: 6px 50%;
   cursor: pointer;
   transition: background-color .2s ease, background-position .2s ease,
     background-size .2s ease, border-color .2s ease, box-shadow .2s ease;
@@ -83,11 +91,16 @@
     border-color: var(--md-sys-color-primary);
     background-color: var(--md-sys-color-primary);
     background-image: radial-gradient(
-      circle,
-      var(--md-sys-color-on-primary) 0 12px,
-      transparent 12.5px
+      circle closest-side,
+      var(--md-sys-color-on-primary) 100%,
+      transparent 101%
     );
-    background-position: calc(100% - 14px) center;
+    background-size: var(--md-comp-switch-handle-selected) var(--md-comp-switch-handle-selected);
+    // padding-box is track minus the 2px border on each side; 2px inset.
+    background-position: calc(
+        var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)
+      )
+      50%;
   }
 
   &:hover {

package/src/sass/utilities/_helpers.scss

@@ -7,12 +7,10 @@
 // Positioning
 .valign-wrapper { display: flex; align-items: center; }
 
-.clearfix { clear: both; }
-
 // Text alignment
 .left-align { text-align: left; }
 .right-align { text-align: right }
-.center, .center-align { text-align: center; }
+.center-align { text-align: center; }
 
 // TODO: Remove this
 .left { float: left !important; }

package/src/sass/utilities/_typescale.scss

@@ -38,8 +38,3 @@ $typescale-roles: (
 .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

@@ -1,11 +1,11 @@
 @use "../abstracts" as *;
 
 // Showing and hiding, globally and per breakpoint.
-// Breakpoint strings ($small-and-down, ...) come from abstracts/_variables.scss.
+// Queries come from bp-up / bp-down / bp-between in abstracts/_breakpoints.scss.
 
 .hide { display: none !important; }
 
-.hide-on-small-only, .hide-on-small-and-down {
+.hide-on-small-only {
   @include bp-down("small") { display: none !important; }
 }
 

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

@@ -1,45 +0,0 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
-export interface ModalOptions extends BaseOptions {
-    opacity: number;
-    inDuration: number;
-    outDuration: number;
-    preventScrolling: boolean;
-    onOpenStart: (this: Modal, el: HTMLElement) => void;
-    onOpenEnd: (this: Modal, el: HTMLElement) => void;
-    onCloseStart: (el: HTMLElement) => void;
-    onCloseEnd: (el: HTMLElement) => void;
-    dismissible: boolean;
-    startingTop: string;
-    endingTop: string;
-}
-export declare class Modal extends Component<ModalOptions> {
-    #private;
-    constructor(el: HTMLElement, options: Partial<ModalOptions>);
-    static get defaults(): {
-        opacity: number;
-        inDuration: number;
-        outDuration: number;
-        onOpenStart: any;
-        onOpenEnd: any;
-        onCloseStart: any;
-        onCloseEnd: any;
-        preventScrolling: boolean;
-        dismissible: boolean;
-        startingTop: string;
-        endingTop: string;
-    };
-    static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
-    static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
-    static getInstance(el: HTMLElement): Modal;
-    destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleTriggerClick(): void;
-    _handleOverlayClick(): void;
-    _handleModalCloseClick(): void;
-    _handleKeydown(): void;
-    _handleFocus(): void;
-    open(): this;
-    close(): this;
-    static create(config: any): string | HTMLDialogElement;
-}