@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/components/_carousel.scss

@@ -0,0 +1,93 @@
+.carousel {
+  --carousel-height: 400px;
+
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: var(--carousel-height);
+  perspective: 500px;
+  transform-style: preserve-3d;
+  transform-origin: 0% 50%;
+
+  &.carousel-slider {
+    top: 0;
+    left: 0;
+
+    .carousel-fixed-item {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 20px;
+      z-index: 1;
+
+      &.with-indicators {
+        bottom: 68px;
+      }
+    }
+
+    .carousel-item {
+      width: 100%;
+      height: 100%;
+      min-height: var(--carousel-height);
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      h2 {
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+      }
+
+      p {
+        font-size: 15px;
+      }
+    }
+  }
+
+  .carousel-item {
+    visibility: hidden;
+    width: calc(var(--carousel-height) * 0.5);
+    height: calc(var(--carousel-height) * 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    & > img {
+      width: 100%;
+    }
+  }
+
+  .indicators {
+    padding-left: 0;
+    list-style-type: none;
+    position: absolute;
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+
+    .indicator-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 8px;
+      width: 8px;
+      margin: 24px 4px;
+      background-color: rgba(255, 255, 255, 0.45);
+      transition: background-color .3s;
+      border-radius: 50%;
+
+      &.active {
+        background-color: var(--md-ref-palette-primary100);
+      }
+    }
+  }
+
+  // Materialbox compatibility
+  &.scrolling .carousel-item .materialboxed,
+  .carousel-item:not(.active) .materialboxed {
+    pointer-events: none;
+  }
+}

package/src/scss/components/_chips.scss

@@ -0,0 +1,147 @@
+@use '../utilities/colors' as *;
+
+// M3 Expressive: Chip component tokens
+.chip {
+  // -- Component tokens --
+  --md-comp-chip-font-size: 14px;
+  --md-comp-chip-icon-size: 18px;
+  --md-comp-chip-padding: 8px;
+  --md-comp-chip-height: 32px;
+  --md-comp-chip-shape: var(--md-sys-shape-corner-small, 8px);
+
+  // Legacy aliases
+  --font-size: var(--md-comp-chip-font-size);
+  --font-size-icon: var(--md-comp-chip-icon-size);
+  --padding: var(--md-comp-chip-padding);
+
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.09));
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+  margin: 0;
+  height: var(--md-comp-chip-height);
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  font-size: var(--font-size);
+  font-weight: 500;
+  border-radius: var(--md-comp-chip-shape);
+  align-items: center;
+  user-select: none;
+  vertical-align: top;
+  transition: background-color var(--md-sys-motion-duration-short3, 0.15s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+
+  &:focus {
+    outline: none;
+    background-color: var(--md-sys-color-primary);
+    color:  var(--md-sys-color-on-primary);
+  }
+
+  &.outlined {
+    background-color: transparent;
+    border-color: var(--md-sys-color-outline);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  & > img {
+    margin: 0;
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    border-radius: var(--md-sys-shape-corner-full, 12px);
+  }
+
+  & > .material-icons {
+    font-size: var(--font-size-icon);
+    @extend .on-surface-variant-text;
+  }
+
+  .close {
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    }
+  }
+}
+
+//--------------------------
+
+.chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  border: none;
+  box-shadow: none;
+  margin: 0 0 8px 0;
+  padding: 4px;
+  outline: none;
+  transition: all var(--md-sys-motion-duration-medium2, 0.3s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+
+  &.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;
+    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/scss/components/_collapsible.scss

@@ -0,0 +1,84 @@
+@use '../foundation/variables' as *;
+@use '../utilities/colors' as *;
+@use '../utilities/elevation' 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;
+  @extend .z-depth-1;
+
+  // Popout 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);
+
+      &.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);
+      }
+    }
+  }
+}
+
+.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
+  }
+
+  &::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;
+  }
+
+  i {
+    width: 2rem;
+    font-size: 1.6rem;
+    display: inline-block;
+    text-align: center;
+    margin-right: 1rem;
+  }
+
+  // Active state — icon change (parent context nesting)
+  .active &::after {
+    content: '\e5ce';
+  }
+
+  // Keyboard focused state (parent context nesting)
+  .keyboard-focused &: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;
+}

package/src/scss/components/_collection.scss

@@ -0,0 +1,114 @@
+@use '../foundation/variables' as *;
+
+.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;
+  overflow: hidden;
+  position: relative;
+
+  .collection-item {
+    background-color: transparent;
+    line-height: 1.5rem;
+    padding: 10px 20px;
+    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-light);
+        text-align: center;
+      }
+
+
+      .title {
+        font-size: 16px;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      .secondary-content {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.active {
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
+
+      .secondary-content {
+        color:  var(--md-sys-color-on-primary);
+      }
+    }
+  }
+
+  a.collection-item {
+    display: block;
+    transition: .25s;
+    color: var(--md-sys-color-primary);
+
+    &:not(.active) {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+
+  &.with-header {
+    .collection-header {
+      background-color: transparent;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      padding: 10px 20px;
+    }
+
+    .collection-item {
+      padding-left: 30px;
+    }
+
+    .collection-item.avatar {
+      padding-left: 72px;
+    }
+  }
+
+}
+
+// Made less specific to allow easier overriding
+.secondary-content {
+  float: right;
+  color: var(--md-sys-color-primary);
+}
+
+.collapsible .collection {
+  margin: 0;
+  border: none;
+}

package/src/scss/components/_date-picker.scss

@@ -0,0 +1,268 @@
+/* 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;
+  max-width: 325px;
+  padding: 0;
+  background-color: var(--md-sys-color-surface);
+}
+
+.datepicker-controls {
+  display: flex;
+  justify-content: space-between;
+  width: 280px;
+  margin: 0 auto;
+
+  .selects-container {
+    display: flex;
+  }
+
+  .select-wrapper {
+    input {
+      height: 49px;
+      margin: 4px 0 0 0;
+      border-bottom: none;
+      border-radius: 4px;
+      text-align: center;
+
+      &:focus {
+        border-bottom: none;
+        background-color: var(--md-sys-color-primary-container);
+      }
+
+      &::selection {
+        background-color: transparent;
+      }
+    }
+
+    .caret {
+      display: none;
+    }
+  }
+
+  .select-dropdown {
+    padding: 0;
+    vertical-align: middle;
+  }
+
+  .select-year input,
+  .select-month input {
+    background-color: transparent;
+  }
+
+  .select-year input {
+    width: 50px;
+  }
+
+  .select-month input {
+    width: 80px;
+  }
+
+  .month-prev,
+  .month-next {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .month-prev,
+  .month-next {
+    & > svg {
+      fill: var(--md-sys-color-on-surface-variant);
+    }
+  }
+}
+
+.month-prev, .month-next {
+  height: 49px;
+  margin-top: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+
+/* Date Display */
+.datepicker-date-display {
+  flex: 1 auto;
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  // 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);
+  font-weight: 500;
+
+  .year-text {
+    display: block;
+    font-size: 1.5rem;
+    line-height: 25px;
+    color:  var(--md-sys-color-on-primary);
+  }
+
+  .date-text {
+    display: block;
+    font-size: 2.8rem;
+    line-height: 47px;
+    font-weight: 500;
+  }
+
+  .daterange & {
+    .date-text {
+      font-size: 1.8rem;
+    }
+  }
+}
+
+
+/* Calendar */
+.datepicker-calendar-container {
+  flex: 2.5 auto;
+}
+
+.datepicker-table {
+  width: 280px;
+  font-size: 1rem;
+  margin: 0 auto;
+
+  thead {
+    border-bottom: none;
+  }
+
+  th {
+    padding: 10px 5px;
+    text-align: center;
+  }
+
+  tr {
+    border: none;
+  }
+
+  abbr {
+    text-decoration: none;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .datepicker-day {
+    padding: 0;
+    color: var(--md-sys-color-on-background);
+    // border-radius: 50%;
+
+    &.is-today {
+      color: var(--md-sys-color-primary);
+    }
+
+    /*&.is-selected button {
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
+    }*/
+  }
+}
+
+.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;
+    }
+  }
+
+  &.is-daterange-start:before,
+  &.is-daterange-end:before {
+    width: 50%;
+  }
+
+  &.is-daterange-start:before {
+    left: 50%;
+  }
+
+  &.is-daterange .datepicker-day-button:before {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+.datepicker-day-button {
+  background-color: transparent;
+  border: none;
+  line-height: 34px;
+  display: block;
+  width: 34px;
+  border-radius: 50%;
+  margin: 5px;
+  padding: 0 5px;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+  }
+
+  &:focus {
+    border-color: var(--md-sys-color-primary);
+  }
+
+  .is-selected & {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    &:focus {
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-primary);
+    }
+  }
+
+  &.is-outside-current-month button,
+  &.is-disabled button {
+    color: var(--md-sys-color-on-surface);
+    pointer-events: none;
+  }
+}
+
+/* Footer */
+.datepicker-footer {
+  width: 280px;
+  margin: 0 auto;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.datepicker-cancel,
+.datepicker-clear,
+.datepicker-today,
+.datepicker-done {
+  color: var(--md-sys-color-primary);
+  padding: 0 1rem;
+}
+
+.datepicker-clear {
+  color: var(--md-sys-color-error);
+}
+
+