@duskmoon-dev/core 1.19.3 → 1.19.4

package/dist/components/toggle.css

@@ -3,6 +3,172 @@
  * DuskMoonUI - Material Design 3 inspired toggle button
  * Used for selecting between multiple options or toggling states
  */
+/** 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; }
+  }
+}
+
+
+@layer components {
+  /* Toggle/Switch */
+  .toggle {
+    --toggle-color: var(--color-primary);
+    box-sizing: border-box;
+    color: var(--color-on-surface);
+    border: 1px solid currentColor;
+    appearance: none;
+    width: 3rem;
+    height: 1.5rem;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-surface-container-highest);
+    cursor: pointer;
+    transition: all 150ms ease-in-out;
+    position: relative;
+  }
+
+  .toggle::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-on-surface-variant);
+    border-radius: var(--radius-full);
+    transition: all 150ms ease-in-out;
+  }
+
+  .toggle:checked {
+    background-color: var(--toggle-color);
+  }
+
+  .toggle:checked::after {
+    inset-inline-start: calc(100% - 1.25rem);
+    background-color: var(--dm-validation-content, var(--color-primary-content));
+  }
+
+  .toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  .toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Toggle Sizes */
+  .toggle-xs {
+    width: 2rem;
+    height: 1rem;
+  }
+
+  .toggle-xs::after {
+    width: 0.625rem;
+    height: 0.625rem;
+    inset-inline-start: 0.1875rem;
+  }
+
+  .toggle-xs:checked::after {
+    inset-inline-start: calc(100% - 0.8125rem);
+  }
+
+  .toggle-sm {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+
+  .toggle-sm::after {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .toggle-lg {
+    width: 4rem;
+    height: 2rem;
+  }
+
+  .toggle-lg::after {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .toggle-sm:checked::after { inset-inline-start: calc(100% - 1rem); }
+  .toggle-lg:checked::after { inset-inline-start: calc(100% - 1.75rem); }
+  .toggle-primary { --toggle-color: var(--color-primary); }
+  .toggle-secondary { --toggle-color: var(--color-secondary); }
+  .toggle-tertiary { --toggle-color: var(--color-tertiary); }
+  .toggle-info { --toggle-color: var(--color-info); }
+  .toggle-success { --toggle-color: var(--color-success); }
+  .toggle-warning { --toggle-color: var(--color-warning); }
+  .toggle-error { --toggle-color: var(--color-error); }
+  .toggle-ghost { border-color: transparent; }
+  @media (prefers-reduced-motion: reduce) { .toggle, .toggle::after { transition: none; } }
+}
+
 
 @layer components {
   /* Base toggle button */
@@ -30,93 +196,93 @@
   }
 
   /* Active/Selected state */
-  .toggle-btn-active,
-  .toggle-btn.active {
+  :is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn.active:not([aria-pressed]) {
     color: var(--color-on-primary-container);
     background-color: var(--color-primary-container);
     border-color: var(--color-primary);
   }
 
-  .toggle-btn-active:hover:not(:disabled),
-  .toggle-btn.active:hover:not(:disabled) {
+  :is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]):hover:not(:disabled),
+  .toggle-btn.active:not([aria-pressed]):hover:not(:disabled) {
     background-color: color-mix(in oklch, var(--color-primary-container) 90%, transparent);
   }
 
   /* Primary variant */
-  .toggle-btn-primary.toggle-btn-active,
-  .toggle-btn-primary.active {
+  .toggle-btn-primary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-primary.active:not([aria-pressed]) {
     color: var(--color-on-primary-container);
     background-color: var(--color-primary-container);
     border-color: var(--color-primary);
   }
 
   /* Secondary variant */
-  .toggle-btn-secondary.toggle-btn-active,
-  .toggle-btn-secondary.active {
+  .toggle-btn-secondary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-secondary.active:not([aria-pressed]) {
     color: var(--color-on-secondary-container);
     background-color: var(--color-secondary-container);
     border-color: var(--color-secondary);
   }
 
   /* Tertiary variant */
-  .toggle-btn-tertiary.toggle-btn-active,
-  .toggle-btn-tertiary.active {
+  .toggle-btn-tertiary:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-tertiary.active:not([aria-pressed]) {
     color: var(--color-on-tertiary-container);
     background-color: var(--color-tertiary-container);
     border-color: var(--color-tertiary);
   }
 
   /* Info variant */
-  .toggle-btn-info.toggle-btn-active,
-  .toggle-btn-info.active {
+  .toggle-btn-info:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-info.active:not([aria-pressed]) {
     color: var(--color-on-info-container);
     background-color: var(--color-info-container);
     border-color: var(--color-info);
   }
 
   /* Success variant */
-  .toggle-btn-success.toggle-btn-active,
-  .toggle-btn-success.active {
+  .toggle-btn-success:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-success.active:not([aria-pressed]) {
     color: var(--color-on-success-container);
     background-color: var(--color-success-container);
     border-color: var(--color-success);
   }
 
   /* Warning variant */
-  .toggle-btn-warning.toggle-btn-active,
-  .toggle-btn-warning.active {
+  .toggle-btn-warning:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-warning.active:not([aria-pressed]) {
     color: var(--color-on-warning-container);
     background-color: var(--color-warning-container);
     border-color: var(--color-warning);
   }
 
   /* Error variant */
-  .toggle-btn-error.toggle-btn-active,
-  .toggle-btn-error.active {
+  .toggle-btn-error:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-error.active:not([aria-pressed]) {
     color: var(--color-on-error-container);
     background-color: var(--color-error-container);
     border-color: var(--color-error);
   }
 
   /* Accent variant */
-  .toggle-btn-accent.toggle-btn-active,
-  .toggle-btn-accent.active {
+  .toggle-btn-accent:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-accent.active:not([aria-pressed]) {
     color: var(--color-on-surface);
     background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
     border-color: var(--color-accent);
   }
 
   /* Neutral variant */
-  .toggle-btn-neutral.toggle-btn-active,
-  .toggle-btn-neutral.active {
+  .toggle-btn-neutral:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-neutral.active:not([aria-pressed]) {
     color: var(--color-on-surface);
     background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
     border-color: var(--color-neutral);
   }
 
   /* Base variant */
-  .toggle-btn-base.toggle-btn-active,
-  .toggle-btn-base.active {
+  .toggle-btn-base:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-btn-base.active:not([aria-pressed]) {
     color: var(--color-base-content);
     background-color: var(--color-base-200);
     border-color: var(--color-base-content);
@@ -245,8 +411,8 @@
     border-radius: var(--radius-xs);
   }
 
-  .toggle-segmented .toggle-btn.toggle-btn-active,
-  .toggle-segmented .toggle-btn.active {
+  .toggle-segmented .toggle-btn:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-segmented .toggle-btn.active:not([aria-pressed]) {
     background-color: var(--color-surface-variant);
     border-color: transparent;
     box-shadow: var(--shadow-sm);
@@ -258,8 +424,8 @@
     padding: 0.5rem 1rem;
   }
 
-  .toggle-chip.toggle-btn-active,
-  .toggle-chip.active {
+  .toggle-chip:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-chip.active:not([aria-pressed]) {
     background-color: var(--color-primary-container);
     border-color: var(--color-primary-container);
   }
@@ -269,8 +435,8 @@
     background-color: transparent;
   }
 
-  .toggle-outlined.toggle-btn-active,
-  .toggle-outlined.active {
+  .toggle-outlined:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-outlined.active:not([aria-pressed]) {
     background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
   }
 
@@ -280,8 +446,8 @@
     border: none;
   }
 
-  .toggle-filled.toggle-btn-active,
-  .toggle-filled.active {
+  .toggle-filled:is(.toggle-btn-active:not([aria-pressed]), .toggle-btn[aria-pressed="true"]),
+  .toggle-filled.active:not([aria-pressed]) {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }

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,