@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/components/_dropdown.scss

@@ -1,129 +0,0 @@
-@use "../abstracts" as *;
-
-// Menus.
-//
-// Anatomy is the HTML. A <menu id> is the surface; each <li> is an item,
-// an <hr> is a divider, and an <i> inside the item is the leading icon.
-// The trigger is still .dropdown-trigger[data-target] — that is the JS
-// contract. .dropdown-content is an alias (FormSelect and Autocomplete
-// still generate it).
-//
-// Tokens follow https://m3.material.io/components/menus/specs
-//   container    surface, 4dp corners, elevation 2, 112–280dp
-//   item         48dp, label-large / on-surface, 12dp inset
-//   leading icon 24dp, on-surface-variant
-//   divider      1dp outline-variant
-//   state layer  8% hover / 10% selected
-
-[popover] {
-  outline: none;
-  padding: 0;
-  border: none;
-}
-
-.dropdown-content,
-menu[id] {
-  --md-comp-menu-container-color: var(--md-sys-color-surface);
-  --md-comp-menu-container-shape: 4px;
-  --md-comp-menu-item-container-height: 48px;
-
-  box-sizing: border-box;
-  display: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 9999;
-  min-width: 112px;
-  margin: 0;
-  padding: 8px 0;
-  list-style: none;
-  overflow-y: auto;
-  opacity: 0;
-  user-select: none;
-  transform-origin: 0 0;
-  background-color: var(--md-comp-menu-container-color);
-  border-radius: var(--md-comp-menu-container-shape);
-  color: var(--md-sys-color-on-surface);
-  @include z-depth("2");
-
-  > li {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    min-height: var(--md-comp-menu-item-container-height);
-    cursor: pointer;
-    text-align: left;
-
-    > a,
-    > button,
-    > span {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      box-sizing: border-box;
-      width: 100%;
-      min-height: var(--md-comp-menu-item-container-height);
-      margin: 0;
-      padding: 0 12px;
-      border: 0;
-      background: none;
-      color: var(--md-sys-color-on-surface);
-      text-decoration: none;
-      cursor: pointer;
-      @include typescale("label-large");
-      font-family: $font-stack;
-    }
-
-    > a > i,
-    > button > i,
-    > i {
-      flex: 0 0 24px;
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-  }
-
-  > li:not(.disabled, .divider):hover,
-  > li.active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
-  }
-
-  > li.disabled {
-    pointer-events: none;
-    opacity: 0.38;
-  }
-
-  > hr,
-  > li.divider {
-    display: block;
-    width: 100%;
-    height: 1px;
-    min-height: 0;
-    margin: 8px 0;
-    padding: 0;
-    border: 0;
-    background-color: var(--md-sys-color-outline-variant);
-    cursor: default;
-  }
-}
-
-body.keyboard-focused {
-  .dropdown-content > li:focus,
-  menu[id] > li:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
-  }
-}
-
-.input-field.col .dropdown-content [type="checkbox"] + label {
-  top: 1px;
-  left: 0;
-  height: 18px;
-  transform: none;
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-}

package/src/sass/components/_modal.scss

@@ -1,208 +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. .modal and
-// .modal-header / .modal-content / .modal-footer stay as aliases.
-//
-// 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,
-.modal {
-  --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],
-.modal[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),
-.modal-header {
-  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,
-.modal-content {
-  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,
-.modal-header + .modal-content {
-  padding-top: 0;
-}
-
-// Action row. form[method=dialog] is the native close mechanism.
-dialog > :is(form, nav):last-child,
-.modal-footer {
-  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;
-}
-
-.modal-close {
-  cursor: pointer;
-}
-
-// 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,
-.modal.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,
-.modal.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,
-.modal.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,
-.modal.left-sheet,
-dialog.right,
-dialog.right-sheet,
-.modal.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,
-.modal.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,
-.modal.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,191 +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
-//
-// .feature-discovery is an alias of .tap-target.
-
-.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,
-  .feature-discovery {
-    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,
-.feature-discovery {
-  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;
-  }
-}