@duskmoon-dev/core 1.19.3 → 1.19.5

package/dist/components/alert.css

@@ -6,8 +6,11 @@
 @layer components {
   /* Base Alert */
   .alert {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "icon content actions close";
+    align-items: center;
     gap: 0.75rem;
     padding: 1rem;
     border-radius: var(--radius-sm);
@@ -18,6 +21,7 @@
 
   /* Alert Icon */
   .alert-icon {
+    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -25,10 +29,12 @@
     height: 1.5rem;
     font-size: 1.25rem;
     flex-shrink: 0;
+    align-self: start;
   }
 
   /* Alert Content */
   .alert-content {
+    grid-area: content;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -36,13 +42,42 @@
     min-width: 0;
   }
 
+  .alert-content > p {
+    margin: 0;
+  }
+
+  /* Keep the compact single-message form vertically balanced against global typography margins. */
+  .alert > p {
+    margin: 0;
+  }
+
+  .alert-horizontal { display: grid; }
+  .alert-actions-end { grid-template-areas: "icon content actions close"; }
+  .alert-actions-bottom {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "icon content close"
+      ". actions .";
+  }
+
+  .alert-actions-bottom .alert-actions {
+    justify-self: start;
+    margin-top: 0.5rem;
+  }
+  .alert-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
   .alert-title {
+    margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1.25rem;
   }
 
   .alert-description {
+    margin: 0;
     font-size: 0.875rem;
     line-height: 1.25rem;
     opacity: 0.9;
@@ -50,6 +85,7 @@
 
   /* Alert Close Button */
   .alert-close {
+    grid-area: close;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -263,6 +299,7 @@
   /* Dismissible */
   .alert-dismissible {
     padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
     position: relative;
   }
 
@@ -270,6 +307,7 @@
     position: absolute;
     top: 0.75rem;
     right: 0.75rem;
+    inset-inline-end: 0.75rem;
   }
 
   /* Compact */
@@ -289,11 +327,25 @@
     font-size: 0.8125rem;
   }
 
+  .alert-comfortable {
+    padding: 1.25rem;
+    gap: 1rem;
+  }
+
   /* Alert Actions */
   .alert-actions {
+    grid-area: actions;
     display: flex;
     gap: 0.5rem;
-    margin-top: 0.5rem;
+    margin-top: 0;
+    flex-wrap: wrap;
+    align-self: center;
+    justify-self: end;
+  }
+
+  .alert-vertical .alert-actions {
+    align-self: stretch;
+    width: 100%;
   }
 
   .alert-filled .alert-actions .btn-text {
@@ -317,4 +369,30 @@
       transition: none;
     }
   }
+
+  @media (max-width: 32rem) {
+    .alert:not(.alert-vertical) .alert-content,
+    .alert-horizontal .alert-content {
+      flex-basis: min(100%, 18rem);
+    }
+    .alert:not(.alert-vertical),
+    .alert-horizontal {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical).alert-actions-end,
+    .alert-horizontal.alert-actions-end {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical) .alert-actions,
+    .alert-horizontal .alert-actions {
+      justify-self: start;
+      margin-top: 0.5rem;
+    }
+  }
 }

package/dist/components/autocomplete.css

@@ -4,6 +4,8 @@
  */
 
 @layer components {
+  :where(.autocomplete, .autocomplete *) { box-sizing: border-box; }
+
   /* Autocomplete Container */
   .autocomplete {
     position: relative;
@@ -14,6 +16,7 @@
   /* Autocomplete Input */
   .autocomplete-input {
     width: 100%;
+    min-inline-size: 0;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -24,6 +27,37 @@
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
+  .autocomplete-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .autocomplete-toggle {
+    position: absolute;
+    inset-inline-end: 0.125rem;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    padding: 0;
+    font: inherit;
+    color: var(--color-on-surface);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .autocomplete-toggle:hover:not(:disabled) { background-color: var(--color-surface-container); }
+  .autocomplete-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
+  .autocomplete-toggle:disabled { opacity: 0.38; cursor: not-allowed; }
+  .autocomplete-sm .autocomplete-toggle { inline-size: 1.75rem; block-size: 1.75rem; }
+  .autocomplete-outlined .autocomplete-input { background-color: transparent; }
+  .autocomplete-options { list-style: none; margin: 0; padding: 0.25rem; }
+
   .autocomplete-input:focus {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
@@ -40,8 +74,7 @@
   .autocomplete-dropdown {
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     z-index: 1000;
     max-height: 15rem;
     margin-top: 0.25rem;
@@ -57,12 +90,18 @@
   }
 
   .autocomplete.autocomplete-open .autocomplete-dropdown,
+  .autocomplete-dropdown.autocomplete-dropdown-open,
   .autocomplete-dropdown.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }
 
+  .autocomplete-dropdown[hidden],
+  .autocomplete-option[hidden],
+  .autocomplete-no-results[hidden],
+  .autocomplete-no-options[hidden] { display: none; }
+
   /* Autocomplete Options */
   .autocomplete-option {
     display: flex;
@@ -77,16 +116,20 @@
 
   .autocomplete-option:hover,
   .autocomplete-option:focus,
+  .autocomplete-option.autocomplete-option-focused,
   .autocomplete-option.highlighted {
     background-color: var(--color-surface-container);
   }
 
-  .autocomplete-option.selected {
+  .autocomplete-option.selected,
+  .autocomplete-option.autocomplete-option-selected,
+  .autocomplete-option[aria-selected="true"] {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
   .autocomplete-option:disabled,
+  .autocomplete-option[aria-disabled="true"],
   .autocomplete-option.disabled {
     color: var(--color-on-surface-variant);
     cursor: not-allowed;
@@ -133,7 +176,8 @@
   }
 
   /* Group Header */
-  .autocomplete-group-header {
+  .autocomplete-group-header,
+  .autocomplete-group-label {
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
     font-weight: 600;
@@ -144,7 +188,8 @@
   }
 
   /* No Results */
-  .autocomplete-no-results {
+  .autocomplete-no-results,
+  .autocomplete-no-options {
     padding: 1rem;
     text-align: center;
     font-size: 0.875rem;
@@ -164,7 +209,7 @@
   /* Clear Button */
   .autocomplete-clear {
     position: absolute;
-    right: 0.75rem;
+    inset-inline-end: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -187,28 +232,31 @@
 
   /* With Clear Button */
   .autocomplete-clearable .autocomplete-input {
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
   }
 
   /* Multi-select Tags */
-  .autocomplete-tags {
+  .autocomplete-tags,
+  .autocomplete-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
     padding: 0.375rem;
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
     min-height: 2.75rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
     border-radius: var(--radius-sm);
   }
 
-  .autocomplete-tags:focus-within {
+  .autocomplete-tags:focus-within,
+  .autocomplete-chips:focus-within {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-container);
   }
 
-  .autocomplete-tag {
+  .autocomplete-tag,
+  .autocomplete-chip {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
@@ -219,7 +267,8 @@
     border-radius: var(--radius-xs);
   }
 
-  .autocomplete-tag-remove {
+  .autocomplete-tag-remove,
+  .autocomplete-chip-remove {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -233,7 +282,8 @@
     transition: background-color 150ms ease-in-out;
   }
 
-  .autocomplete-tag-remove:hover {
+  .autocomplete-tag-remove:hover,
+  .autocomplete-chip-remove:hover {
     background-color: var(--color-on-primary-container);
     color: var(--color-primary-container);
   }
@@ -341,6 +391,10 @@
     font-size: 1rem;
   }
 
+  /* Reserve the toggle's space after size shorthands set input padding. */
+  .autocomplete-input-wrapper .autocomplete-input { padding-inline-end: 3.25rem; }
+  .autocomplete-sm .autocomplete-input-wrapper .autocomplete-input { padding-inline-end: 2.25rem; }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .autocomplete-dropdown {

package/dist/components/avatar.css

@@ -13,7 +13,7 @@
     width: 3rem;
     height: 3rem;
     border-radius: var(--radius-full);
-    overflow: hidden;
+    overflow: visible;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
     font-weight: 500;
@@ -24,6 +24,7 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: inherit;
   }
 
   /* Avatar Placeholder */
@@ -33,7 +34,9 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    font-size: 1.25rem;
+    font-size: inherit;
+    border-radius: inherit;
+    overflow: hidden;
     text-transform: uppercase;
   }
 
@@ -135,24 +138,28 @@
   }
 
   .avatar-ring-primary {
-    outline-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary);
   }
 
   .avatar-ring-secondary {
-    outline-color: var(--color-secondary);
+    box-shadow: 0 0 0 3px var(--color-secondary);
   }
 
   .avatar-ring-tertiary {
-    outline-color: var(--color-tertiary);
+    box-shadow: 0 0 0 3px var(--color-tertiary);
   }
 
   /* Online/Offline Indicator */
   .avatar-online::after,
-  .avatar-offline::after {
+  .avatar-offline::after,
+  .avatar-status-online::after,
+  .avatar-status-offline::after,
+  .avatar-status-busy::after,
+  .avatar-status-away::after {
     content: '';
     position: absolute;
-    bottom: 0;
-    right: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
     width: 25%;
     height: 25%;
     min-width: 0.5rem;
@@ -161,14 +168,19 @@
     border: 2px solid var(--color-surface);
   }
 
-  .avatar-online::after {
+  .avatar-online::after,
+  .avatar-status-online::after {
     background-color: var(--color-success);
   }
 
-  .avatar-offline::after {
+  .avatar-offline::after,
+  .avatar-status-offline::after {
     background-color: var(--color-outline);
   }
 
+  .avatar-status-busy::after { background-color: var(--color-error); }
+  .avatar-status-away::after { background-color: var(--color-warning); }
+
   /* Avatar Group */
   .avatar-group {
     display: flex;
@@ -178,21 +190,33 @@
 
   .avatar-group .avatar {
     border: 2px solid var(--color-surface);
-    margin-left: -0.75rem;
+    margin-inline-start: -0.75rem;
   }
 
   .avatar-group .avatar:last-child {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   /* Avatar Group Sizes */
   .avatar-group-sm .avatar {
-    margin-left: -0.5rem;
+    margin-inline-start: -0.5rem;
   }
 
   .avatar-group-lg .avatar {
-    margin-left: -1rem;
-  }
+    margin-inline-start: -1rem;
+  }
+
+  /* Historical documented composition classes. */
+  .avatar-image { inline-size: 100%; block-size: 100%; border-radius: inherit; overflow: hidden; }
+  .avatar-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; }
+  .avatar-circle { border-radius: var(--radius-full); }
+  .avatar-bordered { border: 2px solid currentColor; }
+  .avatar-clickable { cursor: pointer; }
+  .avatar-overflow { font-size: 0.875rem; }
+  .avatar-group-dense > .avatar { margin-inline-start: -1rem; }
+  .avatar-group-xs > .avatar { inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.625rem; }
+  .avatar-group-xl > .avatar { inline-size: 6rem; block-size: 6rem; font-size: 2rem; }
+  .avatar-group-dense > .avatar:last-child { margin-inline-start: 0; }
 
   /* Focus State for Interactive Avatars */
   .avatar:focus-visible {

package/dist/components/badge.css

@@ -6,6 +6,7 @@
 @layer components {
   /* Base Badge */
   .badge {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -13,7 +14,10 @@
     font-size: 0.75rem;
     font-weight: 500;
     line-height: 1rem;
-    white-space: nowrap;
+    white-space: normal;
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
     border-radius: var(--radius-full);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
@@ -227,13 +231,13 @@
   /* Badge with Indicator Dot */
   .badge-indicator {
     position: relative;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
   }
 
   .badge-indicator::before {
     content: '';
     position: absolute;
-    left: 0.375rem;
+    inset-inline-start: 0.375rem;
     top: 50%;
     transform: translateY(-50%);
     width: 0.375rem;
@@ -242,6 +246,14 @@
     background-color: currentColor;
   }
 
+  .badge-filled { font-weight: 500; }
+  .badge-md { padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
+  .badge-notification { position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(50%, -50%); }
+  .badge-notification:dir(rtl) { transform: translate(-50%, -50%); }
+  .badge-removable { gap: 0.25rem; }
+  .badge-removable > button { display: inline-flex; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
+  .badge-removable > button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+
   /* Empty Badge (just a dot) */
   .badge-dot {
     width: 0.5rem;

package/dist/components/card.css

@@ -36,6 +36,8 @@
 
   /* Card Body */
   .card-body {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     --card-p: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -100,6 +102,16 @@
     border: 1px solid var(--color-outline);
     box-shadow: none;
   }
+  .card-outlined { border: 1px solid var(--color-outline); box-shadow: none; }
+  .card-outlined:hover { box-shadow: none; }
+  .card-filled { background: var(--color-surface-container-highest); box-shadow: none; }
+  .card-lowest { background: var(--color-surface-container-lowest); box-shadow: none; }
+  .card-low { background: var(--color-surface-container-low); box-shadow: var(--shadow-sm); }
+  .card-default { background: var(--color-surface-container); box-shadow: var(--shadow-md); }
+  .card-high { background: var(--color-surface-container-high); box-shadow: var(--shadow-lg); }
+  .card-highest { background: var(--color-surface-container-highest); box-shadow: var(--shadow-xl); }
+  .card-subtitle { color: var(--color-on-surface-variant); font-size: 0.875rem; }
+  .card-comfortable .card-body { --card-p: 2rem; }
 
   .card-bordered:hover {
     box-shadow: none;

package/dist/components/carousel.css

@@ -0,0 +1,28 @@
+@layer components {
+  .carousel {
+    display: flex;
+    gap: 1rem;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow: auto;
+    scroll-snap-type: inline mandatory;
+    scroll-behavior: smooth;
+    color: var(--color-on-surface);
+  }
+  .carousel-item { flex: none; min-inline-size: 0; max-inline-size: 100%; scroll-snap-align: start; overflow-wrap: anywhere; }
+  .carousel-horizontal { flex-direction: row; scroll-snap-type: inline mandatory; }
+  .carousel-center > .carousel-item { scroll-snap-align: center; }
+  .carousel-end > .carousel-item { scroll-snap-align: end; }
+  .carousel-start > .carousel-item { scroll-snap-align: start; }
+  .carousel-vertical { flex-direction: column; max-block-size: var(--carousel-height, 24rem); scroll-snap-type: block mandatory; }
+  .carousel:focus-visible, .carousel-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
+  @media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }
+  @media print { .carousel { flex-wrap: wrap; overflow: visible; max-block-size: none; } }
+  .carousel-primary { color: var(--color-primary); }
+  .carousel-secondary { color: var(--color-secondary); }
+  .carousel-tertiary { color: var(--color-tertiary); }
+  .carousel-info { color: var(--color-info); }
+  .carousel-success { color: var(--color-success); }
+  .carousel-warning { color: var(--color-warning); }
+  .carousel-error { color: var(--color-error); }
+}

package/dist/components/chat.css

@@ -431,6 +431,8 @@
     align-items: stretch;
     gap: 0.5rem;
     max-width: min(80ch, 100%);
+    min-inline-size: 0;
+    box-sizing: border-box;
     padding: 0.625rem 0.875rem;
     border-radius: 1rem;
     background-color: var(--chat-bubble-bg);
@@ -445,39 +447,41 @@
   .chat-bubble-content {
     min-width: 0;
   }
+  .chat-bubble pre { max-inline-size: 100%; min-inline-size: 0; overflow: auto; white-space: pre; }
+  .chat-bubble a { overflow-wrap: anywhere; text-decoration: underline; }
 
   .chat-start .chat-bubble::before,
   .chat-end .chat-bubble::before {
     content: "";
     position: absolute;
-    top: 0;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
+    inset-block-start: 0;
+    inline-size: 0.75rem;
+    block-size: 1rem;
     background-color: var(--chat-bubble-bg);
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-    filter:
-      drop-shadow(-1px 0 0 var(--color-outline-variant))
-      drop-shadow(0 -1px 0 var(--color-outline-variant));
+    mask-image: radial-gradient(ellipse at 0 100%, transparent 68%, black 72%);
     pointer-events: none;
   }
 
   .chat-start .chat-bubble::before {
-    left: -0.5rem;
+    inset-inline-start: -0.5rem;
   }
 
   .chat-start .chat-bubble {
-    border-top-left-radius: 0;
+    border-start-start-radius: 0;
   }
 
   .chat-end .chat-bubble::before {
-    right: -0.5rem;
+    inset-inline-end: -0.5rem;
     transform: scaleX(-1);
   }
 
   .chat-end .chat-bubble {
-    border-top-right-radius: 0;
+    border-start-end-radius: 0;
   }
 
+  .chat-start:dir(rtl) .chat-bubble::before { transform: scaleX(-1); }
+  .chat-end:dir(rtl) .chat-bubble::before { transform: none; }
+
   .chat-bubble-primary {
     --chat-bubble-bg: var(--color-primary-container);
     --chat-bubble-fg: var(--color-on-primary-container);