@expressivecss/expressive 0.2.0 → 0.4.0

package/src/sass/components/_collapsible.scss

@@ -1,81 +1,179 @@
 @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 {
-  padding-left: 0;
-  list-style-type: none;
-  border-top: 1px solid var(--md-sys-color-outline-variant);
-  border-right: 1px solid var(--md-sys-color-outline-variant);
-  border-left: 1px solid var(--md-sys-color-outline-variant);
-  margin: $element-top-margin 0 $element-bottom-margin 0;
+  --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");
-}
 
-.collapsible-header {
-  display: flex;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  > 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;
 
-  &:focus {
-    outline: 0
+    &::-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);
+    }
   }
 
-  i {
-    width: 2rem;
-    font-size: 1.6rem;
-    display: inline-block;
-    text-align: center;
-    margin-right: 1rem;
+  details[open] > summary::after {
+    transform: rotate(180deg);
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
-}
 
-.collapsible-header::after {
-  content: '\e5cf';
-  margin-left: .5rem;
-  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
-  font-size: 25px;
-  line-height: .9;
-  -webkit-font-smoothing: antialiased;
-}
+  .collapsible-header-content {
+    flex-grow: 1;
+  }
 
-.active .collapsible-header::after {
-  content: '\e5ce';
-}
+  // 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);
 
-.keyboard-focused .collapsible-header:focus {
-  background-color: rgba(0, 0, 0, 0.12);
-}
+    > * {
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
 
-.collapsible-header-content {
-  flex-grow: 1;
-}
+  details[open] > :not(summary) {
+    grid-template-rows: 1fr;
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  }
 
-.collapsible-body {
-  max-height: 0;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
-  box-sizing: border-box;
-  padding: 0 2rem;
-  overflow: hidden;
-}
+  // 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");
 
-// Popout Collapsible
+    > 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");
+    }
 
-.collapsible.popout {
-  border: none;
-  box-shadow: none;
+    > details + details {
+      border-top: 0;
+    }
 
-  > li {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    // transform: scaleX(.92);
-    margin: 0 24px;
-    transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+    > 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");
+    }
   }
+}
 
-  > li.active {
-    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-    margin: 16px 0;
-    // transform: scaleX(1);
+@media (prefers-reduced-motion: reduce) {
+  .collapsible {
+    --md-comp-collapsible-duration: 0s;
   }
 }

package/src/sass/components/_collection.scss

@@ -1,114 +1,180 @@
 @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 {
-  padding-left: 0;
-  list-style-type: none;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
+  --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;
-  position: relative;
+  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);
+  }
 
-  .collection-item {
-    background-color: transparent;
-    line-height: 1.5rem;
-    padding: 10px 20px;
+  > :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;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
-
-    // Avatar Collection
-    &.avatar {
-      min-height: 84px;
-      padding-left: 72px;
-      position: relative;
-
-      // Don't style circles inside preloader classes.
-      &:not(.circle-clipper) > .circle,
-      :not(.circle-clipper) > .circle {
-        position: absolute;
-        width: 42px;
-        height: 42px;
-        overflow: hidden;
-        left: 15px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      i.circle {
-        font-size: 18px;
-        line-height: 42px;
-        color: #fff;
-        background-color: var(--md-sys-color-shadow);
-        text-align: center;
-      }
-
+    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;
+    }
 
-      .title {
-        font-size: 16px;
-      }
+    > 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;
+    }
 
-      p {
-        margin: 0;
-      }
+    > .title {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      @include typescale("title-medium");
+    }
 
-      .secondary-content {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-      }
+    > p {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("body-medium");
     }
 
-    &:last-child {
-      border-bottom: none;
+    > .title ~ p {
+      grid-row: 2;
     }
 
-    &.active {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
+    > :is(a:last-child, .badge) {
+      grid-column: 3;
+      grid-row: 1 / -1;
+      align-self: center;
+      justify-self: end;
+    }
 
-      .secondary-content {
-        color:  var(--md-sys-color-on-primary);
+    > 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;
       }
     }
   }
 
-  a.collection-item {
-    display: block;
-    transition: .25s;
-    color: var(--md-sys-color-primary);
+  > :is(li, a):has(> .circle) {
+    min-height: 72px;
+  }
 
-    &:not(.active) {
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
+  > 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");
     }
   }
 
-  &.with-header {
-    .collection-header {
-      background-color: transparent;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      padding: 10px 20px;
-    }
+  > 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);
+  }
 
-    .collection-item {
-      padding-left: 30px;
+  > :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);
     }
 
-    .collection-item.avatar {
-      padding-left: 72px;
+    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);
+  }
 
-// Made less specific to allow easier overriding
-.secondary-content {
-  float: right;
-  color: var(--md-sys-color-primary);
+  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/_datepicker.scss

@@ -1,14 +1,5 @@
 @use "../abstracts" as *;
 
-/* Modal */
-// @removed since v2.2.1
-/*.datepicker-modal {
-  max-width: 325px;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  min-width: 300px;
-  max-height: none;
-}*/
-
 .datepicker-container {
   display: flex;
   flex-direction: column;
@@ -27,7 +18,7 @@
     display: flex;
   }
 
-  .select-wrapper {
+  .field:has(> .hide-select) {
     input {
       height: 49px;
       margin: 4px 0 0 0;
@@ -50,11 +41,6 @@
     }
   }
 
-  .select-dropdown {
-    padding: 0;
-    vertical-align: middle;
-  }
-
   .select-year input,
   .select-month input {
     background-color: transparent;