@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

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

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 .carousel {
   --carousel-height: 400px;
 
@@ -85,9 +87,9 @@
     }
   }
 
-  // Materialbox compatibility
-  &.scrolling .carousel-item .materialboxed,
-  .carousel-item:not(.active) .materialboxed {
+  // Lightbox compatibility
+  &.scrolling .carousel-item .lightboxed,
+  .carousel-item:not(.active) .lightboxed {
     pointer-events: none;
   }
 }

package/src/sass/components/_chips.scss

@@ -0,0 +1,140 @@
+@use "../abstracts" as *;
+
+.chip {
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+  margin: 0;
+  height: 32px;
+  padding-left: var(--padding);
+  padding-right: var(--padding);  
+  font-size: var(--font-size);
+  font-weight: 500;    
+  border-radius: 8px;
+  align-items: center;
+  user-select: none;
+  vertical-align: top;
+
+  &:focus {
+    outline: none;
+    background-color: var(--md-sys-color-primary);
+    color:  var(--md-sys-color-on-primary);
+  }
+}
+
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
+
+.chip > img {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.chip .close {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+}
+
+.chip .close:hover {
+  background-color: #8888;
+}
+
+//--------------------------
+
+.chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  border: none;
+  box-shadow: none;
+  margin: 0 0 8px 0;
+  padding: 4px;
+  // min-height: 45px;
+  outline: none;
+  transition: all .3s;
+
+  &.focus {
+    border-bottom: 1px solid var(--md-sys-color-primary);
+    box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+  }
+
+  &.input-field {
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+
+    &:hover {
+      cursor: text;
+    }
+  }
+
+  input:not([type]):not(.browser-default).input {
+    background: none;
+    border: 0;
+    color: var(--md-sys-color-on-background);
+    display: inline-block;
+    font-size: 16px;
+    // height: 32px;
+    // line-height: 32px;
+    height: 32px;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    width: 120px;
+    width: fit-content;
+    min-width: 100px;
+    max-width: 200px;
+
+    &:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  // Autocomplete
+  .autocomplete-content {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Form prefix
+.prefix ~ .chips {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+
+// Form suffix
+.suffix ~ .chips {
+  margin-right: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+
+.chips:empty ~ label  {
+  font-size: 0.8rem;
+  transform: translateY(-140%);
+}

package/src/sass/components/_collapsible.scss

@@ -0,0 +1,81 @@
+@use "../abstracts" as *;
+
+.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;
+  @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);
+
+  &:focus {
+    outline: 0
+  }
+
+  i {
+    width: 2rem;
+    font-size: 1.6rem;
+    display: inline-block;
+    text-align: center;
+    margin-right: 1rem;
+  }
+}
+
+.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;
+}
+
+.active .collapsible-header::after {
+  content: '\e5ce';
+}
+
+.keyboard-focused .collapsible-header:focus {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.collapsible-header-content {
+  flex-grow: 1;
+}
+
+.collapsible-body {
+  max-height: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  box-sizing: border-box;
+  padding: 0 2rem;
+  overflow: hidden;
+}
+
+// Popout Collapsible
+
+.collapsible.popout {
+  border: none;
+  box-shadow: none;
+
+  > 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);
+  }
+
+  > 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);
+  }
+}

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

@@ -1,4 +1,4 @@
-@use '../foundation/variables' as *;
+@use "../abstracts" as *;
 
 .collection {
   padding-left: 0;
@@ -38,7 +38,7 @@
         font-size: 18px;
         line-height: 42px;
         color: #fff;
-        background-color: var(--md-sys-color-shadow-light);
+        background-color: var(--md-sys-color-shadow);
         text-align: center;
       }
 

package/src/{scss/components/_date-picker.scss → sass/components/_datepicker.scss}

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 /* Modal */
 // @removed since v2.2.1
 /*.datepicker-modal {
@@ -56,14 +58,24 @@
   .select-year input,
   .select-month input {
     background-color: transparent;
+    // The text-input rules give every input `padding: 0 16px`, and these are
+    // border-box - which left the 50px year control 18px of content box and
+    // clipped every four-digit year. Nothing here needs the padding: the text
+    // is centred and the caret is hidden just above.
+    padding: 0;
   }
 
+  // An <input> cannot size to its own value in CSS - `width: auto` follows the
+  // `size` attribute, not the text, and `field-sizing: content` is still
+  // Chrome-only - so these stay explicit. In `ch` rather than px so they track
+  // the font instead of a measurement taken against one particular font.
+  // Widest label is "September".
   .select-year input {
-    width: 50px;
+    width: 6ch;
   }
 
   .select-month input {
-    width: 80px;
+    width: 12ch;
   }
 
   .month-prev,
@@ -72,11 +84,9 @@
     align-items: center;
   }
 
-  .month-prev,
-  .month-next {
-    & > svg {
-      fill: var(--md-sys-color-on-surface-variant);
-    }
+  .month-prev > svg,
+  .month-next > svg {
+    fill: var(--md-sys-color-on-surface-variant);
   }
 }
 
@@ -96,7 +106,7 @@
   // background-color: var(--md-sys-color-primary);
   // color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
-  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
+  border-bottom: 1px solid var(--md-sys-color-surface-variant);
   font-weight: 500;
 
   .year-text {
@@ -165,44 +175,42 @@
   }
 }
 
-.datepicker-day {
-  // @todo
-  &.has-event {}
-  // @todo
-  &.is-inrange {}
-  // @todo
-  &.is-startrange {}
-  // @todo
-  &.is-endrange {}
-
-  &.is-daterange-start,
-  &.is-daterange-end,
-  &.is-daterange {
-    position: relative;
-
-    &:before {
-      position: absolute;
-      top: 5px;
-      width: 100%;
-      height: 34px;
-      content: '';
-      background-color: var(--md-sys-color-primary-container);
-      z-index: 0;
-    }
-  }
+// @todo
+.datepicker-day.has-event {}
+// @todo
+.datepicker-day.is-inrange {}
+// @todo
+.datepicker-day.is-startrange {}
+// @todo
+.datepicker-day.is-endrange {}
+
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
+  position: relative;
 
-  &.is-daterange-start:before,
-  &.is-daterange-end:before {
-    width: 50%;
+  &:before {
+    position: absolute;
+    top: 5px;
+    width: 100%;
+    height: 34px;
+    content: '';
+    background-color: var(--md-sys-color-primary-container);
+    z-index: 0;
   }
+}
 
-  &.is-daterange-start:before {
-    left: 50%;
-  }
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
+  width: 50%;
+}
 
-  &.is-daterange .datepicker-day-button:before {
-    background-color: var(--md-sys-color-primary-container);
-  }
+.datepicker-day.is-daterange-start:before {
+  left: 50%;
+}
+
+.datepicker-day.is-daterange .datepicker-day-button:before {
+  background-color: var(--md-sys-color-primary-container);
 }
 
 .datepicker-day-button {
@@ -220,7 +228,7 @@
   z-index: 1;
 
   &:hover {
-    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+    background-color: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
   }
 
   &:focus {
@@ -265,4 +273,3 @@
   color: var(--md-sys-color-error);
 }
 
-

package/src/sass/components/_docked-display.scss

@@ -0,0 +1,11 @@
+@use "../abstracts" as *;
+
+// Container created by src/ts/plugins/dockedDisplayPlugin.ts, which positions
+// and animates it inline. Only the resting state belongs here.
+
+.display-docked {
+  position: absolute;
+  opacity: 0;
+  z-index: 9999;
+  visibility: hidden;
+}

package/src/sass/components/_dropdown.scss

@@ -0,0 +1,129 @@
+@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/{scss/components/_material-icons.scss → sass/components/_icons-material-design.scss}

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 /* This is needed for some mobile phones to display the Google Icon font properly */
 .material-icons, .material-symbols-outlined,
 .material-symbols-rounded, .material-symbols-sharp {

package/src/sass/components/_index.scss

@@ -0,0 +1,35 @@
+// One line per component. Order is cascade order, so keep related widgets
+// together and append new components at the end unless order matters.
+
+@forward "buttons";
+@forward "collection";
+@forward "badges";
+@forward "icons-material-design";
+@forward "navbar";
+@forward "toolbar";
+@forward "transitions";
+@forward "cards";
+@forward "toast";
+@forward "tabs";
+@forward "tooltip";
+@forward "dropdown";
+@forward "modal";
+@forward "collapsible";
+@forward "chips";
+@forward "lightbox";
+@forward "parallax";
+@forward "pushpin";
+@forward "docked-display";
+@forward "page-footer";
+@forward "forms";
+@forward "table_of_contents";
+@forward "sidenav";
+@forward "preloader";
+@forward "slider";
+@forward "carousel";
+@forward "tapTarget";
+@forward "pulse";
+@forward "datepicker";
+@forward "timepicker";
+@forward "breadcrumb";
+@forward "pagination";

package/src/{scss/components/_material-box.scss → sass/components/_lightbox.scss}

@@ -1,9 +1,11 @@
-.materialboxed {
+@use "../abstracts" as *;
+
+.lightboxed {
   display: block;
   cursor: zoom-in;
   position: relative;
   transition: opacity .4s;
-  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 
   &:hover {
     &:not(.active) {
@@ -15,7 +17,7 @@
   }
 }
 
-#materialbox-overlay {
+#lightbox-overlay {
   position:fixed;
   top: 0;
   right: 0;
@@ -26,7 +28,7 @@
   will-change: opacity;
 }
 
-.materialbox-caption {
+.lightbox-caption {
   position: fixed;
   display: none;
   color: var(--md-sys-color-on-background);