@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/components/_table_of_contents.scss

@@ -1,7 +1,21 @@
 @use "../abstracts" as *;
 
+// Table of contents. Paired with .scrollspy sections. The current link
+// is .active and aria-current="true".
+//
+// Tokens:
+//   --md-comp-toc-label-color
+//   --md-comp-toc-active-color
+//   --md-comp-toc-indicator
+
 .table-of-contents {
+  --md-comp-toc-label-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-toc-active-color: var(--md-sys-color-primary);
+  --md-comp-toc-indicator: 2px;
+
   list-style: none;
+  margin: 0;
+  padding: 0;
 
   &.fixed {
     position: fixed;
@@ -12,23 +26,25 @@
   }
 
   a {
-    display: inline-block;
-    font-weight: 400;
-    color: var(--md-sys-color-secondary);
-    padding-left: 16px;
-    height: 2rem;
-    line-height: 2rem;
-    border-left: 1px solid var(--md-sys-color-outline-variant);
-    
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 2rem;
+    padding-inline-start: 16px;
+    border-inline-start: var(--md-comp-toc-indicator) solid transparent;
+    color: var(--md-comp-toc-label-color);
+    text-decoration: none;
+    @include typescale("label-large");
+    @include focus-visible;
+
     &:hover {
-      color: var(--md-sys-color-on-background);
-      padding-left: 15px;
+      color: var(--md-comp-toc-active-color);
     }
-    &.active {
-      color: var(--md-sys-color-primary);
+
+    &:is(.active, [aria-current="true"]) {
+      color: var(--md-comp-toc-active-color);
       font-weight: 500;
-      padding-left: 14px;
-      border-left: 2px solid var(--md-sys-color-primary);
+      border-inline-start-color: var(--md-comp-toc-active-color);
     }
   }
 }

package/src/sass/components/_tabs.scss

@@ -4,9 +4,8 @@
 //
 // Anatomy is the HTML. A <nav class="tabs"> of <a href="#panel"> is the
 // bar. A heading or <span> is the label; a leading <i> is the icon.
-// .active is the selected tab. ul.tabs > li.tab > a stays as an alias.
-// Helpers: .tabs-secondary, .horizontal / .tabs-horizontal, .max /
-// .tabs-fixed-width, .transparent / .tabs-transparent.
+// .active is the selected tab. Helpers: .tabs-secondary, .horizontal,
+// .max.
 //
 // Tokens follow https://m3.material.io/components/tabs/specs
 //   primary     surface, 48dp (64 with stacked icon), title-small
@@ -18,7 +17,13 @@
 //   divider     1dp outline-variant
 //   disabled    38%
 
-$_tab: "> :is(a, .tab > a, li.tab > a)";
+// Comma list of tab-link selectors. Always nest suffixes inside
+// `#{$_tab} { &.foo {} }` — interpolating `#{$_tab}.foo` only
+// attaches `.foo` to the last alternative and leaves `> a` bare
+// (same bug as the icon size classes). That compiled the disabled
+// rule as `.tabs > a, .tabs > .tab > a.disabled`, so every
+// `nav.tabs > a` got pointer-events:none and could not switch panels.
+$_tab: "> a, > .tab > a";
 
 .tabs {
   --md-comp-primary-tab-container-color: var(--md-sys-color-surface);
@@ -49,7 +54,7 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
     display: none;
   }
 
-  > :is(.tab, li.tab) {
+  > .tab {
     display: flex;
     flex: 0 0 auto;
     list-style: none;
@@ -115,22 +120,40 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
     &.active:focus {
       background-color: color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
     }
+
+    // Disabled — on the <a>. The wrapping `.tab.disabled` case is
+    // below; it cannot live in this block.
+    &.disabled,
+    &[aria-disabled="true"] {
+      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      background-color: transparent;
+      cursor: default;
+      pointer-events: none;
+    }
   }
 
   // Stacked icon + label is 64dp (primary).
-  &:not(.horizontal, .tabs-horizontal) #{$_tab}:has(> i) {
-    min-height: var(--md-comp-primary-tab-with-icon-container-height);
-    padding-block: 8px;
+  &:not(.horizontal) {
+    #{$_tab} {
+      &:has(> i) {
+        min-height: var(--md-comp-primary-tab-with-icon-container-height);
+        padding-block: 8px;
+      }
+    }
   }
 
   // CSS indicator when the JS sliding bar is not present.
-  &:not(:has(> .indicator)) #{$_tab}.active::after {
-    content: "";
-    position: absolute;
-    inset: auto 0 0 0;
-    height: var(--md-comp-primary-tab-active-indicator-height);
-    background-color: var(--md-comp-primary-tab-active-indicator-color);
-    border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+  &:not(:has(> .indicator)) {
+    #{$_tab} {
+      &.active::after {
+        content: "";
+        position: absolute;
+        inset: auto 0 0 0;
+        height: var(--md-comp-primary-tab-active-indicator-height);
+        background-color: var(--md-comp-primary-tab-active-indicator-color);
+        border-radius: var(--md-comp-primary-tab-active-indicator-shape);
+      }
+    }
   }
 
   > .indicator {
@@ -145,10 +168,7 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
     margin: 0;
   }
 
-  // Disabled — on the <a> or on the wrapping .tab.
-  #{$_tab}.disabled,
-  #{$_tab}[aria-disabled="true"],
-  > :is(.tab, li.tab).disabled > a {
+  > .tab.disabled > a {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     background-color: transparent;
     cursor: default;
@@ -169,8 +189,7 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
 }
 
 // Inline icon + label (primary can do this too).
-.tabs.horizontal,
-.tabs.tabs-horizontal {
+.tabs.horizontal {
   #{$_tab} {
     flex-direction: row;
     gap: 8px;
@@ -180,9 +199,8 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
 }
 
 // Equal-width tabs. Default on compact so a few destinations still fill.
-.tabs.max,
-.tabs.tabs-fixed-width {
-  > :is(a, .tab, li.tab) {
+.tabs.max {
+  > :is(a, .tab) {
     flex: 1 1 0;
     min-width: 0;
   }
@@ -194,7 +212,7 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
 
 @include bp-down("large") {
   .tabs {
-    > :is(a, .tab, li.tab) {
+    > :is(a, .tab) {
       flex: 1 1 0;
       min-width: 0;
     }
@@ -205,28 +223,3 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
     }
   }
 }
-
-// On a colored app bar (header.primary > .tabs).
-.tabs.transparent,
-.tabs.tabs-transparent {
-  --md-comp-primary-tab-container-color: transparent;
-  --md-comp-primary-tab-label-text-color: color-mix(
-    in oklab,
-    var(--md-sys-color-on-primary) 74%,
-    transparent
-  );
-  --md-comp-primary-tab-active-label-text-color: var(--md-sys-color-on-primary);
-  --md-comp-primary-tab-active-indicator-color: var(--md-sys-color-on-primary);
-  border-block-end-color: color-mix(in oklab, var(--md-sys-color-on-primary) 20%, transparent);
-
-  #{$_tab}:hover,
-  #{$_tab}:focus {
-    color: var(--md-sys-color-on-primary);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, transparent);
-  }
-
-  #{$_tab}.active:hover,
-  #{$_tab}.active:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
-  }
-}

package/src/sass/components/_toolbar.scss

@@ -1,32 +1,41 @@
 @use "../abstracts" as *;
 
-// Toolbars.
+// Toolbars (M3 Expressive).
 //
 // Anatomy is the HTML. A <nav class="toolbar"> is the bar. Direct
 // <button> / <a> children are the actions. An <i> is the icon; wrap a
-// label in <span>. .active marks the selected action. Helpers are only
-// for variants markup cannot express: .filled, .vertical, .max / .docked,
-// .fixed, .top, .bottom.
+// label in <span>. .active marks the selected action. A .filled action
+// is the emphasized control (the in-bar FAB). Helpers are only for
+// variants markup cannot express: .docked, .vibrant / .filled (on the
+// nav), .vertical, .fixed, .top, .bottom.
+//
+// Two variants:
+//   floating   default. Hugs its actions, 64dp, 32dp stadium,
+//              surface-container, elevation 2. Horizontal or .vertical.
+//   docked     .docked (or .max). Full width, 64dp, square, no
+//              elevation. Replaces the bottom app bar.
+//
+// Color: standard (surface-container) or .vibrant (primary-container).
+// Pair a floating bar with a FAB via .toolbar-group. Do not show a
+// toolbar at the same time as nav.navigation-bar.
 //
 // Tokens follow https://m3.material.io/components/toolbars/specs
-//   floating   hug, 64dp, 32dp stadium, surface-variant, elevation 2
-//   docked     full width, 64dp, 0 radius, surface-variant, no elevation
-//              (M3 replacement for the bottom app bar)
-//   vibrant    primary-container / on-primary-container (.filled)
 //   action     48dp target, 24dp icon, transparent at rest
-//   selected   secondary-container / on-secondary-container
+//   selected   secondary-container (standard) / surface (vibrant)
+//   emphasized 48dp, 16dp corners, primary / on-primary
 //
-// nav.toolbar only — do not style every <nav> (app bars, card actions,
-// radio rows). div.fixed-action-btn.toolbar is the FAB-to-toolbar
-// transition, not this component.
+// nav.toolbar only — do not style every <nav>. div.fixed-action-btn.toolbar
+// is the FAB-to-toolbar transition, not this component.
 
 nav.toolbar {
-  --md-comp-toolbar-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-toolbar-container-color: var(--md-sys-color-surface-container);
   --md-comp-toolbar-container-shape: 32px;
   --md-comp-toolbar-container-height: 64px;
   --md-comp-toolbar-leading-space: 12px;
   --md-comp-toolbar-action-size: 48px;
   --md-comp-toolbar-icon-size: 24px;
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-secondary-container);
+  --md-comp-toolbar-selected-color: var(--md-sys-color-on-secondary-container);
 
   box-sizing: border-box;
   display: inline-flex;
@@ -48,8 +57,8 @@ nav.toolbar {
   }
 
   // Actions — transparent at rest so they sit on the container, not filled.
-  // .extra is the 56dp FAB; leave it alone so a docked bar can embed one.
-  > :is(a, button):not(.btn-floating, .extra) {
+  // .extra is the 56dp companion FAB; leave it alone.
+  > :is(a, button):not(.extra) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -81,17 +90,17 @@ nav.toolbar {
       line-height: var(--md-comp-toolbar-icon-size);
     }
 
-    &:hover:not(.active) {
+    &:hover:not(.active, .filled) {
       background-color: color-mix(in oklab, currentColor 8%, transparent);
     }
 
-    &:active:not(.active) {
+    &:active:not(.active, .filled) {
       background-color: color-mix(in oklab, currentColor 10%, transparent);
     }
 
     &.active {
-      background-color: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-comp-toolbar-selected-container-color);
+      color: var(--md-comp-toolbar-selected-color);
     }
 
     &:disabled {
@@ -103,12 +112,52 @@ nav.toolbar {
   }
 
   // Icon-only — .circle, or an <i> with no <span> sibling.
-  > :is(a, button):not(.btn-floating, .extra):is(.circle, :has(> i):not(:has(> span))) {
+  > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
     width: var(--md-comp-toolbar-action-size);
     padding: 0;
     border-radius: 50%;
   }
 
+  // Emphasized action (the in-bar FAB). 48dp, 16dp corners, primary.
+  > :is(a, button).filled:not(.extra) {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-radius: 16px;
+    box-shadow: none;
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-primary) 8%,
+        var(--md-sys-color-primary)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-primary) 10%,
+        var(--md-sys-color-primary)
+      );
+    }
+  }
+
+  > :is(a, button).filled:not(.extra):has(> span) {
+    height: 40px;
+    min-height: 40px;
+    padding: 0 24px;
+    border-radius: 20px;
+    width: auto;
+  }
+
+  // Text field or other control stretching between leading and trailing.
+  > .field {
+    flex: 1 1 auto;
+    align-self: center;
+    min-width: 0;
+    margin: 0;
+  }
+
   // Spacer between leading and trailing actions.
   > .max {
     flex: 1 1 auto;
@@ -118,15 +167,13 @@ nav.toolbar {
   }
 }
 
-// Vibrant. Pair with .active using the inverse of the container.
+// Vibrant color style. Pair .active with surface so it still contrasts.
+nav.toolbar.vibrant,
 nav.toolbar.filled {
   --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
+  --md-comp-toolbar-selected-container-color: var(--md-sys-color-surface);
+  --md-comp-toolbar-selected-color: var(--md-sys-color-on-surface);
   color: var(--md-sys-color-on-primary-container);
-
-  > :is(a, button).active {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
-  }
 }
 
 // Vertical floating bar.
@@ -144,7 +191,8 @@ nav.toolbar.vertical {
 }
 
 // Docked — full width, square, no lift. M3's replacement for the bottom
-// app bar. .max is the BeerCSS name; .docked is the M3 name.
+// app bar. Shorter than that bar (64dp, not 80). .max is the BeerCSS
+// name; .docked is the M3 name.
 nav.toolbar.max,
 nav.toolbar.docked {
   display: flex;
@@ -154,6 +202,22 @@ nav.toolbar.docked {
   @include z-depth("0");
 }
 
+// Pair a floating toolbar with a companion FAB. The FAB is a sibling,
+// not a child — typically .extra.circle.
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  > nav.toolbar {
+    margin: 0;
+  }
+}
+
 // Pin to the viewport. Floating defaults to bottom-center; docked
 // defaults to the bottom edge.
 nav.toolbar.fixed {
@@ -184,9 +248,11 @@ nav.toolbar:is(.max, .docked).fixed,
 nav.toolbar:is(.max, .docked).fixed.bottom {
   inset: auto 0 0 0;
   transform: none;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
 }
 
 nav.toolbar:is(.max, .docked).fixed.top {
   inset: 0 0 auto 0;
   transform: none;
+  padding-bottom: 8px;
 }

package/src/sass/components/_tooltip.scss

@@ -14,11 +14,9 @@
 //   gap      4dp from the activator
 //
 // The JS plugin still exists: .tooltipped + data-tooltip, AutoInit,
-// class .tooltip.material-tooltip appended to <body>. .material-tooltip
-// is an alias. There is no data-html / unsafeHTML.
+// class .tooltip appended to <body>. There is no data-html / unsafeHTML.
 
-.tooltip,
-.material-tooltip {
+.tooltip {
   --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
   --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
   --md-comp-plain-tooltip-container-shape: 4px;
@@ -109,8 +107,7 @@
 
 // JS plugin: appended to <body>, top/left set in script. Do not use the
 // child-positioning rules; they would fight the inline transform.
-body > .tooltip,
-.material-tooltip {
+body > .tooltip {
   position: absolute;
   left: 0;
   top: 0;
@@ -121,10 +118,8 @@ body > .tooltip,
 
 // Rich tooltip — title, supporting text, optional action.
 .tooltip.rich,
-.tooltip.max,
-.material-tooltip.rich,
-.material-tooltip.max {
-  --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
+.tooltip.max {
+  --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface-container);
   --md-comp-rich-tooltip-container-shape: 12px;
 
   display: flex;

package/src/sass/components/_transitions.scss

@@ -1,10 +1,5 @@
 @use "../abstracts" as *;
 
-// Starting states for JS-driven animations: Sidenav staggers its list items in,
-// and .fade-in is applied before an element is animated into view.
-ul.staggered-list li { opacity: 0; }
-.fade-in { opacity: 0; transform-origin: 0 50%; }
-
 .scale-transition {
   transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
 

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

@@ -85,7 +85,7 @@ fieldset {
 }
 
 fieldset.filled {
-  --md-comp-fieldset-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-fieldset-container-color: var(--md-sys-color-surface-container-highest);
   --md-comp-fieldset-outline-color: transparent;
 }
 

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

@@ -7,11 +7,6 @@
 @forward 'range';
 @forward 'fieldset';
 
-// Remove Focus Boxes
-select:focus {
-  outline: 1px solid var(--md-ref-palette-primary80);
-}
-
 label {
   font-size: .8rem;
   color: var(--md-sys-color-on-surface-variant);