@expressivecss/expressive 0.2.0 → 0.4.0

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, .transparent.
 //
 // 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;
     }
@@ -207,8 +225,7 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
 }
 
 // On a colored app bar (header.primary > .tabs).
-.tabs.transparent,
-.tabs.tabs-transparent {
+.tabs.transparent {
   --md-comp-primary-tab-container-color: transparent;
   --md-comp-primary-tab-label-text-color: color-mix(
     in oklab,
@@ -219,14 +236,16 @@ $_tab: "> :is(a, .tab > a, li.tab > a)";
   --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} {
+    &:hover,
+    &: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);
+    &.active:hover,
+    &.active:focus {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, transparent);
+    }
   }
 }

package/src/sass/components/_tapTarget.scss

@@ -1,104 +1,187 @@
 @use "../abstracts" as *;
 
+// Tap target (Feature Discovery). A circular spotlight centered on an
+// origin. JS writes --md-comp-tap-target-x/y/origin-size and data-edge;
+// this file does the rest.
+//
+// Tokens:
+//   --md-comp-tap-target-size           480px
+//   --md-comp-tap-target-z              1000
+//   --md-comp-tap-target-container-color
+//   --md-comp-tap-target-supporting-color
+//   --md-comp-tap-target-duration       300ms
+//   --md-comp-tap-target-easing         soft ease-in-out
+
 .tap-target-wrapper {
-  width: 800px;
-  height: 800px;
+  --md-comp-tap-target-size: 480px;
+  --md-comp-tap-target-z: 1000;
+  --md-comp-tap-target-container-color: var(--md-sys-color-primary-container);
+  --md-comp-tap-target-supporting-color: var(--md-sys-color-on-primary-container);
+  --md-comp-tap-target-duration: 300ms;
+  --md-comp-tap-target-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  --md-comp-tap-target-x: 50%;
+  --md-comp-tap-target-y: 50%;
+  --md-comp-tap-target-origin-size: 56px;
+
+  box-sizing: border-box;
   position: fixed;
-  z-index: 1000;
+  inset: auto;
+  left: var(--md-comp-tap-target-x);
+  top: var(--md-comp-tap-target-y);
+  translate: -50% -50%;
+  width: var(--md-comp-tap-target-size);
+  height: var(--md-comp-tap-target-size);
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--md-comp-tap-target-supporting-color);
   visibility: hidden;
-  transition: visibility 0s .3s;
+  pointer-events: none;
+  z-index: var(--md-comp-tap-target-z);
+  transition:
+    visibility 0s var(--md-comp-tap-target-duration),
+    overlay var(--md-comp-tap-target-duration) allow-discrete,
+    display var(--md-comp-tap-target-duration) allow-discrete;
 }
 
-.tap-target-wrapper.open {
+.tap-target-wrapper:is(.open, :popover-open) {
   visibility: visible;
-  transition: visibility 0s;
+  pointer-events: none;
+  transition-delay: 0s;
 
   .tap-target {
     transform: scale(1);
-    opacity: .95;
-    transition:
-      transform .3s cubic-bezier(.42,0,.58,1),
-      opacity .3s cubic-bezier(.42,0,.58,1);
+    opacity: 1;
   }
 
   .tap-target-wave::before {
     transform: scale(1);
   }
+
   .tap-target-wave::after {
     visibility: visible;
     animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-    transition:
-      opacity .3s,
-      transform .3s,
-      visibility 0s 1s;
   }
 }
 
 .tap-target {
   position: absolute;
-  font-size: 1rem;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-primary);
-  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+  inset: 0;
+  display: grid;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: var(--md-comp-tap-target-container-color);
+  color: var(--md-comp-tap-target-supporting-color);
   opacity: 0;
   transform: scale(0);
-  transition: transform .3s cubic-bezier(.42, 0, .58, 1),
-  opacity .3s cubic-bezier(.42, 0, .58, 1);
+  transition:
+    transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing),
+    opacity var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
+  @include z-depth("3");
+  @include typescale("body-medium");
 }
 
 .tap-target-content {
   position: relative;
-  display: table-cell;
+  z-index: 1;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  box-sizing: border-box;
+  max-width: min(18rem, 52%);
+  padding: calc(var(--md-comp-tap-target-origin-size) * 0.5 + 20px);
+  pointer-events: auto;
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    color: inherit;
+    @include typescale("title-medium");
+  }
+
+  > p {
+    margin: 0;
+    color: inherit;
+  }
+}
+
+.tap-target-wrapper[data-edge^="top"] .tap-target-content {
+  align-self: end;
+}
+
+.tap-target-wrapper[data-edge^="bottom"] .tap-target-content {
+  align-self: start;
+}
+
+.tap-target-wrapper[data-edge$="left"] .tap-target-content {
+  justify-self: end;
+}
+
+.tap-target-wrapper[data-edge$="right"] .tap-target-content {
+  justify-self: start;
+}
+
+.tap-target-wrapper[data-edge$="center"] .tap-target-content {
+  justify-self: center;
+  max-width: min(22rem, 80%);
+  text-align: center;
 }
 
 .tap-target-wave {
   position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 0;
+  width: calc(var(--md-comp-tap-target-origin-size) * 2);
+  height: calc(var(--md-comp-tap-target-origin-size) * 2);
+  translate: -50% -50%;
   border-radius: 50%;
-  z-index: 10001;
+  pointer-events: none;
 
   &::before,
   &::after {
-    content: '';
-    display: block;
+    content: "";
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    display: block;
     border-radius: 50%;
-    background-color: var(--md-sys-color-surface)
+    background-color: var(--md-sys-color-surface);
   }
+
   &::before {
     transform: scale(0);
-    transition: transform .3s;
+    transition: transform var(--md-comp-tap-target-duration)
+      var(--md-comp-tap-target-easing);
   }
+
   &::after {
     visibility: hidden;
-    transition:
-      opacity .3s,
-      transform .3s,
-      visibility 0s;
     z-index: -1;
   }
 }
 
+// Raised only on the non-popover path so a static origin stays above the
+// circle. Never set position here — a FAB may already be fixed.
 .tap-target-origin {
-  top: 50%;
-  left: 50%;
-  z-index: 10002;
-  position: absolute !important;
-  transform: translate(-50%,-50%);
+  z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
+}
 
-  &:not(.btn),
-  &:not(.btn):hover {
-    background: none;
+@include bp-down("small") {
+  .tap-target-wrapper {
+    --md-comp-tap-target-size: 360px;
   }
 }
 
-@include bp-down("small") {
-  .tap-target, .tap-target-wrapper {
-    width: 600px;
-    height: 600px;
+@media (prefers-reduced-motion: reduce) {
+  .tap-target-wrapper {
+    --md-comp-tap-target-duration: 0s;
+  }
+
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
+    animation: none;
   }
 }

package/src/sass/components/_toast.scss

@@ -2,10 +2,10 @@
 
 // Snackbars (toasts).
 //
-// Anatomy is the HTML. A .snackbar / .toast is the container. A <p> (or
-// <span>, or loose text) is the supporting text. A trailing <button> is
-// the action; a .circle button is the optional close. An optional leading
-// <i> is an icon. .toast-action stays as an alias on the action control.
+// Anatomy is the HTML. A .snackbar is the container. A <p> (or <span>,
+// or loose text) is the supporting text. A trailing <button> is the
+// action; a .circle button is the optional close. An optional leading
+// <i> is an icon.
 //
 // Tokens follow https://m3.material.io/components/snackbar/specs
 //   container    inverse-surface, 4dp corners, elevation 3, min 48dp
@@ -15,11 +15,10 @@
 //   close        24dp icon, inverse-on-surface
 //   inset        8dp compact, 24dp from start+bottom on larger screens
 //
-// The constructor always adds both .toast and .snackbar. A static
-// .snackbar is in-flow (docs previews). .active pins it to the viewport.
-// There is no AutoInit and no toast() helper.
+// The constructor adds .snackbar. A static .snackbar is in-flow (docs
+// previews). .active pins it to the viewport. There is no AutoInit.
 
-$_bar: ":is(.toast, .snackbar)";
+$_bar: ".snackbar";
 
 #toast-container {
   --md-comp-snackbar-container-margin-leading: 8px;
@@ -128,7 +127,7 @@ $_bar: ":is(.toast, .snackbar)";
   }
 
   // Inline links in the supporting text use the action color.
-  a:not(.button, .toast-action) {
+  a:not(.button) {
     color: var(--md-comp-snackbar-action-label-text-color);
   }
 
@@ -147,8 +146,8 @@ $_bar: ":is(.toast, .snackbar)";
   }
 
   // Text action — inverse-primary, not the filled common-button default.
-  > :is(button, a.button, a.toast-action, .toast-action):not(.circle),
-  > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle) {
+  > :is(button, a.button):not(.circle),
+  > nav > :is(button, a.button):not(.circle) {
     flex: 0 0 auto;
     height: 40px;
     min-width: 48px;

package/src/sass/components/_toolbar.scss

@@ -49,7 +49,7 @@ 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) {
+  > :is(a, button):not(.extra) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -103,7 +103,7 @@ 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%;

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,9 +118,7 @@ body > .tooltip,
 
 // Rich tooltip — title, supporting text, optional action.
 .tooltip.rich,
-.tooltip.max,
-.material-tooltip.rich,
-.material-tooltip.max {
+.tooltip.max {
   --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
   --md-comp-rich-tooltip-container-shape: 12px;
 

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/_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);