@expressivecss/expressive 0.4.0 → 0.5.0

package/src/sass/components/_modal.scss

@@ -1,190 +0,0 @@
-@use "../abstracts" as *;
-
-// Dialogs.
-//
-// Anatomy is the HTML. A <dialog> is a basic dialog. A heading is the
-// headline, a <p> (or a wrapping <div>) is supporting text, and the last
-// child <form method="dialog"> or <nav> is the action row.
-//
-// Tokens follow https://m3.material.io/components/dialogs/specs
-//   container    surface, 28dp corners, 280–560dp, elevation 3
-//   headline     headline-small / on-surface
-//   body         body-medium / on-surface-variant
-//   icon         24dp, on-secondary
-//   actions      end-aligned, 8dp gap
-//   scrim        32% + 12px blur
-//   padding      24dp
-
-dialog {
-  --md-comp-basic-dialog-container-color: var(--md-sys-color-surface);
-  --md-comp-basic-dialog-container-shape: 28px;
-  --md-comp-basic-dialog-container-min-width: 280px;
-  --md-comp-basic-dialog-container-max-width: 560px;
-  --md-comp-basic-dialog-sheet-width: 400px;
-  --md-comp-basic-dialog-scrim-blur: 12px;
-
-  box-sizing: border-box;
-  width: min(var(--md-comp-basic-dialog-container-max-width), calc(100% - 48px));
-  min-width: min(var(--md-comp-basic-dialog-container-min-width), calc(100% - 48px));
-  max-height: min(70vh, calc(100% - 48px));
-  margin: auto;
-  padding: 0;
-  border: none;
-  border-radius: var(--md-comp-basic-dialog-container-shape);
-  background-color: var(--md-comp-basic-dialog-container-color);
-  color: var(--md-sys-color-on-surface);
-  outline: none;
-  @include z-depth("3");
-
-  &::backdrop {
-    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
-    backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
-  }
-}
-
-// showModal() puts the dialog in the top layer but does not lock the
-// document scroller. :modal is the modal-only match — a modeless
-// dialog.show() must not freeze the page.
-html:has(dialog:modal) {
-  overflow: hidden;
-}
-
-dialog[open] {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-// Optional leading icon (M3 basic dialog).
-dialog > i:first-child {
-  flex: 0 0 auto;
-  align-self: center;
-  margin: 24px 24px 0;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  color: var(--md-sys-color-secondary);
-}
-
-dialog > :is(h1, h2, h3, h4, h5, h6) {
-  flex: 0 0 auto;
-  margin: 0;
-  padding: 24px 24px 16px;
-  font-family: var(--md-sys-typescale-headline-small-font-family-name);
-  font-size: var(--md-sys-typescale-headline-small-font-size);
-  font-weight: var(--md-sys-typescale-headline-small-font-weight);
-  line-height: var(--md-sys-typescale-headline-small-line-height);
-  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
-  color: var(--md-sys-color-on-surface);
-}
-
-dialog > i:first-child + :is(h1, h2, h3, h4, h5, h6) {
-  padding-top: 16px;
-  text-align: center;
-}
-
-dialog > p,
-dialog > div {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  margin: 0;
-  padding: 0 24px 16px;
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  line-height: var(--md-sys-typescale-body-medium-line-height);
-  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-  color: color-mix(in oklab, currentColor 72%, transparent);
-}
-
-dialog > :is(h1, h2, h3, h4, h5, h6) + p {
-  padding-top: 0;
-}
-
-// Action row. form[method=dialog] is the native close mechanism.
-dialog > :is(form, nav):last-child {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  flex: 0 0 auto;
-  margin: 0;
-  padding: 8px 16px 16px;
-  border: 0;
-  background: none;
-}
-
-// Full-screen (M3). Takes the viewport; no corners.
-// UA `dialog:modal` sets max-width: calc(100% - 2em - 6px). Without
-// clearing it, width: 100% is capped and a strip of scrim shows on the
-// right. Bottom sheet already overrides this.
-dialog.max {
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  min-width: 0;
-  max-height: none;
-  margin: 0;
-  border-radius: 0;
-}
-
-// Sheets. Docked to one edge; the inner corners keep the dialog shape,
-// the edge against the viewport is square. `left` / `right` also float
-// via the helper utilities (`!important`), so sheets reset that.
-dialog.bottom,
-dialog.bottom-sheet {
-  width: 100%;
-  min-width: 0;
-  max-width: none;
-  max-height: 50%;
-  margin: auto 0 0;
-  border-radius: var(--md-comp-basic-dialog-container-shape)
-    var(--md-comp-basic-dialog-container-shape) 0 0;
-}
-
-dialog.top,
-dialog.top-sheet {
-  width: 100%;
-  min-width: 0;
-  max-width: none;
-  max-height: 50%;
-  margin: 0 0 auto;
-  border-radius: 0 0 var(--md-comp-basic-dialog-container-shape)
-    var(--md-comp-basic-dialog-container-shape);
-}
-
-dialog.left,
-dialog.left-sheet,
-dialog.right,
-dialog.right-sheet {
-  float: none !important;
-  width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
-  max-width: none;
-  height: auto;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  margin: 0;
-  inset-block: 0;
-}
-
-dialog.left,
-dialog.left-sheet {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  border-radius: 0 var(--md-comp-basic-dialog-container-shape)
-    var(--md-comp-basic-dialog-container-shape) 0;
-}
-
-dialog.right,
-dialog.right-sheet {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-  border-radius: var(--md-comp-basic-dialog-container-shape) 0 0
-    var(--md-comp-basic-dialog-container-shape);
-}

package/src/sass/components/_pushpin.scss

@@ -1,11 +0,0 @@
-@use "../abstracts" as *;
-
-// Paired with components/pushpin.ts, which swaps these classes on scroll.
-
-.pin-top, .pin-bottom {
-  position: relative;
-}
-
-.pinned {
-  position: fixed !important;
-}

package/src/sass/components/_tapTarget.scss

@@ -1,187 +0,0 @@
-@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 {
-  --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;
-  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;
-  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:is(.open, :popover-open) {
-  visibility: visible;
-  pointer-events: none;
-  transition-delay: 0s;
-
-  .tap-target {
-    transform: scale(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;
-  }
-}
-
-.tap-target {
-  position: absolute;
-  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 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;
-  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%;
-  pointer-events: none;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: 50%;
-    background-color: var(--md-sys-color-surface);
-  }
-
-  &::before {
-    transform: scale(0);
-    transition: transform var(--md-comp-tap-target-duration)
-      var(--md-comp-tap-target-easing);
-  }
-
-  &::after {
-    visibility: hidden;
-    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 {
-  z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
-}
-
-@include bp-down("small") {
-  .tap-target-wrapper {
-    --md-comp-tap-target-size: 360px;
-  }
-}
-
-@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;
-  }
-}