@expressivecss/expressive 0.1.0-alpha.3

package/src/scss/components/_appbar.scss

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

@@ -0,0 +1,77 @@
+// 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);
+  }
+}

package/src/scss/components/_breadcrumb.scss

@@ -0,0 +1,27 @@
+.breadcrumb-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+
+  i,
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp,
+  &:before {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  }
+
+  &:first-child:before {
+    visibility: hidden;
+  }
+}