maverick-wave 5.38.0 → 6.0.0

package/src/scss/components/_breadcrumbs.scss

@@ -72,9 +72,9 @@
         }
       }
 
-      // Current page styling
+      // Marked, never guessed from position: a last item may well be a link
       &.mw-breadcrumbs-current a,
-      &:last-child a {
+      a[aria-current='page'] {
         color: var(--mw-text-color);
         border-color: var(--mw-primary-text-color);
         cursor: default;
@@ -115,4 +115,12 @@
       }
     }
   }
+
+  // Forced colours paint every border alike, so the current step is underlined
+  @media (forced-colors: active) {
+    .mw-breadcrumbs-item.mw-breadcrumbs-current a,
+    .mw-breadcrumbs-item a[aria-current='page'] {
+      text-decoration: underline 2px;
+    }
+  }
 }

package/src/scss/components/_chat.scss

@@ -0,0 +1,250 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  .mw-chat {
+    --mw-chat-bubble: var(--mw-card-background);
+
+    display: flex;
+    flex-direction: column;
+    gap: spacing('5');
+  }
+
+  // On a surface the card tone is the surface itself, only the border would show
+  :is(.mw-card, .mw-panel, .mw-modal, .mw-tile) .mw-chat {
+    --mw-chat-bubble: var(--mw-surface-muted);
+  }
+
+  .mw-chat-message {
+    display: flex;
+    align-items: flex-start;
+    gap: spacing('3');
+    max-width: min(100%, 44rem);
+
+    > .mw-avatar {
+      margin: 0;
+    }
+  }
+
+  .mw-chat-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: spacing('1');
+    min-width: 0;
+  }
+
+  .mw-chat-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: spacing('1') spacing('2');
+    padding-inline: spacing('1');
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+
+    strong {
+      color: var(--mw-text-color);
+      font-weight: font-weight('medium');
+    }
+  }
+
+  // The brand silhouette, sharp on the corner the message comes from
+  .mw-chat-bubble {
+    max-width: 100%;
+    padding: spacing('3') spacing('4');
+    background: var(--mw-chat-bubble);
+    border: 1px solid var(--mw-border);
+    border-radius: radius-sharp() radius('xl') radius-sharp() radius('xl');
+    color: var(--mw-text-color);
+    overflow-wrap: anywhere;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    pre {
+      max-width: 100%;
+      overflow-x: auto;
+    }
+  }
+
+  .mw-chat-message-user {
+    flex-direction: row-reverse;
+    align-self: flex-end;
+    max-width: min(88%, 36rem);
+
+    .mw-chat-body {
+      align-items: flex-end;
+    }
+
+    .mw-chat-meta {
+      justify-content: flex-end;
+    }
+
+    .mw-chat-bubble {
+      background: var(--mw-primary-background);
+      border-color: var(--mw-border-accent);
+      border-radius: radius('xl') radius-sharp() radius('xl') radius-sharp();
+    }
+  }
+
+  .mw-chat-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('1');
+    color: var(--mw-text-muted-color);
+
+    .mw-btn-ghost {
+      color: inherit;
+    }
+  }
+
+  // Tool activity and system lines - quieter than a message, in the message column
+  .mw-chat-note {
+    display: flex;
+    align-items: center;
+    gap: spacing('2');
+    padding-inline: spacing('1');
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+  }
+
+  .mw-chat-typing {
+    display: inline-flex;
+    align-items: center;
+    gap: spacing('1');
+    height: 1lh;
+
+    > span {
+      width: 0.45rem;
+      height: 0.45rem;
+      border-radius: radius('full');
+      background: currentcolor;
+      opacity: 0.6;
+      animation-name: mw-chat-typing;
+      animation-duration: motion(1.2s);
+      animation-timing-function: var(--mw-ease-in-out);
+      animation-iteration-count: infinite;
+
+      &:nth-child(2) {
+        animation-delay: motion(0.15s);
+      }
+
+      &:nth-child(3) {
+        animation-delay: motion(0.3s);
+      }
+    }
+  }
+
+  @keyframes mw-chat-typing {
+    0%,
+    60%,
+    100% {
+      opacity: 0.35;
+      transform: translateY(0);
+    }
+
+    30% {
+      opacity: 1;
+      transform: translateY(-3px);
+    }
+  }
+
+  .mw-chat-thinking {
+    color: var(--mw-text-muted-color);
+  }
+
+  // Clipped text is invisible under forced colours, hence the extra media guard
+  @supports (background-clip: text) {
+    .mw-chat-thinking {
+      @include motion-safe {
+        @media (forced-colors: none) {
+          background-image: linear-gradient(
+            90deg,
+            var(--mw-text-muted-color) 40%,
+            var(--mw-text-color) 50%,
+            var(--mw-text-muted-color) 60%
+          );
+          background-size: 250% 100%;
+          background-clip: text;
+          color: transparent;
+          animation-name: mw-chat-shimmer;
+          animation-duration: motion(2.2s);
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+        }
+      }
+    }
+  }
+
+  @keyframes mw-chat-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+
+    to {
+      background-position: 0 0;
+    }
+  }
+
+  .mw-chat-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('2');
+
+    .mw-btn {
+      border-radius: radius('xl');
+    }
+  }
+
+  // Drawn like a field, light in both themes - see $form-elements-background
+  .mw-chat-composer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--mw-form-elements-background);
+    color: var(--mw-form-elements-color);
+    border: 2px solid var(--mw-border);
+    border-radius: radius('md');
+    color-scheme: light;
+    transition: var(--mw-transition);
+
+    &:focus-within {
+      border-color: var(--mw-primary-color);
+      @include focus-halo;
+    }
+
+    .mw-textarea {
+      min-height: 3lh;
+      max-height: 12lh;
+      padding: spacing('3') spacing('4') spacing('1');
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+
+      @supports (field-sizing: content) {
+        min-height: 0;
+      }
+    }
+
+    .mw-btn-ghost {
+      color: inherit;
+    }
+  }
+
+  .mw-chat-composer-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing('2');
+    padding: spacing('2');
+
+    > :last-child {
+      margin-inline-start: auto;
+    }
+  }
+}

package/src/scss/components/_code.scss

@@ -36,10 +36,12 @@
     overflow-x: auto;
     border: none;
 
+    // The pre decides whether a long line wraps or scrolls
     code {
       color: inherit;
       padding: spacing('0');
-      white-space: pre-wrap;
+      white-space: inherit;
+      word-break: inherit;
       display: block;
       line-height: 1.5;
       font-size: font-size('3xs');

package/src/scss/components/_compare.scss

@@ -0,0 +1,135 @@
+@use '../abstracts' as *;
+
+$_handle-arrows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
+
+@layer mw.components {
+  // An invisible native range over the frame: pointer, touch and keys for free
+  .mw-compare {
+    --mw-compare-position: 50%;
+
+    position: relative;
+    display: block;
+    overflow: hidden;
+    isolation: isolate;
+    border-radius: radius-sharp() radius('xl') radius-sharp() radius('xl');
+    background-color: $fixed-stage;
+    user-select: none;
+
+    :root.mw-corners-even & {
+      border-radius: radius('md');
+    }
+
+    &-before,
+    &-after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    &-after {
+      position: absolute;
+      inset: 0;
+      clip-path: inset(0 0 0 var(--mw-compare-position));
+    }
+
+    // Drawn by the frame, because the range on top is invisible
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: var(--mw-compare-position);
+      z-index: z-index('lift');
+      pointer-events: none;
+    }
+
+    &::before {
+      inset-block: 0;
+      width: 2px;
+      translate: -50% 0;
+      background-color: $fixed-surface-text;
+      box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);
+    }
+
+    &::after {
+      top: 50%;
+      width: 2.75rem;
+      aspect-ratio: 1;
+      translate: -50% -50%;
+      border: 2px solid $fixed-surface-text;
+      border-radius: radius('full');
+      background:
+        $_handle-arrows center / 55% no-repeat,
+        color-mix(in srgb, #{$fixed-stage} 55%, transparent);
+      box-shadow: var(--mw-elevation-2);
+      transition: var(--mw-transition-fast);
+    }
+
+    &:has(> .mw-compare-range:active)::after {
+      @include motion-safe {
+        transform: scale(1.1);
+      }
+    }
+
+    &:has(> .mw-compare-range:focus-visible)::after {
+      outline: var(--mw-focus-ring-width) solid var(--mw-focus-ring-color);
+      outline-offset: var(--mw-focus-ring-offset);
+    }
+
+    &-range {
+      position: absolute;
+      inset: 0;
+      z-index: z-index('lift');
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      opacity: 0;
+      appearance: none;
+      background: transparent;
+      cursor: ew-resize;
+      // Vertical swipes still scroll the page on a phone
+      touch-action: pan-y;
+
+      // A hairline thumb, so a click lands on the split and not half a thumb off
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 2px;
+        height: 100%;
+      }
+
+      &::-moz-range-thumb {
+        width: 2px;
+        height: 100%;
+        border: 0;
+      }
+    }
+
+    &-label {
+      position: absolute;
+      top: spacing('4');
+      left: spacing('4');
+      z-index: z-index('lift');
+      padding: spacing('1') spacing('3');
+      border-radius: radius('sm');
+      background-color: color-mix(in srgb, #{$fixed-stage} 65%, transparent);
+      color: $fixed-surface-text;
+      font-size: font-size('xs');
+      font-weight: font-weight('medium');
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      pointer-events: none;
+
+      &-after {
+        left: auto;
+        right: spacing('4');
+      }
+    }
+  }
+}

package/src/scss/components/_deck.scss

@@ -87,21 +87,15 @@
     // .mw-accent-single on <html>, which makes the second colour the first.
     --mw-deck-second: var(--mw-secondary-color);
     --mw-deck-second-label: var(--mw-secondary-accent-text-color);
-    --mw-deck-second-ink: var(--mw-secondary-text-color);
     --mw-deck-second-ink-dark: #{$_secondary-ink-dark};
-    --mw-deck-first-ink: var(--mw-primary-text-color);
-
-    // A browser without light-dark() keeps the theme's own inks
-    @supports (color: light-dark(#000, #fff)) {
-      --mw-deck-first-ink: light-dark(
-        var(--mw-light-primary-text-color),
-        #{$_primary-ink-dark}
-      );
-      --mw-deck-second-ink: light-dark(
-        var(--mw-light-secondary-text-color),
-        #{$_secondary-ink-dark}
-      );
-    }
+    --mw-deck-first-ink: light-dark(
+      var(--mw-light-primary-text-color),
+      #{$_primary-ink-dark}
+    );
+    --mw-deck-second-ink: light-dark(
+      var(--mw-light-secondary-text-color),
+      #{$_secondary-ink-dark}
+    );
 
     @include tone('page');