@expressivecss/expressive 0.1.0-alpha.3 → 0.1.0

package/src/sass/components/_toast.scss

@@ -0,0 +1,260 @@
+@use "../abstracts" as *;
+
+// 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.
+//
+// Tokens follow https://m3.material.io/components/snackbar/specs
+//   container    inverse-surface, 4dp corners, elevation 3, min 48dp
+//   width        hug, min 344 / max 672 (full-bleed inset on compact)
+//   text         body-medium / inverse-on-surface, two lines max
+//   action       label-large / inverse-primary text button
+//   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.
+
+$_bar: ":is(.toast, .snackbar)";
+
+#toast-container {
+  --md-comp-snackbar-container-margin-leading: 8px;
+  --md-comp-snackbar-container-margin-trailing: 8px;
+  --md-comp-snackbar-container-margin-bottom: 8px;
+  --md-comp-snackbar-container-margin-top: 8px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  position: fixed;
+  z-index: 10000;
+  inset: auto var(--md-comp-snackbar-container-margin-trailing)
+    var(--md-comp-snackbar-container-margin-bottom)
+    var(--md-comp-snackbar-container-margin-leading);
+  width: auto;
+  max-width: calc(100% - var(--md-comp-snackbar-container-margin-leading) - var(--md-comp-snackbar-container-margin-trailing));
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  @include bp-up("small") {
+    --md-comp-snackbar-container-margin-leading: 24px;
+    --md-comp-snackbar-container-margin-trailing: 24px;
+    --md-comp-snackbar-container-margin-bottom: 24px;
+    --md-comp-snackbar-container-margin-top: 24px;
+    align-items: flex-start;
+    width: max-content;
+    min-width: min(344px, calc(100% - 48px));
+    max-width: min(672px, calc(100% - 48px));
+  }
+
+  // Position helpers on the container, or on a child via :has().
+  &:has(> .top),
+  &.top {
+    inset: var(--md-comp-snackbar-container-margin-top)
+      var(--md-comp-snackbar-container-margin-trailing)
+      auto
+      var(--md-comp-snackbar-container-margin-leading);
+  }
+
+  &:has(> .center),
+  &.center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+}
+
+#{$_bar} {
+  --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
+  --md-comp-snackbar-container-shape: 4px;
+  --md-comp-snackbar-supporting-text-color: var(--md-sys-color-inverse-on-surface);
+  --md-comp-snackbar-action-label-text-color: var(--md-sys-color-inverse-primary);
+  --md-comp-snackbar-icon-color: var(--md-sys-color-inverse-on-surface);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 672px;
+  min-height: 48px;
+  margin: 0;
+  padding: 4px 8px 4px 16px;
+  border: none;
+  border-radius: var(--md-comp-snackbar-container-shape);
+  background-color: var(--md-comp-snackbar-container-color);
+  color: var(--md-comp-snackbar-supporting-text-color);
+  @include typescale("body-medium");
+  @include z-depth("3");
+  cursor: default;
+
+  @include bp-up("small") {
+    width: max-content;
+    min-width: min(344px, 100%);
+  }
+
+  // Supporting text. A bare <p> is body-large in the type layer — reset it.
+  > p,
+  > span {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding-block: 10px;
+    color: var(--md-comp-snackbar-supporting-text-color);
+    @include typescale("body-medium");
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  // Optional leading icon (BeerCSS). M3 snackbars have no leading icon.
+  > i:first-child {
+    flex: 0 0 auto;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    color: var(--md-comp-snackbar-icon-color);
+  }
+
+  // Inline links in the supporting text use the action color.
+  a:not(.button, .toast-action) {
+    color: var(--md-comp-snackbar-action-label-text-color);
+  }
+
+  // Action row. A bare <nav> just groups the action and close.
+  > nav {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    min-height: 0;
+    height: auto;
+    background: none;
+    box-shadow: none;
+  }
+
+  // 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) {
+    flex: 0 0 auto;
+    height: 40px;
+    min-width: 48px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+    color: var(--md-comp-snackbar-action-label-text-color);
+    box-shadow: none;
+    @include typescale("label-large");
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 8%, transparent);
+    }
+
+    &:active,
+    &:focus {
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-primary) 10%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--md-sys-color-inverse-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  // Close — 40dp icon button so it sits in the 48dp single-line bar.
+  > :is(button, a).circle,
+  > nav > :is(button, a).circle {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-comp-snackbar-icon-color);
+    box-shadow: none;
+
+    > i {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 8%, transparent);
+    }
+
+    &:active,
+    &:focus {
+      background-color: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) 10%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--md-sys-color-inverse-on-surface);
+      outline-offset: 2px;
+    }
+  }
+
+  // Optional stadium. M3 default is extra-small (4dp).
+  &.rounded {
+    border-radius: 24px;
+  }
+}
+
+// Stacked in-flow previews. JS toasts use the container gap instead.
+#{$_bar} + #{$_bar} {
+  margin-top: 8px;
+}
+
+// JS enter animation starts the bar 35px below its rest position.
+#toast-container #{$_bar} {
+  position: relative;
+  top: 35px;
+  margin-top: 0;
+}
+
+// Static overlay. In-flow without this (docs previews). Not AutoInit —
+// add and remove the class yourself, or use the constructor for timing.
+#{$_bar}.active {
+  position: fixed;
+  z-index: 10000;
+  inset: auto auto 16px 16px;
+  top: auto;
+  width: max-content;
+  max-width: min(672px, calc(100% - 32px));
+
+  @include bp-down("small") {
+    inset: auto 8px 8px 8px;
+    width: auto;
+    max-width: none;
+  }
+
+  &.top {
+    inset: 16px auto auto 16px;
+
+    @include bp-down("small") {
+      inset: 8px 8px auto 8px;
+    }
+  }
+
+  &.center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+}

package/src/sass/components/_toolbar.scss

@@ -0,0 +1,192 @@
+@use "../abstracts" as *;
+
+// Toolbars.
+//
+// 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.
+//
+// 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
+//
+// 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 {
+  --md-comp-toolbar-container-color: var(--md-sys-color-surface-variant);
+  --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;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: var(--md-comp-toolbar-container-height);
+  min-width: var(--md-comp-toolbar-container-height);
+  margin: 0;
+  padding: 8px var(--md-comp-toolbar-leading-space);
+  border: none;
+  border-radius: var(--md-comp-toolbar-container-shape);
+  background-color: var(--md-comp-toolbar-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+
+  & + & {
+    margin-block-start: 16px;
+  }
+
+  // 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) {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: var(--md-comp-toolbar-action-size);
+    min-height: var(--md-comp-toolbar-action-size);
+    height: var(--md-comp-toolbar-action-size);
+    margin: 0;
+    padding: 0 12px;
+    border: none;
+    border-radius: calc(var(--md-comp-toolbar-action-size) / 2);
+    background-color: transparent;
+    color: inherit;
+    box-shadow: none;
+    text-decoration: none;
+    cursor: pointer;
+    appearance: none;
+    @include typescale("label-large");
+    font-family: $font-stack;
+    @include focus-visible;
+
+    > i {
+      flex: 0 0 auto;
+      font-size: var(--md-comp-toolbar-icon-size);
+      width: var(--md-comp-toolbar-icon-size);
+      height: var(--md-comp-toolbar-icon-size);
+      line-height: var(--md-comp-toolbar-icon-size);
+    }
+
+    &:hover:not(.active) {
+      background-color: color-mix(in oklab, currentColor 8%, transparent);
+    }
+
+    &:active:not(.active) {
+      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);
+    }
+
+    &:disabled {
+      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      background-color: transparent;
+      box-shadow: none;
+      cursor: default;
+    }
+  }
+
+  // Icon-only — .circle, or an <i> with no <span> sibling.
+  > :is(a, button):not(.btn-floating, .extra):is(.circle, :has(> i):not(:has(> span))) {
+    width: var(--md-comp-toolbar-action-size);
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  // Spacer between leading and trailing actions.
+  > .max {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+// Vibrant. Pair with .active using the inverse of the container.
+nav.toolbar.filled {
+  --md-comp-toolbar-container-color: var(--md-sys-color-primary-container);
+  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.
+nav.toolbar.vertical {
+  flex-direction: column;
+  min-width: var(--md-comp-toolbar-container-height);
+  min-height: var(--md-comp-toolbar-container-height);
+  padding: var(--md-comp-toolbar-leading-space) 8px;
+
+  > .max {
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+  }
+}
+
+// Docked — full width, square, no lift. M3's replacement for the bottom
+// app bar. .max is the BeerCSS name; .docked is the M3 name.
+nav.toolbar.max,
+nav.toolbar.docked {
+  display: flex;
+  width: 100%;
+  --md-comp-toolbar-container-shape: 0;
+  justify-content: space-around;
+  @include z-depth("0");
+}
+
+// Pin to the viewport. Floating defaults to bottom-center; docked
+// defaults to the bottom edge.
+nav.toolbar.fixed {
+  position: fixed;
+  z-index: 996;
+  inset: auto auto 16px 50%;
+  transform: translateX(-50%);
+}
+
+nav.toolbar.fixed.top {
+  inset: 16px auto auto 50%;
+}
+
+nav.toolbar.fixed.bottom {
+  inset: auto auto 16px 50%;
+}
+
+nav.toolbar.vertical.fixed {
+  inset: 50% auto auto 16px;
+  transform: translateY(-50%);
+}
+
+nav.toolbar.vertical.fixed.right {
+  inset: 50% 16px auto auto;
+}
+
+nav.toolbar:is(.max, .docked).fixed,
+nav.toolbar:is(.max, .docked).fixed.bottom {
+  inset: auto 0 0 0;
+  transform: none;
+}
+
+nav.toolbar:is(.max, .docked).fixed.top {
+  inset: 0 0 auto 0;
+  transform: none;
+}

package/src/sass/components/_tooltip.scss

@@ -0,0 +1,166 @@
+@use "../abstracts" as *;
+
+// Tooltips.
+//
+// Anatomy is the HTML. A child .tooltip is the bubble — no .tooltipped
+// required. Helpers are only for placement and the rich variant:
+// .top (default), .bottom, .left, .right, .rich / .max.
+//
+// Tokens follow https://m3.material.io/components/tooltips/specs
+//   plain    inverse-surface / inverse-on-surface, 4dp, body-small
+//            min 24dp, pad 4/8, max 200dp, no elevation, no caret
+//   rich     surface, elevation 2, 12dp, title-small + body-medium
+//            pad 12/16, max 320dp, optional action
+//   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.
+
+.tooltip,
+.material-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;
+  --md-comp-tooltip-anchor-gap: 4px;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 24px;
+  max-width: 200px;
+  margin: 0;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--md-comp-plain-tooltip-container-shape);
+  background-color: var(--md-comp-plain-tooltip-container-color);
+  color: var(--md-comp-plain-tooltip-supporting-text-color);
+  @include typescale("body-small");
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2000;
+}
+
+// CSS-only: a child of the activator. Default sits above (M3 preferred).
+:not(body):has(> .tooltip) {
+  position: relative;
+}
+
+// Only shrink-wrap typical activators. A stray .tooltip as a section
+// child must not turn the section into inline-flex (invalid <p><div>
+// gets hoisted and would match).
+:is(button, a, span, label, i):has(> .tooltip) {
+  display: inline-flex;
+}
+
+:not(body) > .tooltip {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  inset: 0 auto auto 50%;
+  transform: translate(-50%, calc(-100% - var(--md-comp-tooltip-anchor-gap))) scale(0.96);
+  transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
+}
+
+:not(body) > .tooltip.bottom {
+  inset: auto auto 0 50%;
+  transform: translate(-50%, calc(100% + var(--md-comp-tooltip-anchor-gap))) scale(0.96);
+}
+
+:not(body) > .tooltip.left {
+  inset: 50% auto auto 0;
+  transform: translate(calc(-100% - var(--md-comp-tooltip-anchor-gap)), -50%) scale(0.96);
+}
+
+:not(body) > .tooltip.right {
+  inset: 50% 0 auto auto;
+  transform: translate(calc(100% + var(--md-comp-tooltip-anchor-gap)), -50%) scale(0.96);
+}
+
+:is(:hover, :focus-visible, :focus-within):not(body) > .tooltip,
+:not(body) > .tooltip:hover {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+:is(:hover, :focus-visible, :focus-within):not(body) > .tooltip:not(.left, .right, .bottom),
+:not(body) > .tooltip:not(.left, .right, .bottom):hover {
+  transform: translate(-50%, calc(-100% - var(--md-comp-tooltip-anchor-gap))) scale(1);
+}
+
+:is(:hover, :focus-visible, :focus-within):not(body) > .tooltip.bottom,
+:not(body) > .tooltip.bottom:hover {
+  transform: translate(-50%, calc(100% + var(--md-comp-tooltip-anchor-gap))) scale(1);
+}
+
+:is(:hover, :focus-visible, :focus-within):not(body) > .tooltip.left,
+:not(body) > .tooltip.left:hover {
+  transform: translate(calc(-100% - var(--md-comp-tooltip-anchor-gap)), -50%) scale(1);
+}
+
+:is(:hover, :focus-visible, :focus-within):not(body) > .tooltip.right,
+:not(body) > .tooltip.right:hover {
+  transform: translate(calc(100% + var(--md-comp-tooltip-anchor-gap)), -50%) scale(1);
+}
+
+// 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 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  overflow: hidden;
+}
+
+// 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);
+  --md-comp-rich-tooltip-container-shape: 12px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  min-width: 160px;
+  max-width: 320px;
+  padding: 12px 16px;
+  border-radius: var(--md-comp-rich-tooltip-container-shape);
+  background-color: var(--md-comp-rich-tooltip-container-color);
+  color: var(--md-sys-color-on-surface);
+  text-align: start;
+  white-space: normal;
+  pointer-events: auto;
+  @include z-depth("2");
+
+  > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    color: var(--md-sys-color-on-surface);
+    @include typescale("title-small");
+  }
+
+  > p {
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+
+  > :is(nav, form) {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin: 4px -8px -4px 0;
+    padding: 0;
+    background: none;
+    box-shadow: none;
+  }
+}

package/src/{scss → sass}/components/_transitions.scss

@@ -1,7 +1,7 @@
-/*********************
-  Transition Classes
-**********************/
+@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%; }
 
@@ -16,4 +16,4 @@ ul.staggered-list li { opacity: 0; }
   &.scale-in {
     transform: scale(1);
   }
-}
+}