maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_kanban.scss

@@ -1,398 +1,389 @@
 @use '../abstracts' as *;
 
-// Pixel-precise shape values - no fractional keys in the spacing map
-$_mw-kanban-action-size: 26px;
-$_mw-kanban-action-size-touch: 32px;
-// Room the ribbon needs in the top right corner of a ticket
-$_mw-kanban-ribbon-clearance: 66px;
-$_mw-kanban-ribbon-clearance-compact: 58px;
-
-@keyframes mw-kanban-card-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
+@layer mw.components {
+  // Pixel-precise shape values - no fractional keys in the spacing map
+  $_mw-kanban-action-size: 26px;
+  $_mw-kanban-action-size-touch: 32px;
+  // Room the ribbon needs in the top right corner of a ticket
+  $_mw-kanban-ribbon-clearance: 66px;
+  $_mw-kanban-ribbon-clearance-compact: 58px;
+
+  @keyframes mw-kanban-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
-// A card that has just been pushed to another lane arrives from the side it was
-// pushed from, and takes visibly longer doing it than a new card takes to
-// appear. The two are not the same event: a new card shows up exactly where the
-// eye already is - the composer it was written in - while a moved one lands in a
-// column somewhere else on the board, and has to be found there.
-//
-// Before this the move had no animation at all: the JS re-parented the card and
-// it simply blinked into the other lane.
-@keyframes mw-kanban-card-moved-forward {
-  from {
-    opacity: 0;
-    transform: translateX(-18px);
+  // A card that has just been pushed to another lane arrives from the side it was
+  // pushed from, and takes visibly longer doing it than a new card takes to
+  // appear. The two are not the same event: a new card shows up exactly where the
+  // eye already is - the composer it was written in - while a moved one lands in a
+  // column somewhere else on the board, and has to be found there.
+  //
+  // Before this the move had no animation at all: the JS re-parented the card and
+  // it simply blinked into the other lane.
+  @keyframes mw-kanban-card-moved-forward {
+    from {
+      opacity: 0;
+      transform: translateX(-18px);
+    }
   }
-}
 
-@keyframes mw-kanban-card-moved-back {
-  from {
-    opacity: 0;
-    transform: translateX(18px);
+  @keyframes mw-kanban-card-moved-back {
+    from {
+      opacity: 0;
+      transform: translateX(18px);
+    }
   }
-}
 
-// ---------------------------------------------------------------------------
-// Board
-// ---------------------------------------------------------------------------
-.mw-kanban {
-  // Board surface - drop it with .mw-kanban-plain or override per board.
-  --mw-kanban-background: color-mix(
-    in srgb,
-    var(--mw-gray-color) 40%,
-    transparent
-  );
-  --mw-kanban-lane-border: 1px dashed
-    color-mix(in srgb, var(--mw-text-muted-color) 40%, transparent);
-  // Keeps an empty lane from collapsing onto its header - raise it per board
-  // to give a board that starts out empty some presence
-  --mw-kanban-column-min-height: 120px;
-
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  gap: spacing('4');
-  padding: spacing('4');
-  background: var(--mw-kanban-background);
-  border-radius: radius('md');
-
-  // Two lanes side by side stay readable, four do not
-  @include media-down('lg') {
-    grid-auto-flow: row;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  // ---------------------------------------------------------------------------
+  // Board
+  // ---------------------------------------------------------------------------
+  .mw-kanban {
+    // Board surface - drop it with .mw-kanban-plain or override per board.
+    --mw-kanban-background: color-mix(
+      in srgb,
+      var(--mw-gray-color) 40%,
+      transparent
+    );
+    --mw-kanban-lane-border: 1px dashed
+      color-mix(in srgb, var(--mw-text-muted-color) 40%, transparent);
+    // Keeps an empty lane from collapsing onto its header - raise it per board
+    // to give a board that starts out empty some presence
+    --mw-kanban-column-min-height: 120px;
+
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: spacing('4');
+    padding: spacing('4');
+    background: var(--mw-kanban-background);
+    border-radius: radius('md');
+
+    // Two lanes side by side stay readable, four do not
+    @include media-down('lg') {
+      grid-auto-flow: row;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    @include media-down('sm') {
+      grid-template-columns: minmax(0, 1fr);
+      gap: spacing('3');
+      padding: spacing('3');
+    }
   }
 
-  @include media-down('sm') {
-    grid-template-columns: minmax(0, 1fr);
-    gap: spacing('3');
-    padding: spacing('3');
+  // Board without its own surface - for pages that already sit on a panel
+  .mw-kanban-plain {
+    --mw-kanban-background: transparent;
+    padding: spacing('0');
   }
-}
-
-// Board without its own surface - for pages that already sit on a panel
-.mw-kanban-plain {
-  --mw-kanban-background: transparent;
-  padding: spacing('0');
-}
-
-// Lane
-.mw-kanban-column {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  padding: spacing('4') spacing('3');
-  border: var(--mw-kanban-lane-border);
-  border-radius: radius('sm');
-}
-
-.mw-kanban-column-header {
-  display: flex;
-  align-items: center;
-  gap: spacing('3');
-  margin-bottom: spacing('4');
-}
 
-.mw-kanban-title {
-  flex: 1;
-  min-width: 0;
-  margin: spacing('0');
-  font-size: font-size('sm');
-  font-weight: font-weight('bold');
-  color: var(--mw-text-color);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mw-kanban-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  padding: spacing('0') spacing('2');
-  border-radius: radius('xl');
-  background: var(--mw-gray-background);
-  border: 1px solid var(--mw-border);
-  color: var(--mw-text-muted-color);
-  font-size: font-size('xs');
-  font-weight: font-weight('medium');
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-// Sits on .mw-btn - this only trims it down to the header's line height
-.mw-kanban-add {
-  padding: spacing('1') spacing('3');
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.mw-kanban-column-body {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
-  // Fills the lane the grid stretched, so the empty state stays centred in it
-  flex: 1;
-  min-height: var(--mw-kanban-column-min-height);
-}
-
-// Ticket - a plain .mw-card, only smaller
-.mw-kanban-card {
-  padding: spacing('4');
-
-  &.mw-kanban-card-in {
-    animation: mw-kanban-card-in var(--mw-duration-base) var(--mw-ease-out);
+  // Lane
+  .mw-kanban-column {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: spacing('4') spacing('3');
+    border: var(--mw-kanban-lane-border);
+    border-radius: radius('sm');
   }
 
-  // `slow` rather than `base` - see the note by the keyframes. Retune the whole
-  // thing through --mw-duration-slow, or give these two rules a duration of
-  // their own if only the board should change.
-  &.mw-kanban-card-moved-forward {
-    animation: mw-kanban-card-moved-forward var(--mw-duration-slow)
-      var(--mw-ease-out);
+  .mw-kanban-column-header {
+    display: flex;
+    align-items: center;
+    gap: spacing('3');
+    margin-bottom: spacing('4');
   }
 
-  &.mw-kanban-card-moved-back {
-    animation: mw-kanban-card-moved-back var(--mw-duration-slow)
-      var(--mw-ease-out);
+  .mw-kanban-title {
+    flex: 1;
+    min-width: 0;
+    margin: spacing('0');
+    font-size: font-size('sm');
+    font-weight: font-weight('bold');
+    color: var(--mw-text-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    @include truncate;
   }
-}
 
-// The card ribbon carries the priority, including its color
-.mw-kanban-card .mw-card-ribbon {
-  top: 10px;
-  right: -34px;
-  width: 120px;
-  padding: spacing('0') spacing('3');
-  font-size: font-size('2xs');
-  opacity: 1;
-}
-
-// Keeps the first lines clear of the ribbon - only where there is one
-.mw-kanban-card:has(> .mw-card-ribbon) .mw-kanban-card-title {
-  padding-right: $_mw-kanban-ribbon-clearance;
-}
-
-.mw-kanban-card-title {
-  margin: spacing('0') spacing('0') spacing('2');
-  font-size: font-size('base');
-  font-weight: font-weight('medium');
-  color: var(--mw-text-color);
-  line-height: 1.35;
-}
-
-// Caps the description so a wordy ticket cannot dwarf the ones next to it
-.mw-kanban-card-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin: spacing('0');
-  font-size: font-size('sm');
-  color: var(--mw-text-muted-color);
-  line-height: 1.45;
-}
-
-// Footer - ticket key on the left, assignee and the action buttons on the right
-.mw-kanban-card-footer {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: spacing('2');
-  margin-top: spacing('4');
-  padding-top: spacing('3');
-  border-top: 1px solid var(--mw-border);
-}
-
-// Monospaced so keys of equal length line up across cards
-.mw-kanban-card-id {
-  font-family: var(--mw-font-family-mono);
-  font-size: font-size('xs');
-  color: var(--mw-text-muted-color);
-  letter-spacing: 0.03em;
-  flex-shrink: 0;
-}
+  .mw-kanban-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    padding: spacing('0') spacing('2');
+    border-radius: radius('xl');
+    background: var(--mw-gray-background);
+    border: 1px solid var(--mw-border);
+    color: var(--mw-text-muted-color);
+    font-size: font-size('xs');
+    font-weight: font-weight('medium');
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+  }
 
-.mw-kanban-card-actions {
-  display: flex;
-  align-items: center;
-  gap: spacing('2');
-  margin-left: auto;
-  flex-shrink: 0;
+  // Sits on .mw-btn - this only trims it down to the header's line height
+  .mw-kanban-add {
+    padding: spacing('1') spacing('3');
+    line-height: 1;
+    flex-shrink: 0;
+  }
 
-  // The global avatar margin would push the buttons off the card
-  .mw-avatar {
-    margin: spacing('0');
+  .mw-kanban-column-body {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
+    // Fills the lane the grid stretched, so the empty state stays centred in it
+    flex: 1;
+    min-height: var(--mw-kanban-column-min-height);
   }
-}
 
-// Move, edit and delete all share one button shape
-.mw-kanban-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: $_mw-kanban-action-size;
-  height: $_mw-kanban-action-size;
-  padding: spacing('0');
-  border: 1px solid var(--mw-border);
-  border-radius: radius('sm');
-  background: transparent;
-  color: var(--mw-text-muted-color);
-  font-size: font-size('xs');
-  line-height: 1;
-  cursor: pointer;
-  transition: var(--mw-transition);
-
-  &:hover:not(:disabled) {
-    background: var(--mw-primary-color);
-    border-color: var(--mw-primary-text-color);
-    color: var(--mw-primary-accent-text-color);
+  // Ticket - a plain .mw-card, only smaller
+  .mw-kanban-card {
+    padding: spacing('4');
+
+    &.mw-kanban-card-in {
+      animation: mw-kanban-card-in var(--mw-duration-base) var(--mw-ease-out);
+    }
+
+    // `slow` rather than `base` - see the note by the keyframes. Retune the whole
+    // thing through --mw-duration-slow, or give these two rules a duration of
+    // their own if only the board should change.
+    &.mw-kanban-card-moved-forward {
+      animation: mw-kanban-card-moved-forward var(--mw-duration-slow)
+        var(--mw-ease-out);
+    }
+
+    &.mw-kanban-card-moved-back {
+      animation: mw-kanban-card-moved-back var(--mw-duration-slow)
+        var(--mw-ease-out);
+    }
   }
 
-  @include focus-ring;
+  // The card ribbon carries the priority, including its color
+  .mw-kanban-card .mw-card-ribbon {
+    top: 10px;
+    right: -34px;
+    width: 120px;
+    padding: spacing('0') spacing('3');
+    font-size: font-size('2xs');
+    opacity: 1;
+  }
 
-  &:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
+  // Keeps the first lines clear of the ribbon - only where there is one
+  .mw-kanban-card:has(> .mw-card-ribbon) .mw-kanban-card-title {
+    padding-right: $_mw-kanban-ribbon-clearance;
   }
 
-  // Comfortable tap target where there is no mouse
-  @include media-down('md') {
-    width: $_mw-kanban-action-size-touch;
-    height: $_mw-kanban-action-size-touch;
+  .mw-kanban-card-title {
+    margin: spacing('0') spacing('0') spacing('2');
+    font-size: font-size('base');
+    font-weight: font-weight('medium');
+    color: var(--mw-text-color);
+    line-height: 1.35;
   }
-}
 
-.mw-kanban-action-danger:hover:not(:disabled) {
-  background: var(--mw-danger-color);
-  border-color: var(--mw-danger-color);
-}
+  // Caps the description so a wordy ticket cannot dwarf the ones next to it
+  .mw-kanban-card-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin: spacing('0');
+    font-size: font-size('sm');
+    color: var(--mw-text-muted-color);
+    line-height: 1.45;
+  }
 
-// Composer - one per board, moved into whichever lane it is needed in
-.mw-kanban-composer {
-  display: none;
-  flex-direction: column;
-  gap: spacing('3');
-  padding: spacing('4');
-  background: var(--mw-card-background);
-  border: 1px dashed var(--mw-primary-text-color);
-  // Same silhouette as a ticket, so it reads as one being written
-  @include surface;
-
-  &.mw-active {
+  // Footer - ticket key on the left, assignee and the action buttons on the right
+  .mw-kanban-card-footer {
     display: flex;
-    animation: mw-kanban-card-in var(--mw-duration-fast) var(--mw-ease-out);
+    align-items: center;
+    flex-wrap: wrap;
+    gap: spacing('2');
+    margin-top: spacing('4');
+    padding-top: spacing('3');
+    border-top: 1px solid var(--mw-border);
   }
 
-  // Three lines of description without a scrollbar
-  .mw-textarea {
-    min-height: 66px;
+  // Monospaced so keys of equal length line up across cards
+  .mw-kanban-card-id {
+    font-family: var(--mw-font-family-mono);
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+    letter-spacing: 0.03em;
+    flex-shrink: 0;
   }
-}
 
-// Priority and assignee side by side, stacked once the lane gets too narrow
-.mw-kanban-composer-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: spacing('3');
+  .mw-kanban-card-actions {
+    display: flex;
+    align-items: center;
+    gap: spacing('2');
+    margin-left: auto;
+    flex-shrink: 0;
 
-  > * {
-    flex: 1 1 104px;
+    // The global avatar margin would push the buttons off the card
+    .mw-avatar {
+      margin: spacing('0');
+    }
   }
-}
-
-.mw-kanban-composer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: spacing('3');
-}
-
-// The ticket being edited steps aside for the composer that replaces it
-.mw-kanban-editing {
-  display: none;
-}
-
-// Empty lane placeholder
-.mw-kanban-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding: spacing('5') spacing('3');
-  color: var(--mw-text-muted-color);
-  font-size: font-size('sm');
-  text-align: center;
-}
-
-.mw-kanban-column-body:has(.mw-kanban-card, .mw-kanban-composer.mw-active)
-  .mw-kanban-empty {
-  display: none;
-}
-
-// Compact board - for many lanes or a board next to a sidebar
-.mw-kanban-compact {
-  --mw-kanban-column-min-height: 90px;
 
-  .mw-kanban-column {
-    padding: spacing('3');
+  // Move, edit and delete all share one button shape
+  .mw-kanban-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $_mw-kanban-action-size-touch;
+    height: $_mw-kanban-action-size-touch;
+    padding: spacing('0');
+    border: 1px solid var(--mw-border);
+    border-radius: radius('sm');
+    background: transparent;
+    color: var(--mw-text-muted-color);
+    font-size: font-size('xs');
+    line-height: 1;
+    cursor: pointer;
+    transition: var(--mw-transition);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color);
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-accent-text-color);
+    }
+
+    @include focus-ring;
+
+    &:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+
+    // Comfortable tap target where there is no mouse
+    @include media-up('md') {
+      width: $_mw-kanban-action-size;
+      height: $_mw-kanban-action-size;
+    }
   }
 
-  .mw-kanban-column-header {
-    margin-bottom: spacing('3');
+  .mw-kanban-action-danger:hover:not(:disabled) {
+    background: var(--mw-danger-color);
+    border-color: var(--mw-danger-color);
   }
 
-  .mw-kanban-column-body {
-    gap: spacing('2');
+  // Composer - one per board, moved into whichever lane it is needed in
+  .mw-kanban-composer {
+    display: none;
+    flex-direction: column;
+    gap: spacing('3');
+    padding: spacing('4');
+    background: var(--mw-card-background);
+    border: 1px dashed var(--mw-primary-text-color);
+    // Same silhouette as a ticket, so it reads as one being written
+    @include surface;
+
+    &.mw-active {
+      display: flex;
+      animation: mw-kanban-card-in var(--mw-duration-fast) var(--mw-ease-out);
+    }
+
+    // Three lines of description without a scrollbar
+    .mw-textarea {
+      min-height: 66px;
+    }
   }
 
-  .mw-kanban-card {
-    padding: spacing('3');
-  }
+  // Priority and assignee side by side, stacked once the lane gets too narrow
+  .mw-kanban-composer-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('3');
 
-  .mw-kanban-card .mw-card-ribbon {
-    top: 8px;
-    right: -36px;
-    width: 110px;
+    > * {
+      flex: 1 1 104px;
+    }
   }
 
-  .mw-kanban-card:has(> .mw-card-ribbon) .mw-kanban-card-title {
-    padding-right: $_mw-kanban-ribbon-clearance-compact;
+  .mw-kanban-composer-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: spacing('3');
   }
 
-  .mw-kanban-card-title {
-    font-size: font-size('sm');
+  // The ticket being edited steps aside for the composer that replaces it
+  .mw-kanban-editing {
+    display: none;
   }
 
-  // Tighter than the four lines a regular board allows
-  .mw-kanban-card-text {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
+  // Empty lane placeholder
+  .mw-kanban-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: spacing('5') spacing('3');
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+    text-align: center;
   }
 
-  .mw-kanban-card-footer {
-    margin-top: spacing('3');
-    padding-top: spacing('2');
+  .mw-kanban-column-body:has(.mw-kanban-card, .mw-kanban-composer.mw-active)
+    .mw-kanban-empty {
+    display: none;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .mw-kanban-card.mw-kanban-card-in,
-  .mw-kanban-card.mw-kanban-card-moved-forward,
-  .mw-kanban-card.mw-kanban-card-moved-back,
-  .mw-kanban-composer.mw-active {
-    animation: none;
+  // Compact board - for many lanes or a board next to a sidebar
+  .mw-kanban-compact {
+    --mw-kanban-column-min-height: 90px;
+
+    .mw-kanban-column {
+      padding: spacing('3');
+    }
+
+    .mw-kanban-column-header {
+      margin-bottom: spacing('3');
+    }
+
+    .mw-kanban-column-body {
+      gap: spacing('2');
+    }
+
+    .mw-kanban-card {
+      padding: spacing('3');
+    }
+
+    .mw-kanban-card .mw-card-ribbon {
+      top: 8px;
+      right: -36px;
+      width: 110px;
+    }
+
+    .mw-kanban-card:has(> .mw-card-ribbon) .mw-kanban-card-title {
+      padding-right: $_mw-kanban-ribbon-clearance-compact;
+    }
+
+    .mw-kanban-card-title {
+      font-size: font-size('sm');
+    }
+
+    // Tighter than the four lines a regular board allows
+    .mw-kanban-card-text {
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+    }
+
+    .mw-kanban-card-footer {
+      margin-top: spacing('3');
+      padding-top: spacing('2');
+    }
   }
 }