@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/scss/components/_chips.scss

@@ -1,147 +0,0 @@
-@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

@@ -1,84 +0,0 @@
-@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/_dropdown.scss

@@ -1,98 +0,0 @@
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
-
-[popover] {
-  outline: none;
-  padding: 0;
-  border: none;
-}
-
-// M3 Expressive: Dropdown / Menu component
-.dropdown-content,
-.menu-content {
-  // -- Component tokens --
-  --md-comp-menu-shape: var(--md-sys-shape-corner-extra-small, 4px);
-  --md-comp-menu-container-color: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
-
-  padding-left: 0;
-  list-style-type: none;
-  @extend .elevation-2;
-  background-color: var(--md-comp-menu-container-color);
-  margin: 0;
-  display: none;
-  min-width: 100px;
-  overflow-y: auto;
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 9999; // TODO: Check if this doesn't break other things
-  transform-origin: 0 0;
-  user-select: none;
-  border-radius: var(--md-comp-menu-shape);
-  transition:
-    opacity var(--md-sys-motion-duration-short3, 0.15s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
-    transform var(--md-sys-motion-duration-medium1, 0.25s) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-
-  li {
-    clear: both;
-    color: var(--md-sys-color-on-surface);
-    cursor: pointer;
-    min-height: $dropdown-item-height;
-    line-height: 1.5rem;
-    width: 100%;
-    text-align: left;
-
-    &.divider {
-      min-height: 0;
-      height: 1px;
-    }
-
-    & > a, & > span {
-      font-size: 16px;
-      color: var(--md-sys-color-on-surface);
-      display: block;
-      line-height: 22px;
-      padding: (($dropdown-item-height - 22) * 0.5) 16px;
-    }
-
-    & > span > label {
-      top: 1px;
-      left: 0;
-      height: 18px;
-    }
-
-    // Icon alignment override
-    & > a > i {
-      height: inherit;
-      line-height: inherit;
-      float: left;
-      margin: 0 24px 0 0;
-      width: 24px;
-    }
-
-    &:not(.disabled):hover, &.active {
-      background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
-    }
-
-    // Keyboard focus state (parent context nesting)
-    body.keyboard-focused & {
-      &:focus {
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-      }
-    }
-  }
-}
-
-// Input field specificity bugfix
-.input-field.col .dropdown-content [type="checkbox"] + label {
-  top: 1px;
-  left: 0;
-  height: 18px;
-  transform: none;
-}
-
-.dropdown-trigger,
-.menu-trigger {
-  cursor: pointer;
-}

package/src/scss/components/_index.scss

@@ -1,28 +0,0 @@
-@forward 'buttons';
-@forward 'collection';
-@forward 'badges';
-@forward 'material-icons';
-@forward 'appbar';
-@forward 'transitions';
-@forward 'cards';
-@forward 'toast';
-@forward 'tabs';
-@forward 'tooltip';
-@forward 'dropdown';
-@forward 'modal';
-@forward 'collapsible';
-@forward 'chips';
-@forward 'material-box';
-@forward 'table-of-contents';
-@forward 'sidenav';
-@forward 'preloader';
-@forward 'slider';
-@forward 'carousel';
-@forward 'tap-target';
-@forward 'pulse';
-@forward 'date-picker';
-@forward 'time-picker';
-@forward 'breadcrumb';
-@forward 'pagination';
-@forward 'parallax';
-@forward 'video';

package/src/scss/components/_modal.scss

@@ -1,84 +0,0 @@
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
-
-// M3 Expressive: Component tokens for Modal / Dialog
-// use with dialog html element
-.modal,
-.dialog {
-  // -- Component tokens --
-  --modal-footer-divider-height: 1px;
-  --modal-border-radius: var(--md-sys-shape-corner-extra-large, 28px);
-  --modal-padding: 24px;
-  --modal-padding-bottom: 16px;
-  --modal-background-color: var(--md-sys-color-surface-container-high,
-    color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%)
-  );
-
-  @extend .elevation-5;
-  border: none;
-  outline: none;
-  padding: 0;
-  max-height: 70%;
-  width: 55%;
-  border-radius: var(--modal-border-radius);
-  will-change: top, opacity;
-  background-color: var(--modal-background-color);
-
-  // Dialog open
-  &[open] {
-    display: flex;
-    flex-direction: column;
-  }
-
-  @media #{$medium-and-down} {
-    width: 80%;
-  }
-
-  // custom backdrop blur
-  &::backdrop {
-    backdrop-filter: blur(1px);
-  }
-
-  .modal-header,
-  .dialog-header {
-    padding: var(--modal-padding);
-    padding-bottom: var(--modal-padding-bottom);
-    flex-shrink: 0;
-    position: sticky;
-    top: 0;
-    background-color: var(--modal-background-color);
-  }
-  .modal-content,
-  .dialog-content {
-    padding: 0 var(--modal-padding);
-  }
-  .modal-footer,
-  .dialog-footer {
-    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
-    padding: var(--modal-padding);
-    text-align: right;
-    flex-shrink: 0;
-    position: sticky;
-    bottom: 0;
-    background-color: var(--modal-background-color);
-  }
-
-  .modal-close,
-  .dialog-close {
-    cursor: pointer;
-  }
-
-  // todo: remove maybe
-  h1,h2,h3,h4,h5,h6 {
-    margin: 0;
-  }
-
-  // Modal Bottom Sheet Style
-  &.bottom-sheet {
-    margin-bottom: 0;
-    max-height: 45%;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    will-change: bottom, opacity;
-  }
-}

package/src/scss/components/_tabs.scss

@@ -1,176 +0,0 @@
-@use '../foundation/variables' as *;
-
-// M3 Expressive: Tabs component
-.tabs {
-  padding-left: 0;
-  list-style-type: none;
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  width: 100%;
-  background-color: var(--md-sys-color-surface);
-  margin: 0 auto;
-  white-space: nowrap;
-
-  &.tabs-transparent {
-    background-color: transparent;
-
-    .tab {
-      a {
-        color: var(--font-on-primary-color-medium);
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.04);
-        }
-
-        &.active,
-        &:focus {
-          background-color: transparent;
-        }
-
-        &:hover,
-        &.active,
-        &:focus {
-          color:  var(--md-sys-color-on-primary);
-        }
-      }
-
-      &.disabled a {
-        &,
-        &:hover,
-        &:focus {
-          color: rgba(255, 255, 255, 0.38);
-        }
-      }
-    }
-
-    .indicator {
-      background-color:  var(--md-sys-color-on-primary);
-    }
-  }
-
-  &.tabs-fixed-width {
-    display: flex;
-
-    .tab {
-      flex-grow: 1;
-    }
-  }
-
-  .tab {
-    padding-left: 0;
-    list-style-type: none;
-    display: inline-block;
-    text-align: center;
-    line-height: 48px;
-    padding: 0;
-    margin: 0;
-
-    i.material-icons {
-      position: relative;
-      top: 8px;
-      vertical-align: middle;
-    }
-
-    span {
-      height: 24px;
-      line-height: 20px;
-    }
-
-    a {
-      color: var(--md-sys-color-on-surface-variant);
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      min-height: 48px;  //needed for only-icons tabs
-      padding: 0 24px;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition:
-        color var(--md-sys-motion-duration-medium1, 0.25s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
-        background-color var(--md-sys-motion-duration-medium1, 0.25s) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-
-      &.active {
-        background-color: transparent;
-      }
-
-      &.active,
-      &:focus,
-      &:hover {
-        color: var(--md-sys-color-primary);
-      }
-
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-      }
-
-      &:focus {
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      &.active {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
-      }
-
-      &:focus,
-      &.active {
-        outline: none;
-      }
-    }
-
-    &.disabled a {
-      &,
-      &:hover {
-        color: var(--md-sys-color-on-surface);
-        cursor: default;
-        background-color: transparent;
-
-        &:not(:focus) {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  .indicator {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    background-color: var(--md-sys-color-primary);
-    will-change: left, right;
-    border-radius: var(--md-sys-shape-corner-extra-small, 3px) var(--md-sys-shape-corner-extra-small, 3px) 0 0;
-    transition:
-      left var(--md-sys-motion-duration-medium2, 0.3s) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
-      right var(--md-sys-motion-duration-medium2, 0.3s) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-  }
-
-  &.tabs-horizontal .tab {
-    height: 48px;
-
-    a {
-      display: block;
-    }
-
-    i.material-icons {
-      padding: 0 4px;
-      position: relative;
-      top: -2px;
-      vertical-align: middle;
-    }
-  }
-
-  /* Responsive — smaller screens */
-  @media #{$medium-and-down} {
-    display: flex;
-
-    .tab {
-      flex-grow: 1;
-
-      a {
-        padding: 0 12px;
-      }
-    }
-  }
-}

package/src/scss/components/_toast.scss

@@ -1,70 +0,0 @@
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
-
-#toast-container,
-#snackbar-container {
-  display:block;
-  position: fixed;
-  z-index: 10000;
-
-  @media #{$small-and-down} {
-    min-width: 100%;
-    bottom: 0%;
-  }
-  @media #{$medium-only} {
-    left: 5%;
-    bottom: 7%;
-    max-width: 90%;
-  }
-  @media #{$large-and-up} {
-    top: 10%;
-    right: 7%;
-    max-width: 86%;
-  }
-}
-
-// M3 Expressive: Snackbar is the M3 alias for Toast
-.toast,
-.snackbar {
-  @extend .elevation-3;
-  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
-  top: 35px;
-  width: auto;
-  margin-top: 10px;
-  position: relative;
-  max-width: 100%;
-  height: auto;
-  min-height: 48px;
-
-  padding-left: 16px;
-  padding-right: 12px;
-
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  color: var(--md-sys-color-inverse-on-surface);
-  background-color: var(--md-sys-color-inverse-surface);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: default;
-
-  .toast-action,
-  .snackbar-action {
-    color: var(--md-sys-color-inverse-primary);
-    font-weight: 500;
-    margin-right: -25px;
-    margin-left: 3rem;
-  }
-
-  &.rounded{
-    border-radius: var(--md-sys-shape-corner-full, 24px);
-  }
-
-  @media #{$small-and-down} {
-    width: 100%;
-    border-radius: 0;
-  }
-}