@duskmoon-dev/core 1.19.2 → 1.19.4

package/dist/components/validator.css

@@ -0,0 +1,66 @@
+/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* Compatibility wrapper states are intentionally immediate. */
+  :is(.form-group-info, .form-control.info) { --dm-validation-color: var(--color-info); }
+  :is(.form-group-warning, .form-control.warning) { --dm-validation-color: var(--color-warning); }
+  :is(.form-group-success, .form-control.success) { --dm-validation-color: var(--color-success); }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:where(.form-group-error *, .form-control.error *)):not(:disabled) {
+    --dm-validation-color: var(--color-success);
+    --dm-validation-content: var(--color-success-content);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :invalid, .validate:invalid, .validator:user-invalid):not(:disabled) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* Higher specificity than native states, including server-invalid + user-valid. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .form-group-error *, .form-control.error *):not(:disabled):is(:focus, :not(:focus)) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* This shared selector wins over filled/ghost focus and semantic modifiers. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled) {
+    color: var(--dm-validation-color);
+    border-color: var(--dm-validation-color);
+    --checkbox-color: var(--dm-validation-color);
+    --radio-color: var(--dm-validation-color);
+    --switch-color: var(--dm-validation-color);
+    --switch-content-color: var(--dm-validation-content, var(--color-primary-content));
+    --toggle-color: var(--dm-validation-color);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled):focus {
+    border-color: var(--dm-validation-color);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dm-validation-color) 20%, transparent);
+  }
+
+  :is(.form-group-error, .form-control.error) :is(.form-label, .label-text) { color: var(--color-error); }
+  :is(.form-group-success, .form-control.success) :is(.form-label, .label-text) { color: var(--color-success); }
+  :is(.form-group-warning, .form-control.warning) :is(.form-label, .label-text) { color: var(--color-warning); }
+  :is(.form-group-info, .form-control.info) :is(.form-label, .label-text) { color: var(--color-info); }
+
+  .validator-hint { font-size: 0.75rem; color: var(--color-on-surface-variant); }
+  .validator-error { display: none; font-size: 0.75rem; color: var(--color-error); }
+  /* Keep OTP actions stationary when blur reveals an error during a click. */
+  .otp-code ~ .validator-error { display: block; visibility: hidden; }
+  :is(.form-group, .form-control):has(:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > .validator-error,
+  :is(.form-group-error, .form-control.error) > .validator-error { display: block; visibility: visible; }
+
+  @media (forced-colors: active) {
+    :is(input, select, textarea):is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    input:is(.checkbox, .radio, .switch, .toggle) { appearance: auto; }
+    input:is(.checkbox, .radio, .switch, .toggle)::before,
+    input:is(.checkbox, .radio, .switch, .toggle)::after { content: none; }
+  }
+}

package/dist/effects/aura.css

@@ -0,0 +1,22 @@
+@layer components {
+  .aura {
+    position: relative;
+    isolation: isolate;
+    border-radius: var(--radius-md);
+    outline: 1px solid var(--color-primary);
+  }
+  .aura::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    box-shadow: 0 0 1rem color-mix(in oklch, var(--color-primary) 35%, transparent);
+    pointer-events: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .aura-animated::before { animation: dm-aura 4s ease-in-out infinite; }
+  }
+  @keyframes dm-aura { 50% { opacity: 0.4; } }
+  @media print { .aura::before { display: none; } }
+}

package/dist/effects/hover-3d.css

@@ -0,0 +1,8 @@
+@layer components {
+  .hover-3d { border-radius: var(--radius-md); }
+  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    .hover-3d { transition: transform 200ms ease; }
+    .hover-3d:hover:not(:focus-within) { transform: perspective(60rem) rotateX(var(--hover-3d-x, 2deg)) rotateY(var(--hover-3d-y, -2deg)); }
+  }
+  @media print { .hover-3d { transform: none; } }
+}

package/dist/effects/hover-gallery.css

@@ -0,0 +1,14 @@
+@layer components {
+  .hover-gallery { display: grid; gap: 0.5rem; min-inline-size: 0; color: var(--color-on-surface); }
+  .hover-gallery-stage { aspect-ratio: var(--hover-gallery-ratio, 4 / 3); overflow: hidden; border-radius: var(--radius-md); }
+  .hover-gallery-stage img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .hover-gallery-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .hover-gallery-controls > button { border: 1px solid currentColor; color: inherit; background: var(--color-surface-container); padding: 0.25rem; border-radius: var(--radius-sm); cursor: pointer; }
+  .hover-gallery-controls img { display: block; inline-size: 3rem; block-size: 3rem; object-fit: cover; }
+  .hover-gallery-controls > button[aria-pressed="true"] { color: var(--color-primary); outline: 2px solid currentColor; }
+  .hover-gallery-controls > button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .hover-gallery-controls > button:hover { background: var(--color-primary-container); }
+  }
+  @media print { .hover-gallery-controls { display: none; } }
+}

package/dist/effects/index.css

@@ -0,0 +1,65 @@
+/* Explicitly opt-in. Not imported by core or components/index.css. */
+@layer components {
+  .aura {
+    position: relative;
+    isolation: isolate;
+    border-radius: var(--radius-md);
+    outline: 1px solid var(--color-primary);
+  }
+  .aura::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    box-shadow: 0 0 1rem color-mix(in oklch, var(--color-primary) 35%, transparent);
+    pointer-events: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .aura-animated::before { animation: dm-aura 4s ease-in-out infinite; }
+  }
+  @keyframes dm-aura { 50% { opacity: 0.4; } }
+  @media print { .aura::before { display: none; } }
+}
+
+@layer components {
+  .hover-3d { border-radius: var(--radius-md); }
+  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    .hover-3d { transition: transform 200ms ease; }
+    .hover-3d:hover:not(:focus-within) { transform: perspective(60rem) rotateX(var(--hover-3d-x, 2deg)) rotateY(var(--hover-3d-y, -2deg)); }
+  }
+  @media print { .hover-3d { transform: none; } }
+}
+
+@layer components {
+  .hover-gallery { display: grid; gap: 0.5rem; min-inline-size: 0; color: var(--color-on-surface); }
+  .hover-gallery-stage { aspect-ratio: var(--hover-gallery-ratio, 4 / 3); overflow: hidden; border-radius: var(--radius-md); }
+  .hover-gallery-stage img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+  .hover-gallery-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .hover-gallery-controls > button { border: 1px solid currentColor; color: inherit; background: var(--color-surface-container); padding: 0.25rem; border-radius: var(--radius-sm); cursor: pointer; }
+  .hover-gallery-controls img { display: block; inline-size: 3rem; block-size: 3rem; object-fit: cover; }
+  .hover-gallery-controls > button[aria-pressed="true"] { color: var(--color-primary); outline: 2px solid currentColor; }
+  .hover-gallery-controls > button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .hover-gallery-controls > button:hover { background: var(--color-primary-container); }
+  }
+  @media print { .hover-gallery-controls { display: none; } }
+}
+
+@layer components {
+  .text-rotate { display: inline-grid; color: var(--color-on-surface); vertical-align: baseline; }
+  .text-rotate > span { grid-area: 1 / 1; visibility: hidden; }
+  .text-rotate > span:first-child { visibility: visible; }
+  @media (prefers-reduced-motion: no-preference) {
+    .text-rotate-animated > span { animation: dm-text-rotate var(--text-rotate-duration, 6s) steps(1, end) infinite; }
+    .text-rotate-animated > span:nth-child(2) { animation-delay: calc(var(--text-rotate-duration, 6s) / -3); }
+    .text-rotate-animated > span:nth-child(3) { animation-delay: calc(var(--text-rotate-duration, 6s) / -3 * 2); }
+    .text-rotate-animated:is(:hover, :focus-within, .text-rotate-paused) > span { animation-play-state: paused; }
+  }
+  @keyframes dm-text-rotate { 0%, 33.32% { visibility: visible; } 33.33%, 100% { visibility: hidden; } }
+  @media print {
+    .text-rotate > span { animation: none; visibility: hidden; }
+    .text-rotate > span:first-child { visibility: visible; }
+  }
+}
+

package/dist/effects/text-rotate.css

@@ -0,0 +1,16 @@
+@layer components {
+  .text-rotate { display: inline-grid; color: var(--color-on-surface); vertical-align: baseline; }
+  .text-rotate > span { grid-area: 1 / 1; visibility: hidden; }
+  .text-rotate > span:first-child { visibility: visible; }
+  @media (prefers-reduced-motion: no-preference) {
+    .text-rotate-animated > span { animation: dm-text-rotate var(--text-rotate-duration, 6s) steps(1, end) infinite; }
+    .text-rotate-animated > span:nth-child(2) { animation-delay: calc(var(--text-rotate-duration, 6s) / -3); }
+    .text-rotate-animated > span:nth-child(3) { animation-delay: calc(var(--text-rotate-duration, 6s) / -3 * 2); }
+    .text-rotate-animated:is(:hover, :focus-within, .text-rotate-paused) > span { animation-play-state: paused; }
+  }
+  @keyframes dm-text-rotate { 0%, 33.32% { visibility: visible; } 33.33%, 100% { visibility: hidden; } }
+  @media print {
+    .text-rotate > span { animation: none; visibility: hidden; }
+    .text-rotate > span:first-child { visibility: visible; }
+  }
+}

package/dist/esm/components/accordion.js

@@ -43,7 +43,7 @@ export const css = `/**
     background-color: transparent;
     border: none;
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition: background-color 150ms ease-in-out;
   }
 
@@ -57,7 +57,8 @@ export const css = `/**
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
-  .accordion-item.open .accordion-header {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  details.accordion-item[open] > .accordion-header {
     background-color: var(--color-surface-container);
   }
 
@@ -68,7 +69,7 @@ export const css = `/**
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: 0.75rem;
+    margin-inline-end: 0.75rem;
     color: var(--color-on-surface-variant);
     flex-shrink: 0;
   }
@@ -93,13 +94,14 @@ export const css = `/**
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin-left: auto;
+    margin-inline-start: auto;
     color: var(--color-on-surface-variant);
     transition: transform 200ms ease-in-out;
     flex-shrink: 0;
   }
 
-  .accordion-item.open .accordion-expand {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand,
+  details.accordion-item[open] > .accordion-header > .accordion-expand {
     transform: rotate(180deg);
   }
 
@@ -110,12 +112,14 @@ export const css = `/**
     transition: grid-template-rows 200ms ease-in-out;
   }
 
-  .accordion-item.open .accordion-content {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-content,
+  details.accordion-item[open] > .accordion-content {
     grid-template-rows: 1fr;
   }
 
   .accordion-body {
     overflow: hidden;
+    min-block-size: 0;
   }
 
   .accordion-body-inner {
@@ -153,7 +157,8 @@ export const css = `/**
   }
 
   .accordion-filled .accordion-header:hover,
-  .accordion-filled .accordion-item.open .accordion-header {
+  .accordion-filled > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-filled > details.accordion-item[open] > .accordion-header {
     background-color: var(--color-surface-container-high);
   }
 
@@ -225,15 +230,34 @@ export const css = `/**
   }
 
   /* Color Variants */
-  .accordion-primary .accordion-item.open .accordion-header {
+  .accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-primary > details.accordion-item[open] > .accordion-header {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
-  .accordion-primary .accordion-item.open .accordion-expand {
+  .accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand,
+  .accordion-primary > details.accordion-item[open] > .accordion-header > .accordion-expand {
     color: var(--color-on-primary-container);
   }
 
+  .accordion-outlined { border: 1px solid var(--color-outline-variant); }
+  .accordion-comfortable .accordion-header { padding: 1.25rem; }
+  .accordion-header-icon { display: flex; align-items: center; gap: 0.75rem; }
+  .accordion-header-icon-leading { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
+  .accordion-item-disabled > .accordion-header { opacity: 0.6; cursor: not-allowed; }
+  .accordion-no-animation .accordion-content, .accordion-no-animation .accordion-expand { transition: none; }
+  .accordion-secondary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-secondary > details.accordion-item[open] > .accordion-header { color: var(--color-secondary); }
+  .accordion-tertiary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-tertiary > details.accordion-item[open] > .accordion-header { color: var(--color-tertiary); }
+  details.accordion-item > summary { list-style: none; }
+  details.accordion-item > summary::-webkit-details-marker { display: none; }
+  details.accordion-item:not([open]) > .accordion-content,
+  .accordion-item:not(details):not(.open):not(.accordion-item-open) > .accordion-content,
+  .accordion-content[hidden] { display: none; }
+  .accordion-title, .accordion-body-inner { min-inline-size: 0; overflow-wrap: anywhere; }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .accordion-content,

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;