@duskmoon-dev/core 1.19.3 → 1.19.4

package/dist/esm/components/autocomplete.js

@@ -5,6 +5,8 @@ export const css = `/**
  */
 
 @layer components {
+  :where(.autocomplete, .autocomplete *) { box-sizing: border-box; }
+
   /* Autocomplete Container */
   .autocomplete {
     position: relative;
@@ -15,6 +17,7 @@ export const css = `/**
   /* Autocomplete Input */
   .autocomplete-input {
     width: 100%;
+    min-inline-size: 0;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -25,6 +28,37 @@ export const css = `/**
     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);
@@ -41,8 +75,7 @@ export const css = `/**
   .autocomplete-dropdown {
     position: absolute;
     top: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     z-index: 1000;
     max-height: 15rem;
     margin-top: 0.25rem;
@@ -58,12 +91,18 @@ export const css = `/**
   }
 
   .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;
@@ -78,16 +117,20 @@ export const css = `/**
 
   .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;
@@ -134,7 +177,8 @@ export const css = `/**
   }
 
   /* Group Header */
-  .autocomplete-group-header {
+  .autocomplete-group-header,
+  .autocomplete-group-label {
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
     font-weight: 600;
@@ -145,7 +189,8 @@ export const css = `/**
   }
 
   /* No Results */
-  .autocomplete-no-results {
+  .autocomplete-no-results,
+  .autocomplete-no-options {
     padding: 1rem;
     text-align: center;
     font-size: 0.875rem;
@@ -165,7 +210,7 @@ export const css = `/**
   /* Clear Button */
   .autocomplete-clear {
     position: absolute;
-    right: 0.75rem;
+    inset-inline-end: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -188,28 +233,31 @@ export const css = `/**
 
   /* 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;
@@ -220,7 +268,8 @@ export const css = `/**
     border-radius: var(--radius-xs);
   }
 
-  .autocomplete-tag-remove {
+  .autocomplete-tag-remove,
+  .autocomplete-chip-remove {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -234,7 +283,8 @@ export const css = `/**
     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);
   }
@@ -342,6 +392,10 @@ export const css = `/**
     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/esm/components/avatar.js

@@ -14,7 +14,7 @@ export const css = `/**
     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;
@@ -25,6 +25,7 @@ export const css = `/**
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: inherit;
   }
 
   /* Avatar Placeholder */
@@ -34,7 +35,9 @@ export const css = `/**
     justify-content: center;
     width: 100%;
     height: 100%;
-    font-size: 1.25rem;
+    font-size: inherit;
+    border-radius: inherit;
+    overflow: hidden;
     text-transform: uppercase;
   }
 
@@ -136,24 +139,28 @@ export const css = `/**
   }
 
   .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;
@@ -162,14 +169,19 @@ export const css = `/**
     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;
@@ -179,21 +191,33 @@ export const css = `/**
 
   .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/esm/components/badge.js

@@ -7,6 +7,7 @@ export const css = `/**
 @layer components {
   /* Base Badge */
   .badge {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -14,7 +15,10 @@ export const css = `/**
     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);
@@ -228,13 +232,13 @@ export const css = `/**
   /* 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;
@@ -243,6 +247,14 @@ export const css = `/**
     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/esm/components/card.js

@@ -37,6 +37,8 @@ export const css = `/**
 
   /* Card Body */
   .card-body {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     --card-p: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -101,6 +103,16 @@ export const css = `/**
     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/esm/components/carousel.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for carousel
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/carousel.js

@@ -0,0 +1,37 @@
+// Auto-generated from carousel.css
+export const css = `@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); }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/chat.js

@@ -432,6 +432,8 @@ export const css = `@layer components {
     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);
@@ -446,39 +448,41 @@ export const css = `@layer components {
   .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);