@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/scss/components/_appbar.scss

@@ -1,454 +0,0 @@
-@use '../foundation/variables' as *;
-@use '../utilities/elevation' as *;
-
-// ==========================================================================
-// App Bar (Top) — M3 Expressive
-// ==========================================================================
-//
-// Implements Material Design 3 Expressive top app bar.
-// Reference: https://m3.material.io/components/app-bars
-//
-// Variants:
-//   .appbar                — Small (default, 64dp)
-//   .appbar.appbar-medium  — Medium flexible (112dp expanded)
-//   .appbar.appbar-large   — Large flexible (152dp expanded)
-//
-// Structure:
-//   <header class="appbar" role="banner">
-//     <div class="appbar-row">
-//       <a class="sidenav-trigger" aria-label="Open navigation">
-//         <i class="material-symbols-outlined">menu</i>
-//       </a>
-//       <a class="appbar-title">Title</a>
-//       <ul class="right" role="toolbar" aria-label="Actions">
-//         <li><a href="#" aria-label="Search"><i>search</i></a></li>
-//       </ul>
-//     </div>
-//   </header>
-//
-// Accessibility:
-//   - Use role="banner" on the root element (or <header>)
-//   - Use role="toolbar" + aria-label on action item containers
-//   - All icon-only actions require aria-label
-//   - Navigation icon needs aria-label (e.g., "Open navigation menu")
-//   - Minimum touch target: 48x48dp for all interactive elements
-//   - Keyboard: Tab to enter toolbar, Arrow keys between items (roving tabindex)
-// ==========================================================================
-
-:root {
-  // App bar dimensions
-  --appbar-height: 64px;
-  --appbar-height-mobile: 56px;
-  --appbar-medium-height: 112px;
-  --appbar-large-height: 152px;
-  // App bar color tokens (M3 Expressive)
-  --appbar-container-color: var(--md-sys-color-surface);
-  --appbar-on-container-color: var(--md-sys-color-on-surface);
-  --appbar-action-icon-color: var(--md-sys-color-on-surface-variant);
-  --appbar-scrolled-container-color: var(--md-sys-color-surface-container);
-  // App bar title typography (M3 titleLarge)
-  --appbar-title-size: 1.375rem; // 22sp
-  --appbar-title-line-height: 1.75rem; // 28sp
-  --appbar-title-weight: 400;
-  // App bar headline typography for medium/large (M3 headlineSmall)
-  --appbar-headline-size: 1.5rem; // 24sp
-  --appbar-headline-line-height: 2rem; // 32sp
-  --appbar-headline-weight: 400;
-  // Minimum interactive target for accessibility
-  --appbar-min-touch-target: 48px;
-  // Horizontal padding
-  --appbar-padding-inline: 4px;
-  --appbar-title-padding-inline: 16px;
-}
-
-// ==========================================================================
-// Small App Bar (default)
-// ==========================================================================
-
-.appbar {
-  background-color: var(--appbar-container-color);
-  color: var(--appbar-on-container-color);
-  width: 100%;
-  height: var(--appbar-height-mobile);
-  line-height: var(--appbar-height-mobile);
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
-  position: relative;
-  z-index: 1;
-
-  // Scrolled / lifted state — add via JS or :has() when content scrolls
-  &.appbar-scrolled {
-    background-color: var(--appbar-scrolled-container-color);
-    @extend .z-depth-2;
-  }
-
-  // Links inherit container text color
-  a {
-    color: var(--appbar-on-container-color);
-  }
-
-  // Icons
-  i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
-    display: block;
-    font-size: 24px;
-    height: var(--appbar-height-mobile);
-    line-height: var(--appbar-height-mobile);
-  }
-
-  // ------------------------------------------------------------------
-  // App Bar Row — primary layout container
-  // ------------------------------------------------------------------
-  .appbar-row {
-    position: relative;
-    height: 100%;
-    padding-inline: var(--appbar-padding-inline);
-    display: flex;
-    align-items: center;
-  }
-
-  // ------------------------------------------------------------------
-  // Navigation icon (sidenav trigger)
-  // ------------------------------------------------------------------
-  @media #{$large-and-up} {
-    a.sidenav-trigger {
-      display: none;
-    }
-  }
-
-  .sidenav-trigger {
-    float: left;
-    position: relative;
-    z-index: 1;
-    height: var(--appbar-height-mobile);
-    min-width: var(--appbar-min-touch-target);
-    min-height: var(--appbar-min-touch-target);
-    margin: 0 18px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-
-    &:focus-visible {
-      outline: 2px solid var(--md-sys-color-primary);
-      outline-offset: 2px;
-    }
-
-    i {
-      height: var(--appbar-height-mobile);
-      line-height: var(--appbar-height-mobile);
-    }
-  }
-
-  // ------------------------------------------------------------------
-  // App Bar Title (M3 titleLarge)
-  // ------------------------------------------------------------------
-  .appbar-title {
-    font-size: var(--appbar-title-size);
-    font-weight: var(--appbar-title-weight);
-    line-height: var(--appbar-title-line-height);
-    color: var(--appbar-on-container-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-inline: var(--appbar-title-padding-inline);
-    flex: 1;
-
-    &.center {
-      text-align: center;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    @media #{$medium-and-down} {
-      text-align: center;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      max-width: 60%;
-
-      &.left, &.right {
-        position: relative;
-        left: auto;
-        transform: none;
-        text-align: left;
-        max-width: none;
-      }
-
-      &.left {
-        margin-left: 0.5rem;
-      }
-      &.right {
-        margin-left: auto;
-        margin-right: 0.5rem;
-      }
-    }
-
-    &.right {
-      margin-left: auto;
-      margin-right: 0.5rem;
-      text-align: right;
-      flex: none;
-    }
-
-    // Icon within title
-    i,
-    [class^="mdi-"], [class*="mdi-"],
-    i.material-icons, i.material-symbols-outlined,
-    i.material-symbols-rounded, i.material-symbols-sharp {
-      float: left;
-      margin-right: 15px;
-    }
-  }
-
-  // ------------------------------------------------------------------
-  // Action items (navigation list)
-  // ------------------------------------------------------------------
-  ul:not(.dropdown-content) {
-    list-style-type: none;
-    margin: 0;
-    display: flex;
-    align-items: center;
-
-    & > li {
-      transition: background-color 0.2s ease;
-      padding: 0;
-
-      & > a {
-        transition: background-color 0.2s ease;
-        font-size: 1rem;
-        color: var(--appbar-on-container-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 15px;
-        cursor: pointer;
-        min-width: var(--appbar-min-touch-target);
-        min-height: var(--appbar-min-touch-target);
-
-        &:focus-visible {
-          outline: 2px solid var(--md-sys-color-primary);
-          outline-offset: -2px;
-          border-radius: 4px;
-        }
-
-        &.active {
-          background-color: rgba(var(--md-sys-color-on-surface-rgb, 0, 0, 0), 0.12);
-        }
-
-        &:hover:not(.active) {
-          background-color: rgba(var(--md-sys-color-on-surface-rgb, 0, 0, 0), 0.08);
-        }
-
-        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-          margin-top: -2px;
-          margin-left: 15px;
-          margin-right: 15px;
-          display: inline-flex;
-
-          & > .material-icons, & > .material-symbols-outlined,
-          & > .material-symbols-rounded, & > .material-symbols-sharp {
-            height: inherit;
-            line-height: inherit;
-          }
-        }
-
-        // Action icons use on-surface-variant per M3 spec
-        i,
-        [class^="mdi-"], [class*="mdi-"],
-        i.material-icons, i.material-symbols-outlined,
-        i.material-symbols-rounded, i.material-symbols-sharp {
-          color: var(--appbar-action-icon-color);
-        }
-      }
-    }
-
-    &.left {
-      float: left;
-    }
-  }
-
-  // ------------------------------------------------------------------
-  // Search form integration
-  // ------------------------------------------------------------------
-  form {
-    height: 100%;
-  }
-
-  .input-field {
-    margin: 0;
-    height: 100%;
-
-    input[type=search] {
-      height: 100%;
-      font-size: 1.2rem;
-      border: none;
-      padding-left: 2rem;
-      color: var(--appbar-on-container-color);
-      background-color: transparent;
-
-      &:focus, &[type=text]:valid, &[type=password]:valid,
-      &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
-        border: none;
-        box-shadow: none;
-      }
-    }
-
-    label {
-      top: 0;
-      left: 0;
-
-      i {
-        color: var(--appbar-action-icon-color);
-        transition: color 0.2s ease;
-      }
-
-      &.active i {
-        color: var(--appbar-on-container-color);
-      }
-    }
-  }
-
-  // ==========================================================================
-  // Medium Flexible App Bar (M3 Expressive)
-  // ==========================================================================
-  &.appbar-medium {
-    height: auto;
-    min-height: var(--appbar-medium-height);
-
-    .appbar-row {
-      min-height: var(--appbar-height-mobile);
-      height: auto;
-    }
-
-    .appbar-content {
-      position: relative;
-      padding: 0 var(--appbar-title-padding-inline) 20px;
-      line-height: normal;
-    }
-
-    .appbar-headline {
-      display: block;
-      font-size: var(--appbar-headline-size);
-      font-weight: var(--appbar-headline-weight);
-      line-height: var(--appbar-headline-line-height);
-      color: var(--appbar-on-container-color);
-      padding: 0 var(--appbar-title-padding-inline);
-    }
-  }
-
-  // ==========================================================================
-  // Large Flexible App Bar (M3 Expressive)
-  // ==========================================================================
-  &.appbar-large {
-    height: auto;
-    min-height: var(--appbar-large-height);
-
-    .appbar-row {
-      min-height: var(--appbar-height-mobile);
-      height: auto;
-    }
-
-    .appbar-content {
-      position: relative;
-      padding: 0 var(--appbar-title-padding-inline) 28px;
-      line-height: normal;
-    }
-
-    .appbar-headline {
-      display: block;
-      font-size: 1.75rem; // 28sp — M3 headlineMedium
-      font-weight: 400;
-      line-height: 2.25rem; // 36sp
-      color: var(--appbar-on-container-color);
-      padding: 0 var(--appbar-title-padding-inline);
-    }
-  }
-
-  // ==========================================================================
-  // Subtitle support (M3 Expressive)
-  // ==========================================================================
-  .appbar-subtitle {
-    display: block;
-    font-size: 0.875rem; // 14sp — M3 titleSmall
-    font-weight: 400;
-    line-height: 1.25rem; // 20sp
-    color: var(--appbar-action-icon-color);
-    padding: 0 var(--appbar-title-padding-inline);
-  }
-
-  // ==========================================================================
-  // Responsive — Desktop (nested inside .appbar)
-  // ==========================================================================
-  @media #{$medium-and-up} {
-    &,
-    .appbar-row i,
-    a.sidenav-trigger,
-    a.sidenav-trigger i {
-      height: var(--appbar-height);
-      line-height: var(--appbar-height);
-    }
-
-    &.appbar-medium .appbar-row,
-    &.appbar-large .appbar-row {
-      min-height: var(--appbar-height);
-    }
-  }
-}
-
-// ==========================================================================
-// Fixed App Bar
-// ==========================================================================
-
-.appbar-fixed {
-  position: relative;
-  height: var(--appbar-height-mobile);
-  z-index: 997;
-
-  .appbar {
-    position: fixed;
-    right: 0;
-    left: 0;
-    top: 0;
-  }
-
-  @media #{$medium-and-up} {
-    height: var(--appbar-height);
-  }
-}
-
-// ==========================================================================
-// Backward compatibility aliases (deprecated — will be removed in v3)
-// ==========================================================================
-// Allows existing markup using .navbar classes to continue working.
-// Migrate to .appbar equivalents.
-
-.navbar {
-  @extend .appbar;
-}
-
-.navbar-fixed {
-  @extend .appbar-fixed;
-}
-
-.nav-wrapper {
-  @extend .appbar-row;
-}
-
-.nav-extended {
-  @extend .appbar-medium;
-}
-
-.nav-content {
-  @extend .appbar-content;
-}
-
-.brand-logo {
-  @extend .appbar-title;
-}
-
-.nav-title {
-  @extend .appbar-headline;
-}

package/src/scss/components/_badges.scss

@@ -1,77 +0,0 @@
-// TODO: Make better structure
-:root {
-  --bagde-height: 22px;
-}
-
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  margin-left: 14px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: var(--bagde-height);
-  height: var(--bagde-height);
-  color: var(--md-sys-color-on-surface-variant);
-  float: right;
-  box-sizing: border-box;
-
-  &.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color:  var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary);
-    border-radius: 2px;
-
-    &:after {
-      content: " new";
-    }
-  }
-
-  &[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
-  }
-
-  // Context-specific overrides
-  .active & {
-    color: var(--md-sys-color-on-primary);
-  }
-
-  .appbar ul a &,
-  .navbar ul a & {
-    display: inline-block;
-    float: none;
-    margin-left: 4px;
-    line-height: var(--bagde-height);
-    height: var(--bagde-height);
-    -webkit-font-smoothing: auto;
-  }
-
-  .collection-item & {
-    margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
-  }
-
-  .sidenav & {
-    margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
-  }
-
-  table & {
-    display: inline-block;
-    float: none;
-    margin-left: auto;
-  }
-}
-
-.collapsible {
-  span.badge {
-    margin-left: auto;
-
-    &.leading {
-      margin-right: 7px;
-      order: -1;
-    }
-  }
-
-  .active span.badge:not(.new) {
-    color: var(--md-sys-color-on-surface-variant);
-  }
-}