@duskmoon-dev/core 1.17.2 → 1.18.0

package/README.md

@@ -140,7 +140,7 @@ Theme switching is instant and uses pure CSS custom properties.
 | Skeleton | `.skeleton`, `.skeleton-text`, `.skeleton-circle`, `.skeleton-wave` | Loading placeholders |
 | Snackbar | `.snackbar`, `.snackbar-message`, `.snackbar-action` | Brief notifications |
 | Toast | `.toast`, `.toast-container`, `.toast-info`, `.toast-success` | Toast notifications |
-| Tooltip | `.tooltip`, `.tooltip-content`, `.tooltip-top`, `.tooltip-bottom` | Hover tooltips |
+| Tooltip | `.tooltip[popover]`, `.tooltip-top`, `.tooltip-bottom` | Hint popovers (`interestfor`) |
 
 ### Layout (2)
 
@@ -164,7 +164,7 @@ Theme switching is instant and uses pure CSS custom properties.
 | Accordion | `.accordion`, `.accordion-item`, `.accordion-header`, `.accordion-content` | Expandable panels |
 | Bottom Sheet | `.bottomsheet`, `.bottomsheet-handle`, `.bottomsheet-content` | Mobile sheets |
 | Collapse | `.collapse`, `.collapse-content`, `.collapse-toggle` | Collapsible content |
-| Popover | `.popover`, `.popover-content`, `.popover-arrow` | Floating content |
+| Popover | `.popover[popover]`, `.popover-body`, `.popover-arrow` | Floating content (Popover API) |
 
 ### Misc (1)
 
@@ -441,3 +441,5 @@ See [specs/004-oklch-color-system/quickstart.md](./specs/004-oklch-color-system/
 ## License
 
 MIT
+
+<!-- release 32244683531 -->

package/dist/components/button.css

@@ -129,6 +129,56 @@
     filter: none;
   }
 
+  /* Semantic Colors — must precede outline/ghost/text/tonal so those variants
+     can override the filled background at equal specificity. */
+  .btn-info {
+    --btn-text-color: var(--color-info-content);
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  .btn-info:hover {
+    background-color: color-mix(in oklch, var(--color-info), black 10%);
+    border-color: color-mix(in oklch, var(--color-info), black 10%);
+    filter: none;
+  }
+
+  .btn-success {
+    --btn-text-color: var(--color-success-content);
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  .btn-success:hover {
+    background-color: color-mix(in oklch, var(--color-success), black 10%);
+    border-color: color-mix(in oklch, var(--color-success), black 10%);
+    filter: none;
+  }
+
+  .btn-warning {
+    --btn-text-color: var(--color-warning-content);
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+
+  .btn-warning:hover {
+    background-color: color-mix(in oklch, var(--color-warning), black 10%);
+    border-color: color-mix(in oklch, var(--color-warning), black 10%);
+    filter: none;
+  }
+
+  .btn-error {
+    --btn-text-color: var(--color-error-content);
+    background-color: var(--color-error);
+    border-color: var(--color-error);
+  }
+
+  .btn-error:hover {
+    background-color: color-mix(in oklch, var(--color-error), black 10%);
+    border-color: color-mix(in oklch, var(--color-error), black 10%);
+    filter: none;
+  }
+
   /* Outline / Outlined Variant (.btn-outlined is an alias) */
   .btn-outline,
   .btn-outlined {
@@ -488,55 +538,6 @@
     background-color: var(--color-error-container);
   }
 
-  /* Semantic Colors */
-  .btn-info {
-    --btn-text-color: var(--color-info-content);
-    background-color: var(--color-info);
-    border-color: var(--color-info);
-  }
-
-  .btn-info:hover {
-    background-color: color-mix(in oklch, var(--color-info), black 10%);
-    border-color: color-mix(in oklch, var(--color-info), black 10%);
-    filter: none;
-  }
-
-  .btn-success {
-    --btn-text-color: var(--color-success-content);
-    background-color: var(--color-success);
-    border-color: var(--color-success);
-  }
-
-  .btn-success:hover {
-    background-color: color-mix(in oklch, var(--color-success), black 10%);
-    border-color: color-mix(in oklch, var(--color-success), black 10%);
-    filter: none;
-  }
-
-  .btn-warning {
-    --btn-text-color: var(--color-warning-content);
-    background-color: var(--color-warning);
-    border-color: var(--color-warning);
-  }
-
-  .btn-warning:hover {
-    background-color: color-mix(in oklch, var(--color-warning), black 10%);
-    border-color: color-mix(in oklch, var(--color-warning), black 10%);
-    filter: none;
-  }
-
-  .btn-error {
-    --btn-text-color: var(--color-error-content);
-    background-color: var(--color-error);
-    border-color: var(--color-error);
-  }
-
-  .btn-error:hover {
-    background-color: color-mix(in oklch, var(--color-error), black 10%);
-    border-color: color-mix(in oklch, var(--color-error), black 10%);
-    filter: none;
-  }
-
   /* Size Variants */
   .btn-xs {
     --btn-p: 0.5rem;

package/dist/components/chat.css

@@ -1,9 +1,370 @@
-/**
- * Chat Component Styles
- * DuskMoonUI - LLM-oriented chat primitives
- */
-
 @layer components {
+  /**
+   * Scrollable transcript with Scroll-Driven Animations indicators.
+   * Set an explicit height / max-height (or place in a flex child with min-height: 0).
+   * Pair each .chat[data-chat-tl="N"] with .chat-scroll-indicator[data-chat-tl="N"] (N = 1..24).
+   */
+  .chat-scroll {
+    --chat-scroll-indicator-size: 0.875rem;
+    --chat-scroll-indicator-active-size: 1.125rem;
+    --chat-scroll-indicator-thickness: 0.1875rem;
+    --chat-scroll-indicator-gap: 0.3125rem;
+    --chat-scroll-indicator-hover-scale: 1.55;
+    --chat-scroll-indicator-neighbor-scale: 1.22;
+
+    container-type: size;
+    container-name: chat-scroll;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    align-items: start;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    overscroll-behavior-y: contain;
+    timeline-scope:
+    --chat-1,
+    --chat-2,
+    --chat-3,
+    --chat-4,
+    --chat-5,
+    --chat-6,
+    --chat-7,
+    --chat-8,
+    --chat-9,
+    --chat-10,
+    --chat-11,
+    --chat-12,
+    --chat-13,
+    --chat-14,
+    --chat-15,
+    --chat-16,
+    --chat-17,
+    --chat-18,
+    --chat-19,
+    --chat-20,
+    --chat-21,
+    --chat-22,
+    --chat-23,
+    --chat-24;
+  }
+
+  .chat-scroll-track {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--chat-scroll-indicator-gap);
+    width: calc(
+      var(--chat-scroll-indicator-active-size) * var(--chat-scroll-indicator-hover-scale)
+    );
+    height: 100cqh;
+    margin: 0;
+    padding: 0.75rem 0;
+    overflow: visible;
+    list-style: none;
+    pointer-events: none;
+  }
+
+  .chat-scroll-body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .chat-scroll-indicator {
+    display: block;
+    flex-shrink: 0;
+    width: var(--chat-scroll-indicator-size);
+    height: var(--chat-scroll-indicator-thickness);
+    border: 0;
+    border-radius: 999px;
+    padding: 0;
+    appearance: none;
+    background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+    color: inherit;
+    font: inherit;
+    opacity: 0.45;
+    pointer-events: auto;
+    text-decoration: none;
+    cursor: pointer;
+    transform: scaleX(1);
+    transform-origin: center;
+    transition:
+      transform 140ms ease,
+      opacity 140ms ease,
+      background-color 140ms ease;
+  }
+
+  .chat-scroll-indicator:hover,
+  .chat-scroll-indicator:focus-visible {
+    transform: scaleX(var(--chat-scroll-indicator-hover-scale)) scaleY(1.35);
+    background-color: var(--color-on-surface);
+    opacity: 1;
+  }
+
+  .chat-scroll-indicator:hover + .chat-scroll-indicator,
+  .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover) {
+    transform: scaleX(var(--chat-scroll-indicator-neighbor-scale)) scaleY(1.15);
+    background-color: color-mix(in oklch, var(--color-on-surface) 55%, transparent);
+    opacity: 0.75;
+  }
+
+  .chat[data-chat-tl] {
+    scroll-margin-block-start: 0.5rem;
+  }
+
+  .chat-scroll-indicator:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
+  }
+
+  @supports (animation-timeline: --chat-1) {
+    .chat-scroll-indicator {
+      animation-name: chat-scroll-indicator-activate;
+      animation-duration: 1ms;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-range: entry 0% exit 100%;
+    }
+  }
+
+  .chat[data-chat-tl="1"] {
+    view-timeline-name: --chat-1;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="2"] {
+    view-timeline-name: --chat-2;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="3"] {
+    view-timeline-name: --chat-3;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="4"] {
+    view-timeline-name: --chat-4;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="5"] {
+    view-timeline-name: --chat-5;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="6"] {
+    view-timeline-name: --chat-6;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="7"] {
+    view-timeline-name: --chat-7;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="8"] {
+    view-timeline-name: --chat-8;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="9"] {
+    view-timeline-name: --chat-9;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="10"] {
+    view-timeline-name: --chat-10;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="11"] {
+    view-timeline-name: --chat-11;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="12"] {
+    view-timeline-name: --chat-12;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="13"] {
+    view-timeline-name: --chat-13;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="14"] {
+    view-timeline-name: --chat-14;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="15"] {
+    view-timeline-name: --chat-15;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="16"] {
+    view-timeline-name: --chat-16;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="17"] {
+    view-timeline-name: --chat-17;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="18"] {
+    view-timeline-name: --chat-18;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="19"] {
+    view-timeline-name: --chat-19;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="20"] {
+    view-timeline-name: --chat-20;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="21"] {
+    view-timeline-name: --chat-21;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="22"] {
+    view-timeline-name: --chat-22;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="23"] {
+    view-timeline-name: --chat-23;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="24"] {
+    view-timeline-name: --chat-24;
+    view-timeline-axis: block;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="1"] {
+    animation-timeline: --chat-1;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="2"] {
+    animation-timeline: --chat-2;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="3"] {
+    animation-timeline: --chat-3;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="4"] {
+    animation-timeline: --chat-4;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="5"] {
+    animation-timeline: --chat-5;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="6"] {
+    animation-timeline: --chat-6;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="7"] {
+    animation-timeline: --chat-7;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="8"] {
+    animation-timeline: --chat-8;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="9"] {
+    animation-timeline: --chat-9;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="10"] {
+    animation-timeline: --chat-10;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="11"] {
+    animation-timeline: --chat-11;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="12"] {
+    animation-timeline: --chat-12;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="13"] {
+    animation-timeline: --chat-13;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="14"] {
+    animation-timeline: --chat-14;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="15"] {
+    animation-timeline: --chat-15;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="16"] {
+    animation-timeline: --chat-16;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="17"] {
+    animation-timeline: --chat-17;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="18"] {
+    animation-timeline: --chat-18;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="19"] {
+    animation-timeline: --chat-19;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="20"] {
+    animation-timeline: --chat-20;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="21"] {
+    animation-timeline: --chat-21;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="22"] {
+    animation-timeline: --chat-22;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="23"] {
+    animation-timeline: --chat-23;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="24"] {
+    animation-timeline: --chat-24;
+  }
+
+  @keyframes chat-scroll-indicator-activate {
+    0%,
+    100% {
+      width: var(--chat-scroll-indicator-size);
+      background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+      opacity: 0.45;
+    }
+
+    35%,
+    65% {
+      width: var(--chat-scroll-indicator-active-size);
+      background-color: var(--color-on-surface);
+      opacity: 1;
+    }
+  }
+
   .chat {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -65,6 +426,10 @@
     --chat-bubble-fg: var(--color-on-surface);
 
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
     max-width: min(80ch, 100%);
     padding: 0.625rem 0.875rem;
     border-radius: 1rem;
@@ -77,6 +442,10 @@
     word-break: break-word;
   }
 
+  .chat-bubble-content {
+    min-width: 0;
+  }
+
   .chat-start .chat-bubble::before,
   .chat-end .chat-bubble::before,
   .chat-start .chat-bubble::after,
@@ -259,6 +628,14 @@
     overflow: hidden;
   }
 
+  .chat-bubble > .chat-reasoning,
+  .chat-bubble > .chat-tool,
+  .chat-reasoning .chat-tool,
+  .chat-reasoning-body > .chat-tool {
+    width: 100%;
+    max-width: none;
+  }
+
   .chat-reasoning > summary,
   .chat-tool > summary {
     cursor: pointer;
@@ -271,12 +648,28 @@
     font-weight: 500;
   }
 
-  .chat-reasoning > :not(summary) {
+  .chat-reasoning-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0 0.75rem 0.75rem;
+    color: var(--color-on-surface-variant);
+  }
+
+  .chat-reasoning-body > :not(.chat-tool) {
+    font-style: italic;
+  }
+
+  .chat-reasoning > div:not(.chat-tool):not(.chat-reasoning-body) {
     padding: 0 0.75rem 0.75rem;
     color: var(--color-on-surface-variant);
     font-style: italic;
   }
 
+  .chat-reasoning > .chat-tool {
+    margin: 0 0.75rem 0.75rem;
+  }
+
   .chat-tool-header {
     display: flex;
     align-items: center;
@@ -371,7 +764,8 @@
     animation-delay: 300ms;
   }
 
-  .chat-bubble-streaming::after {
+  .chat-bubble-streaming::after,
+  .chat-bubble-content.chat-bubble-streaming::after {
     content: "";
     display: inline-block;
     width: 1px;
@@ -382,6 +776,10 @@
     animation: chat-stream-caret 1s step-end infinite;
   }
 
+  .chat-bubble.chat-bubble-streaming:has(.chat-reasoning, .chat-tool, .chat-bubble-content)::after {
+    content: none;
+  }
+
   .chat-reasoning > summary:focus-visible,
   .chat-tool > summary:focus-visible {
     outline: none;
@@ -421,15 +819,26 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .chat-scroll {
+      scroll-behavior: auto;
+    }
+
+    .chat-scroll-indicator {
+      animation: none;
+      transition: none;
+    }
+
     .chat-typing::before,
     .chat-typing::after,
     .chat-typing span,
     .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after,
     .chat-tool-running .chat-tool-header::before {
       animation: none;
     }
 
-    .chat-bubble-streaming::after {
+    .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after {
       opacity: 1;
     }
   }