maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_tabs.scss

@@ -1,181 +1,272 @@
 @use '../abstracts' as *;
 
-.mw-tabs {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &-nav {
+@layer mw.components {
+  .mw-tabs {
     display: flex;
-    border-bottom: 1px solid var(--mw-border-accent);
-    margin-bottom: spacing('3');
-    overflow-x: auto;
-
-    // Seven tabs, three of them visible, and nothing saying so - whoever is
-    // looking for the seventh never finds the page. The hint appears only on
-    // the side that still has tabs behind it.
-    @include scroll-hint;
-
-    @include media-down('sm') {
-      flex-wrap: nowrap;
-      -webkit-overflow-scrolling: touch;
-      &::-webkit-scrollbar {
-        display: none;
+    flex-direction: column;
+    width: 100%;
+
+    &-nav {
+      display: flex;
+      position: relative;
+      border-bottom: 1px solid var(--mw-border-accent);
+      margin-bottom: spacing('3');
+      overflow-x: auto;
+
+      // Seven tabs, three of them visible, and nothing saying so - whoever is
+      // looking for the seventh never finds the page. The hint appears only on
+      // the side that still has tabs behind it.
+      @include scroll-hint;
+
+      @include media-down('sm') {
+        flex-wrap: nowrap;
+        -webkit-overflow-scrolling: touch;
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
     }
-  }
 
-  // Written for a <button>. A tab is the primary navigation of the view it
-  // sits in, and as a <div> it is not focusable, not reachable by keyboard and
-  // announces nothing - the one control on the page a keyboard user cannot get
-  // to. The declarations below clear what comes with a <button>; on a <div>
-  // they change nothing, so old markup keeps working.
-  &-nav-item {
-    appearance: none;
-    background: none;
-    border: none;
-    font: inherit;
-    padding: spacing('3') spacing('4');
-    cursor: pointer;
-    font-weight: font-weight('medium');
-    color: var(--mw-text-muted-color);
-    border-bottom: 2px solid transparent;
-    transition: var(--mw-transition);
-    white-space: nowrap;
-    @include tappable;
-    // Inset: a ring outside the item is clipped by the strip's own scroll
-    @include focus-ring-inset;
-
-    &:hover {
-      color: var(--mw-primary-text-color);
-    }
+    // Written for a <button>. A tab is the primary navigation of the view it
+    // sits in, and as a <div> it is not focusable, not reachable by keyboard and
+    // announces nothing - the one control on the page a keyboard user cannot get
+    // to. The declarations below clear what comes with a <button>; on a <div>
+    // they change nothing, so old markup keeps working.
+    &-nav-item {
+      appearance: none;
+      background: none;
+      border: none;
+      font: inherit;
+      padding: spacing('3') spacing('4');
+      cursor: pointer;
+      font-weight: font-weight('medium');
+      color: var(--mw-text-muted-color);
+      border-bottom: 2px solid transparent;
+      transition: var(--mw-transition);
+      white-space: nowrap;
+      @include tappable;
+      // Inset: a ring outside the item is clipped by the strip's own scroll
+      @include focus-ring-inset;
 
-    &:active {
-      color: var(--mw-primary-text-color);
-      transition-duration: var(--mw-duration-instant);
-    }
+      &:hover {
+        color: var(--mw-primary-text-color);
+      }
 
-    &.mw-active,
-    &.active {
-      color: var(--mw-primary-text-color);
-      border-bottom-color: var(--mw-primary-text-color);
+      &:active {
+        color: var(--mw-primary-text-color);
+        transition-duration: var(--mw-duration-instant);
+      }
+
+      @include active() {
+        color: var(--mw-primary-text-color);
+        border-bottom-color: var(--mw-primary-text-color);
+      }
     }
-  }
 
-  &-content {
-    flex: 1;
-    margin-top: spacing('1');
-  }
+    // The active tab is marked by a bar that travels to it rather than appearing
+    // under it. Only once the script has measured the strip - the attribute is
+    // its signal - so without JavaScript the border above stays the marker and
+    // nothing is missing.
+    //
+    // A 1px bar scaled to width, not a bar whose width is set: scaleX runs on the
+    // compositor, `width` relayouts the strip on every frame of the slide.
+    &-nav[data-mw-tabs-marker] {
+      // Declared with a zero length so the four are real tokens with a resting
+      // value rather than four names the stylesheet only ever reads. The script
+      // sets them on the element, which outranks this either way.
+      --mw-tabs-marker-x: 0;
+      --mw-tabs-marker-w: 0;
+      --mw-tabs-marker-y: 0;
+      --mw-tabs-marker-h: 0;
 
-  &-panel {
-    display: none;
+      .mw-tabs-nav-item.mw-active,
+      .mw-tabs-nav-item.active {
+        border-bottom-color: transparent;
+      }
 
-    &.mw-active,
-    &.active {
-      display: block;
-      // 1.1s to reveal a tab panel means a second of blank space after every
-      // click. A panel switch is a state change, not an entrance.
-      animation: fadeIn var(--mw-duration-base) var(--mw-ease-out);
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 1px;
+        height: 2px;
+        background: var(--mw-primary-text-color);
+        transform-origin: left center;
+        transform: translateX(var(--mw-tabs-marker-x))
+          scaleX(var(--mw-tabs-marker-w));
+        transition: transform var(--mw-duration-base) var(--mw-ease-out);
+        pointer-events: none;
+      }
+    }
+
+    &-content {
+      flex: 1;
+      margin-top: spacing('1');
     }
-  }
 
-  // Vertical tabs variant
-  &-vertical {
-    flex-direction: row;
+    &-panel {
+      display: none;
 
-    @include media-down('sm') {
-      flex-direction: column;
-      display: block;
+      @include active() {
+        display: block;
+        // 1.1s to reveal a tab panel means a second of blank space after every
+        // click. A panel switch is a state change, not an entrance.
+        animation: fadeIn var(--mw-duration-base) var(--mw-ease-out);
+      }
     }
 
-    .mw-tabs-nav {
-      flex-direction: column;
-      border-bottom: none;
-      border-right: 1px solid var(--mw-border-accent);
-      margin-bottom: spacing('0');
-      margin-right: spacing('3');
-      min-width: 160px;
-      max-width: 200px;
-      // Stacked, so nothing scrolls sideways and the hint would be a lie
-      background-image: none;
+    // Vertical tabs variant
+    &-vertical {
+      flex-direction: row;
 
       @include media-down('sm') {
-        flex-direction: row;
-        border-right: none;
-        border-bottom: 1px solid var(--mw-border-accent);
-        margin-right: spacing('0');
-        margin-bottom: spacing('4');
-        width: 100%;
-        max-width: 100%;
-        min-width: 100%;
-        overflow-x: auto;
-        display: flex;
-
-        // Horizontal again down here, so it comes back
-        @include scroll-hint;
+        flex-direction: column;
+        display: block;
       }
-    }
 
-    .mw-tabs-nav-item {
-      border-bottom: none;
-      border-right: 2px solid transparent;
+      .mw-tabs-nav {
+        flex-direction: column;
+        border-bottom: none;
+        border-right: 1px solid var(--mw-border-accent);
+        margin-bottom: spacing('0');
+        margin-right: spacing('3');
+        min-width: 160px;
+        max-width: 200px;
+        // Stacked, so nothing scrolls sideways and the hint would be a lie
+        background-image: none;
 
-      &.mw-active,
-      &.active {
-        border-right-color: var(--mw-primary-text-color);
+        @include media-down('sm') {
+          flex-direction: row;
+          border-right: none;
+          border-bottom: 1px solid var(--mw-border-accent);
+          margin-right: spacing('0');
+          margin-bottom: spacing('4');
+          width: 100%;
+          max-width: 100%;
+          min-width: 100%;
+          overflow-x: auto;
+          display: flex;
+
+          // Horizontal again down here, so it comes back
+          @include scroll-hint;
+        }
       }
 
-      @include media-down('sm') {
-        border-right: none;
-        border-bottom: 2px solid transparent;
-        flex-shrink: 0;
+      .mw-tabs-nav-item {
+        border-bottom: none;
+        border-right: 2px solid transparent;
+
+        @include active() {
+          border-right-color: var(--mw-primary-text-color);
+        }
 
-        &.mw-active,
-        &.active {
+        @include media-down('sm') {
+          border-right: none;
+          border-bottom: 2px solid transparent;
+          flex-shrink: 0;
+
+          @include active() {
+            border-right-color: transparent;
+            border-bottom-color: var(--mw-primary-text-color);
+          }
+        }
+      }
+
+      // The bar stands the other way up here, so it travels down the column
+      // instead of across. The script measures both axes and leaves the choice
+      // to CSS, which is what lets the strip flip back to horizontal below 'sm'
+      // without the script knowing that a breakpoint exists.
+      .mw-tabs-nav[data-mw-tabs-marker] {
+        .mw-tabs-nav-item.mw-active,
+        .mw-tabs-nav-item.active {
           border-right-color: transparent;
-          border-bottom-color: var(--mw-primary-text-color);
+        }
+
+        &::after {
+          left: auto;
+          right: -1px;
+          top: 0;
+          bottom: auto;
+          width: 2px;
+          height: 1px;
+          transform-origin: center top;
+          transform: translateY(var(--mw-tabs-marker-y))
+            scaleY(var(--mw-tabs-marker-h));
+        }
+
+        @include media-down('sm') {
+          .mw-tabs-nav-item.mw-active,
+          .mw-tabs-nav-item.active {
+            border-bottom-color: transparent;
+          }
+
+          &::after {
+            left: 0;
+            right: auto;
+            top: auto;
+            bottom: 0;
+            width: 1px;
+            height: 2px;
+            transform-origin: left center;
+            transform: translateX(var(--mw-tabs-marker-x))
+              scaleX(var(--mw-tabs-marker-w));
+          }
         }
       }
-    }
 
-    .mw-tabs-content {
-      flex: 1;
+      .mw-tabs-content {
+        flex: 1;
 
-      @include media-down('sm') {
-        width: 100%;
-        margin-top: spacing('3');
+        @include media-down('sm') {
+          width: 100%;
+          margin-top: spacing('3');
+        }
       }
     }
-  }
 
-  // Pills variant
-  &-pills {
-    .mw-tabs-nav {
-      border-bottom: none;
-      gap: spacing('3');
-    }
+    // Pills variant
+    &-pills {
+      .mw-tabs-nav {
+        border-bottom: none;
+        gap: spacing('3');
+      }
+
+      // A pill is its own marker: the bar has nothing to do here, and the border
+      // it clears elsewhere is a full outline on a pill rather than a marker, so
+      // the bottom edge has to come back with it.
+      .mw-tabs-nav[data-mw-tabs-marker] {
+        &::after {
+          display: none;
+        }
 
-    .mw-tabs-nav-item {
-      border-radius: radius('xl');
-      padding: spacing('4') spacing('5');
-      line-height: 1.2;
-      border: 1px solid var(--mw-border-accent);
-      background: var(--mw-card-background);
-
-      &.mw-active,
-      &.active {
-        background: var(--mw-primary-color);
-        color: var(--mw-primary-accent-text-color);
+        .mw-tabs-nav-item.mw-active,
+        .mw-tabs-nav-item.active {
+          border-bottom-color: var(--mw-border-accent);
+        }
+      }
+
+      .mw-tabs-nav-item {
+        border-radius: radius('xl');
+        padding: spacing('4') spacing('5');
+        line-height: 1.2;
+        border: 1px solid var(--mw-border-accent);
+        background: var(--mw-card-background);
+
+        @include active() {
+          background: var(--mw-primary-color);
+          color: var(--mw-primary-accent-text-color);
+        }
       }
     }
   }
-}
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 }

package/src/scss/components/_tags.scss

@@ -1,136 +1,138 @@
 @use '../abstracts' as *;
 
-// Colour variants
-$_mw-tag-colors: (
-  'primary': '',
-  'secondary': '',
-  'success': 'info-',
-  'warning': 'info-',
-  'danger': 'info-',
-  'info': 'info-',
-);
-
-// Container for tag *lists* - carries the colour for all its items
-.mw-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: spacing('2');
-}
+@layer mw.components {
+  // Colour variants
+  $_mw-tag-colors: (
+    'primary': '',
+    'secondary': '',
+    'success': 'info-',
+    'warning': 'info-',
+    'danger': 'info-',
+    'info': 'info-',
+  );
+
+  // Container for tag *lists* - carries the colour for all its items
+  .mw-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('2');
+  }
 
-// Visual base, shared by the list item and the standalone tag
-%mw-tag-base {
-  display: inline-flex;
-  align-items: center;
-  background: var(--mw-primary-background);
-  color: var(--mw-text-color);
-  font-weight: font-weight('medium');
-  padding: spacing('1') spacing('3');
-  border-radius: radius('xl');
-  font-size: font-size('xs');
-  border: 1px solid var(--mw-border);
-  transition: var(--mw-transition-fast);
-  user-select: none;
-
-  &:hover {
-    background: var(--mw-primary-background-hover);
+  // Visual base, shared by the list item and the standalone tag
+  %mw-tag-base {
+    display: inline-flex;
+    align-items: center;
+    background: var(--mw-primary-background);
+    color: var(--mw-text-color);
+    font-weight: font-weight('medium');
+    padding: spacing('1') spacing('3');
+    border-radius: radius('xl');
+    font-size: font-size('xs');
+    border: 1px solid var(--mw-border);
+    transition: var(--mw-transition-fast);
+    user-select: none;
+
+    &:hover {
+      background: var(--mw-primary-background-hover);
+    }
   }
-}
 
-// Tag item - inside a `.mw-tags` container
-.mw-tags-item {
-  @extend %mw-tag-base;
+  // Tag item - inside a `.mw-tags` container
+  .mw-tags-item {
+    @extend %mw-tag-base;
 
-  // Removable tag styling
-  &.mw-tags-removable {
-    padding-right: spacing('1');
+    // Removable tag styling
+    &.mw-tags-removable {
+      padding-right: spacing('1');
+    }
   }
-}
 
-// Standalone tag - carries its colour directly, no container needed
-.mw-tag {
-  @extend %mw-tag-base;
-}
+  // Standalone tag - carries its colour directly, no container needed
+  .mw-tag {
+    @extend %mw-tag-base;
+  }
 
-// Remove button - pure CSS
-.mw-tags-remove {
-  flex-shrink: 0;
-  margin-left: spacing('3');
+  // Remove button - pure CSS
+  .mw-tags-remove {
+    flex-shrink: 0;
+    margin-left: spacing('3');
 
-  i,
-  fa-icon,
-  svg {
-    font-size: 0.7rem !important;
+    i,
+    fa-icon,
+    svg {
+      font-size: 0.7rem !important;
+    }
   }
-}
 
-.mw-tags-icon {
-  display: inline-flex;
-  margin-right: spacing('2');
-  font-size: 0.9rem;
-}
+  .mw-tags-icon {
+    display: inline-flex;
+    margin-right: spacing('2');
+    font-size: 0.9rem;
+  }
 
-// Color variants - generated for the list form and the standalone form
-@each $name, $infix in $_mw-tag-colors {
-  .mw-tags-#{$name} .mw-tags-item,
-  .mw-tag-#{$name} {
-    background-color: var(--mw-#{$name}-#{$infix}background);
-    border-color: var(--mw-#{$name}-color);
+  // Color variants - generated for the list form and the standalone form
+  @each $name, $infix in $_mw-tag-colors {
+    .mw-tags-#{$name} .mw-tags-item,
+    .mw-tag-#{$name} {
+      background-color: var(--mw-#{$name}-#{$infix}background);
+      border-color: var(--mw-#{$name}-color);
 
-    &:hover {
-      background: var(--mw-#{$name}-#{$infix}background-hover);
+      &:hover {
+        background: var(--mw-#{$name}-#{$infix}background-hover);
+      }
     }
   }
-}
-
-// Neutral variant for "draft" / "done" states.
-.mw-tags-muted .mw-tags-item,
-.mw-tag-muted {
-  background-color: var(--mw-gray-background);
-  border-color: var(--mw-border);
-  color: var(--mw-text-muted-color);
 
-  &:hover {
+  // Neutral variant for "draft" / "done" states.
+  .mw-tags-muted .mw-tags-item,
+  .mw-tag-muted {
     background-color: var(--mw-gray-background);
-    border-color: var(--mw-text-muted-color);
-    color: var(--mw-text-color);
+    border-color: var(--mw-border);
+    color: var(--mw-text-muted-color);
+
+    &:hover {
+      background-color: var(--mw-gray-background);
+      border-color: var(--mw-text-muted-color);
+      color: var(--mw-text-color);
+    }
   }
-}
 
-// Neutral variant for plain identifiers - a customer number, a document type,
-// a price on a category. `muted` means "steps back", this one means "no
-// judgement attached": on an invoice card "XRechnung" is a property, while
-// "no e-invoice" is a shortcoming, and the two must not look alike.
-.mw-tags-neutral .mw-tags-item,
-.mw-tag-neutral {
-  background-color: var(--mw-surface-muted);
-  border-color: var(--mw-border);
-  color: var(--mw-text-color);
-
-  &:hover {
+  // Neutral variant for plain identifiers - a customer number, a document type,
+  // a price on a category. `muted` means "steps back", this one means "no
+  // judgement attached": on an invoice card "XRechnung" is a property, while
+  // "no e-invoice" is a shortcoming, and the two must not look alike.
+  .mw-tags-neutral .mw-tags-item,
+  .mw-tag-neutral {
     background-color: var(--mw-surface-muted);
-    border-color: var(--mw-border-accent);
+    border-color: var(--mw-border);
+    color: var(--mw-text-color);
+
+    &:hover {
+      background-color: var(--mw-surface-muted);
+      border-color: var(--mw-border-accent);
+    }
   }
-}
 
-// Size variants
-// a little more air between the items instead of inside them
-.mw-tags-lg {
-  gap: spacing('3');
-}
+  // Size variants
+  // a little more air between the items instead of inside them
+  .mw-tags-lg {
+    gap: spacing('3');
+  }
 
-.mw-tags-lg .mw-tags-item,
-.mw-tag-lg {
-  font-size: font-size('sm');
-  padding: spacing('2') spacing('3');
+  .mw-tags-lg .mw-tags-item,
+  .mw-tag-lg {
+    font-size: font-size('sm');
+    padding: spacing('2') spacing('3');
 
-  .mw-tags-remove {
-    width: 22px;
-    height: 22px;
+    .mw-tags-remove {
+      width: 22px;
+      height: 22px;
 
-    i,
-    fa-icon,
-    svg {
-      font-size: 0.9rem !important;
+      i,
+      fa-icon,
+      svg {
+        font-size: 0.9rem !important;
+      }
     }
   }
 }