@expressivecss/expressive 0.4.0 → 0.6.0

package/src/sass/components/_collapsible.scss

@@ -1,179 +0,0 @@
-@use "../abstracts" as *;
-
-// Collapsible. Anatomy is the HTML: a .collapsible of <details> with
-// <summary> headers. Same `name` on each <details> is an accordion;
-// omit it (or add .expandable) so several can stay open. The `open`
-// attribute is the preselected section.
-//
-// JS wraps non-summary children in a div so height can clip.
-//
-// Tokens:
-//   --md-comp-collapsible-shape              12px
-//   --md-comp-collapsible-container-color    surface
-//   --md-comp-collapsible-outline-color      outline-variant
-//   --md-comp-collapsible-header-padding     1rem
-//   --md-comp-collapsible-body-padding       0 1rem
-//   --md-comp-collapsible-duration           500ms
-//   --md-comp-collapsible-easing-open        ease-in-out cubic
-//   --md-comp-collapsible-easing-close       ease-in-out cubic
-//   --md-comp-collapsible-icon-size          24px
-//   --md-comp-collapsible-popout-inset       24px
-//   --md-comp-collapsible-popout-gap         16px
-//
-// Nest descendants inside this block. A list-suffixed selector only
-// attaches the suffix to the last item (same bug as the icon sizes).
-
-.collapsible {
-  --md-comp-collapsible-shape: 12px;
-  --md-comp-collapsible-container-color: var(--md-sys-color-surface);
-  --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
-  --md-comp-collapsible-header-padding: 1rem;
-  --md-comp-collapsible-body-padding: 0 1rem;
-  --md-comp-collapsible-duration: 500ms;
-  --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
-  --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
-  --md-comp-collapsible-icon-size: 24px;
-  --md-comp-collapsible-popout-inset: 24px;
-  --md-comp-collapsible-popout-gap: 16px;
-
-  box-sizing: border-box;
-  padding: 0;
-  margin: $element-top-margin 0 $element-bottom-margin;
-  list-style: none;
-  overflow: hidden;
-  border: 1px solid var(--md-comp-collapsible-outline-color);
-  border-radius: var(--md-comp-collapsible-shape);
-  background-color: var(--md-comp-collapsible-container-color);
-  color: var(--md-sys-color-on-surface);
-  @include z-depth("1");
-
-  > details + details {
-    border-top: 1px solid var(--md-comp-collapsible-outline-color);
-  }
-
-  summary {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: var(--md-comp-collapsible-header-padding);
-    border: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    font-weight: inherit;
-    line-height: 1.5;
-    text-align: start;
-    list-style: none;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    @include focus-visible;
-
-    > i {
-      width: 2rem;
-      margin-right: 1rem;
-      font-size: 1.6rem;
-      line-height: 1;
-      text-align: center;
-    }
-
-    &::after {
-      content: "expand_more";
-      flex-shrink: 0;
-      margin-inline-start: auto;
-      font-family: var(--md-icon-font);
-      font-size: var(--md-comp-collapsible-icon-size);
-      font-variation-settings:
-        "FILL" var(--md-icon-fill),
-        "wght" var(--md-icon-weight),
-        "GRAD" var(--md-icon-grade),
-        "opsz" var(--md-icon-optical-size);
-      line-height: 1;
-      -webkit-font-smoothing: antialiased;
-      transition: transform var(--md-comp-collapsible-duration)
-        var(--md-comp-collapsible-easing-close);
-    }
-  }
-
-  details[open] > summary::after {
-    transform: rotate(180deg);
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
-  }
-
-  .collapsible-header-content {
-    flex-grow: 1;
-  }
-
-  // JS wraps non-summary children. Text stays painted and is clipped
-  // as the row shrinks.
-  details > :not(summary) {
-    display: grid;
-    grid-template-rows: 0fr;
-    box-sizing: border-box;
-    padding: var(--md-comp-collapsible-body-padding);
-    overflow: hidden;
-    transition: grid-template-rows var(--md-comp-collapsible-duration)
-      var(--md-comp-collapsible-easing-close);
-
-    > * {
-      min-height: 0;
-      overflow: hidden;
-    }
-  }
-
-  details[open] > :not(summary) {
-    grid-template-rows: 1fr;
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
-  }
-
-  // UA `display: none` on closed details children. Keep our wrapper as
-  // a grid so 0fr can clip instead of popping the copy away.
-  details:not([open]) > :not(summary) {
-    display: grid;
-  }
-
-  &.no-icon summary::after {
-    content: none;
-  }
-
-  &.popout {
-    overflow: visible;
-    border: 0;
-    background: transparent;
-    @include z-depth("0");
-
-    > details {
-      margin-inline: var(--md-comp-collapsible-popout-inset);
-      overflow: hidden;
-      border: 0;
-      border-radius: var(--md-comp-collapsible-shape);
-      background-color: var(--md-comp-collapsible-container-color);
-      transition: margin var(--md-comp-collapsible-duration)
-        var(--md-comp-collapsible-easing-close);
-      @include z-depth("1");
-    }
-
-    > details + details {
-      border-top: 0;
-    }
-
-    > details[open] {
-      margin-block: var(--md-comp-collapsible-popout-gap);
-      margin-inline: 0;
-      transition-timing-function: var(--md-comp-collapsible-easing-open);
-      @include z-depth("2");
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .collapsible {
-    --md-comp-collapsible-duration: 0s;
-  }
-}

package/src/sass/components/_collection.scss

@@ -1,180 +0,0 @@
-@use "../abstracts" as *;
-
-// Collection. Anatomy is the HTML: a .collection of list items. A heading
-// as the first child of an item is the header. An <a> may be the item
-// (old <div class="collection"> markup) or live inside an <li>.
-//
-// .flush drops the boxed outline.
-//
-// Tokens:
-//   --md-comp-collection-shape              12px
-//   --md-comp-collection-container-color    surface
-//   --md-comp-collection-outline-color      outline-variant
-//   --md-comp-collection-item-height        56px
-//   --md-comp-collection-item-padding       16px
-//   --md-comp-collection-avatar-size        40px
-//
-// Nest descendants inside this block. A list-suffixed selector only
-// attaches the suffix to the last item (same bug as the icon sizes).
-
-.collection {
-  --md-comp-collection-shape: 12px;
-  --md-comp-collection-container-color: var(--md-sys-color-surface);
-  --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
-  --md-comp-collection-item-height: 56px;
-  --md-comp-collection-item-padding: 16px;
-  --md-comp-collection-avatar-size: 40px;
-
-  box-sizing: border-box;
-  padding: 0;
-  margin: $element-top-margin 0 $element-bottom-margin;
-  overflow: hidden;
-  list-style: none;
-  border: 1px solid var(--md-comp-collection-outline-color);
-  border-radius: var(--md-comp-collection-shape);
-  background-color: var(--md-comp-collection-container-color);
-  color: var(--md-sys-color-on-surface);
-
-  > * + * {
-    border-top: 1px solid var(--md-comp-collection-outline-color);
-  }
-
-  > :is(li, a) {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto;
-    align-items: center;
-    column-gap: 16px;
-    box-sizing: border-box;
-    min-height: var(--md-comp-collection-item-height);
-    margin: 0;
-    padding: 8px var(--md-comp-collection-item-padding);
-    background-color: transparent;
-    color: inherit;
-    text-decoration: none;
-    transition: background-color 0.2s ease-out;
-
-    > :is(img, i).circle {
-      grid-column: 1;
-      grid-row: 1 / -1;
-      box-sizing: border-box;
-      width: var(--md-comp-collection-avatar-size);
-      height: var(--md-comp-collection-avatar-size);
-      overflow: hidden;
-      object-fit: cover;
-    }
-
-    > i.circle {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      line-height: 1;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      text-align: center;
-    }
-
-    > .title {
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      @include typescale("title-medium");
-    }
-
-    > p {
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      margin: 0;
-      color: var(--md-sys-color-on-surface-variant);
-      @include typescale("body-medium");
-    }
-
-    > .title ~ p {
-      grid-row: 2;
-    }
-
-    > :is(a:last-child, .badge) {
-      grid-column: 3;
-      grid-row: 1 / -1;
-      align-self: center;
-      justify-self: end;
-    }
-
-    > a:not(.badge) {
-      grid-column: 1 / -1;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      min-width: 0;
-      color: inherit;
-      text-decoration: none;
-
-      > .badge {
-        margin-inline-start: auto;
-      }
-    }
-  }
-
-  > :is(li, a):has(> .circle) {
-    min-height: 72px;
-  }
-
-  > li:has(> :is(h1, h2, h3, h4, h5, h6)) {
-    min-height: 0;
-    padding-block: 12px;
-
-    > :is(h1, h2, h3, h4, h5, h6) {
-      grid-column: 1 / -1;
-      margin: 0;
-      @include typescale("title-medium");
-    }
-  }
-
-  > a,
-  > li > a {
-    @include focus-visible;
-  }
-
-  > a:hover,
-  > li:has(> a:hover) {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
-  }
-
-  > :is(.active, [aria-current="page"]),
-  > li:has(> [aria-current="page"]) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-
-    > a:last-child {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-
-    span.badge:not(.new) {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-  }
-
-  > :is(.disabled, [aria-disabled="true"]) {
-    pointer-events: none;
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-  }
-
-  span.badge {
-    float: none;
-    margin-block: 0;
-    margin-inline-start: auto;
-  }
-
-  &.flush {
-    border: 0;
-    border-radius: 0;
-  }
-}
-
-.collapsible .collection {
-  margin: 0;
-  border: none;
-  border-radius: 0;
-}

package/src/sass/components/_dropdown.scss

@@ -1,225 +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.
-//
-// Tokens follow https://m3.material.io/components/menus/specs
-// plus the 1rem surface / stadium items used by fields and select.
-//   container    surface, 1rem corners, elevation 2, 112–280dp
-//   item         48dp, 2rem corners, label-large / on-surface, 12dp inset
-//   leading icon 24dp, on-surface-variant
-//   divider      1dp outline-variant
-//   state layer  8% hover / 10% selected
-
-$_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 6l6 6-6 6'/%3E%3C/svg%3E");
-
-[popover] {
-  outline: none;
-  padding: 0;
-  border: none;
-}
-
-menu[id] {
-  --md-comp-menu-container-color: var(--md-sys-color-surface);
-  --md-comp-menu-container-shape: 1rem;
-  --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 {
-    box-sizing: border-box;
-    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;
-
-      &:hover,
-      &:focus {
-        background: none;
-      }
-      @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, .optgroup) {
-    width: calc(100% - 16px);
-    margin-inline: 8px;
-    border-radius: 2rem;
-  }
-
-  > 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;
-  }
-
-  // Nested flyouts sit outside the list box; do not clip them.
-  &:has(> li > menu) {
-    overflow: visible;
-  }
-
-  li:has(> menu) {
-    position: relative;
-  }
-
-  li:has(> menu) > :is(a, button, span)::after {
-    content: "";
-    flex: 0 0 24px;
-    width: 24px;
-    height: 24px;
-    margin-inline-start: auto;
-    background-color: var(--md-sys-color-on-surface-variant);
-    mask: $_menu-chevron center / 24px no-repeat;
-  }
-}
-
-// Nested menu. Optional, desktop-first. No second Dropdown instance —
-// a <menu> inside an <li> is a flyout. Hover / :focus-within on fine
-// pointers; .open is the tap / keyboard switch.
-menu[id] li > menu {
-  --md-comp-menu-container-color: var(--md-sys-color-surface);
-  --md-comp-menu-container-shape: 1rem;
-  --md-comp-menu-item-container-height: 48px;
-
-  box-sizing: border-box;
-  display: none;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 100%;
-  z-index: 1;
-  min-width: 112px;
-  margin: 0;
-  padding: 8px 0;
-  list-style: none;
-  overflow: visible;
-  opacity: 1;
-  transform: none;
-  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 {
-    box-sizing: border-box;
-    min-height: var(--md-comp-menu-item-container-height);
-  }
-
-  > li:not(.disabled, .divider, .optgroup) {
-    width: calc(100% - 16px);
-    margin-inline: 8px;
-    border-radius: 2rem;
-  }
-
-  > li:not(.disabled, .divider):hover,
-  > li.active {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
-  }
-
-  > li > :is(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);
-    padding: 0 12px;
-    color: var(--md-sys-color-on-surface);
-    text-decoration: none;
-    @include typescale("label-large");
-    font-family: $font-stack;
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  menu[id] li:is(:hover, :focus-within) > menu {
-    display: block;
-  }
-}
-
-menu[id] li.open > menu {
-  display: block;
-}
-
-menu[id] li.submenu-start > menu {
-  inset-inline-start: auto;
-  inset-inline-end: 100%;
-}
-
-body.keyboard-focused {
-  menu[id] > li:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
-  }
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-}