@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/styles.css

@@ -483,68 +483,68 @@ html {
   --theme-mode: "light";
   --theme-family: "duskmoon";
   --theme-pair: "moonlight";
-  --theme-description: "Warm amber/coral";
-  --color-primary: oklch(52% 0.17 75);
-  --color-primary-content: oklch(100% 0 0);
-  --color-primary-container: oklch(95% 0.035 95.91);
-  --color-on-primary-container: oklch(25% 0.03 95.91);
-  --color-secondary: oklch(55% 0.19 20);
-  --color-secondary-content: oklch(100% 0 0);
-  --color-secondary-container: oklch(94% 0.05 87.01);
-  --color-on-secondary-container: oklch(25% 0.05 87.01);
-  --color-tertiary: oklch(52% 0.085 235);
-  --color-tertiary-content: oklch(100% 0 0);
-  --color-tertiary-container: oklch(95% 0.035 235);
-  --color-on-tertiary-container: oklch(22% 0.012 235);
-  --color-accent: oklch(52% 0.14 327);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(0% 0 0);
-  --color-neutral-content: oklch(80% 0.015 50);
-  --color-neutral-variant: oklch(50% 0.02 260);
-  --color-surface: oklch(100% 0 0);
-  --color-surface-dim: oklch(96% 0.01 85);
-  --color-surface-bright: oklch(100% 0 0);
-  --color-surface-container-lowest: oklch(100% 0 0);
-  --color-surface-container-low: oklch(99% 0.01 85);
-  --color-surface-container: oklch(97% 0.01 85);
-  --color-surface-container-high: oklch(96% 0.01 85);
-  --color-surface-container-highest: oklch(94% 0.01 85);
-  --color-surface-variant: oklch(94% 0.02 85);
-  --color-on-surface: oklch(27% 0.02 260);
-  --color-on-surface-variant: oklch(50% 0.02 260);
-  --color-base-100: oklch(100% 0.005 255);
-  --color-base-200: oklch(95% 0.008 255);
-  --color-base-300: oklch(90% 0.01 255);
-  --color-base-400: oklch(55% 0.06 255);
-  --color-base-500: oklch(45% 0.05 255);
-  --color-base-600: oklch(35% 0.04 255);
-  --color-base-700: oklch(25% 0.03 255);
-  --color-base-800: oklch(18% 0.02 255);
-  --color-base-900: oklch(12% 0.01 255);
-  --color-base-content: oklch(10% 0 255);
-  --color-outline: oklch(75% 0.01 260);
-  --color-outline-variant: oklch(85% 0.01 260);
-  --color-inverse-surface: oklch(25% 0.02 260);
-  --color-inverse-on-surface: oklch(95% 0.01 260);
-  --color-inverse-primary: oklch(80% 0.14 55);
-  --color-shadow: oklch(0% 0 0);
-  --color-scrim: oklch(0% 0 0 / 50%);
-  --color-info: oklch(41.94% 0.114 254.39);
-  --color-info-content: oklch(91.94% 0.114 254.39);
-  --color-info-container: oklch(95% 0.03 235);
-  --color-on-info-container: oklch(35% 0.08 235);
-  --color-success: oklch(50% 0.19 133.55);
-  --color-success-content: oklch(100% 0 0);
-  --color-success-container: oklch(93% 0.04 150);
-  --color-on-success-container: oklch(30% 0.08 150);
-  --color-warning: oklch(52% 0.203 42.44);
-  --color-warning-content: oklch(100% 0 0);
-  --color-warning-container: oklch(93% 0.05 80);
-  --color-on-warning-container: oklch(38% 0.10 80);
-  --color-error: oklch(52% 0.237 28.15);
-  --color-error-content: oklch(100% 0 0);
-  --color-error-container: oklch(93% 0.04 25);
-  --color-on-error-container: oklch(32% 0.10 25);
+  --theme-description: "Sunlit ivory with golden amber, muted lavender and sky blue";
+  --color-primary: oklch(82.60893044% 0.1414340166 83.31858015);
+  --color-primary-content: oklch(28.28953512% 0.0448991160 80.63639668);
+  --color-primary-container: oklch(95.57475591% 0.0614713639 92.12872653);
+  --color-on-primary-container: oklch(38.72869883% 0.0701556434 81.75114485);
+  --color-secondary: oklch(75.54657159% 0.0738680191 298.09280514);
+  --color-secondary-content: oklch(30.09347875% 0.0578718110 298.71400821);
+  --color-secondary-container: oklch(94.77129416% 0.0180917690 303.41223942);
+  --color-on-secondary-container: oklch(37.75435631% 0.0773343740 301.23088405);
+  --color-tertiary: oklch(76.94385339% 0.0640284924 221.04480848);
+  --color-tertiary-content: oklch(30.82709477% 0.0391899830 225.86055898);
+  --color-tertiary-container: oklch(95.11671506% 0.0167909766 215.45868624);
+  --color-on-tertiary-container: oklch(37.64053450% 0.0461503944 221.94991006);
+  --color-accent: oklch(90.26749798% 0.1105427306 93.87593258);
+  --color-accent-content: oklch(35.60101539% 0.0588941318 87.79310558);
+  --color-neutral: oklch(34.78392925% 0.0173048639 78.03949200);
+  --color-neutral-content: oklch(98.35030566% 0.0170577608 84.58657624);
+  --color-neutral-variant: oklch(48.47267982% 0.0259043741 73.78871657);
+  --color-surface: oklch(99.14473089% 0.0097633072 87.46952653);
+  --color-surface-dim: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-surface-bright: oklch(99.99999935% 0 0);
+  --color-surface-container-lowest: oklch(99.99999935% 0 0);
+  --color-surface-container-low: oklch(97.37543141% 0.0167153184 87.99753171);
+  --color-surface-container: oklch(95.32878442% 0.0224695782 87.15156842);
+  --color-surface-container-high: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-surface-container-highest: oklch(90.04844636% 0.0317371513 84.59011110);
+  --color-surface-variant: oklch(90.04844636% 0.0317371513 84.59011110);
+  --color-on-surface: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-on-surface-variant: oklch(48.47267982% 0.0259043741 73.78871657);
+  --color-base-100: oklch(99.14473089% 0.0097633072 87.46952653);
+  --color-base-200: oklch(97.37543141% 0.0167153184 87.99753171);
+  --color-base-300: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-base-400: oklch(55.01199157% 0.0351909086 74.88191474);
+  --color-base-500: oklch(44.93783706% 0.0295877832 74.85638734);
+  --color-base-600: oklch(35.00292970% 0.0249407737 76.85509951);
+  --color-base-700: oklch(24.86662243% 0.0194041154 73.70277146);
+  --color-base-800: oklch(18.07521115% 0.0118517040 73.14319887);
+  --color-base-900: oklch(11.73198826% 0.0090103504 73.47505765);
+  --color-base-content: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-outline: oklch(57.87187705% 0.0396997009 75.20078373);
+  --color-outline-variant: oklch(85.83658493% 0.0325359084 82.75783875);
+  --color-inverse-surface: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-inverse-on-surface: oklch(98.35030566% 0.0170577608 84.58657624);
+  --color-inverse-primary: oklch(90.26749798% 0.1105427306 93.87593258);
+  --color-shadow: oklch(0.00000000% 0 0);
+  --color-scrim: oklch(0.00000000% 0 0 / 50%);
+  --color-info: oklch(50.82237171% 0.0901951310 235.77699072);
+  --color-info-content: oklch(99.99999935% 0 0);
+  --color-info-container: oklch(95.09147873% 0.0151283794 228.96415080);
+  --color-on-info-container: oklch(39.58659448% 0.0609008792 232.98919080);
+  --color-success: oklch(52.17594416% 0.0995342775 154.56738341);
+  --color-success-content: oklch(99.99999935% 0 0);
+  --color-success-container: oklch(94.93242285% 0.0208030926 140.89790892);
+  --color-on-success-container: oklch(39.51234051% 0.0596350615 156.43156459);
+  --color-warning: oklch(55.13077016% 0.1354192110 53.04846323);
+  --color-warning-content: oklch(99.99999935% 0 0);
+  --color-warning-container: oklch(94.03448323% 0.0406430766 74.46372929);
+  --color-on-warning-container: oklch(40.76011391% 0.0954501128 54.71444706);
+  --color-error: oklch(54.21677601% 0.1543098528 27.29045200);
+  --color-error-content: oklch(99.99999935% 0 0);
+  --color-error-container: oklch(93.88397486% 0.0266133029 34.97748526);
+  --color-on-error-container: oklch(38.73080591% 0.0993593486 27.58854513);
 
   --radius-selector: 0.25rem;
   --radius-field: 0.625rem;
@@ -648,68 +648,68 @@ html {
   --theme-mode: "light";
   --theme-family: "duskmoon";
   --theme-pair: "moonlight";
-  --theme-description: "Warm amber/coral";
-  --color-primary: oklch(52% 0.17 75);
-  --color-primary-content: oklch(100% 0 0);
-  --color-primary-container: oklch(95% 0.035 95.91);
-  --color-on-primary-container: oklch(25% 0.03 95.91);
-  --color-secondary: oklch(55% 0.19 20);
-  --color-secondary-content: oklch(100% 0 0);
-  --color-secondary-container: oklch(94% 0.05 87.01);
-  --color-on-secondary-container: oklch(25% 0.05 87.01);
-  --color-tertiary: oklch(52% 0.085 235);
-  --color-tertiary-content: oklch(100% 0 0);
-  --color-tertiary-container: oklch(95% 0.035 235);
-  --color-on-tertiary-container: oklch(22% 0.012 235);
-  --color-accent: oklch(52% 0.14 327);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(0% 0 0);
-  --color-neutral-content: oklch(80% 0.015 50);
-  --color-neutral-variant: oklch(50% 0.02 260);
-  --color-surface: oklch(100% 0 0);
-  --color-surface-dim: oklch(96% 0.01 85);
-  --color-surface-bright: oklch(100% 0 0);
-  --color-surface-container-lowest: oklch(100% 0 0);
-  --color-surface-container-low: oklch(99% 0.01 85);
-  --color-surface-container: oklch(97% 0.01 85);
-  --color-surface-container-high: oklch(96% 0.01 85);
-  --color-surface-container-highest: oklch(94% 0.01 85);
-  --color-surface-variant: oklch(94% 0.02 85);
-  --color-on-surface: oklch(27% 0.02 260);
-  --color-on-surface-variant: oklch(50% 0.02 260);
-  --color-base-100: oklch(100% 0.005 255);
-  --color-base-200: oklch(95% 0.008 255);
-  --color-base-300: oklch(90% 0.01 255);
-  --color-base-400: oklch(55% 0.06 255);
-  --color-base-500: oklch(45% 0.05 255);
-  --color-base-600: oklch(35% 0.04 255);
-  --color-base-700: oklch(25% 0.03 255);
-  --color-base-800: oklch(18% 0.02 255);
-  --color-base-900: oklch(12% 0.01 255);
-  --color-base-content: oklch(10% 0 255);
-  --color-outline: oklch(75% 0.01 260);
-  --color-outline-variant: oklch(85% 0.01 260);
-  --color-inverse-surface: oklch(25% 0.02 260);
-  --color-inverse-on-surface: oklch(95% 0.01 260);
-  --color-inverse-primary: oklch(80% 0.14 55);
-  --color-shadow: oklch(0% 0 0);
-  --color-scrim: oklch(0% 0 0 / 50%);
-  --color-info: oklch(41.94% 0.114 254.39);
-  --color-info-content: oklch(91.94% 0.114 254.39);
-  --color-info-container: oklch(95% 0.03 235);
-  --color-on-info-container: oklch(35% 0.08 235);
-  --color-success: oklch(50% 0.19 133.55);
-  --color-success-content: oklch(100% 0 0);
-  --color-success-container: oklch(93% 0.04 150);
-  --color-on-success-container: oklch(30% 0.08 150);
-  --color-warning: oklch(52% 0.203 42.44);
-  --color-warning-content: oklch(100% 0 0);
-  --color-warning-container: oklch(93% 0.05 80);
-  --color-on-warning-container: oklch(38% 0.10 80);
-  --color-error: oklch(52% 0.237 28.15);
-  --color-error-content: oklch(100% 0 0);
-  --color-error-container: oklch(93% 0.04 25);
-  --color-on-error-container: oklch(32% 0.10 25);
+  --theme-description: "Sunlit ivory with golden amber, muted lavender and sky blue";
+  --color-primary: oklch(82.60893044% 0.1414340166 83.31858015);
+  --color-primary-content: oklch(28.28953512% 0.0448991160 80.63639668);
+  --color-primary-container: oklch(95.57475591% 0.0614713639 92.12872653);
+  --color-on-primary-container: oklch(38.72869883% 0.0701556434 81.75114485);
+  --color-secondary: oklch(75.54657159% 0.0738680191 298.09280514);
+  --color-secondary-content: oklch(30.09347875% 0.0578718110 298.71400821);
+  --color-secondary-container: oklch(94.77129416% 0.0180917690 303.41223942);
+  --color-on-secondary-container: oklch(37.75435631% 0.0773343740 301.23088405);
+  --color-tertiary: oklch(76.94385339% 0.0640284924 221.04480848);
+  --color-tertiary-content: oklch(30.82709477% 0.0391899830 225.86055898);
+  --color-tertiary-container: oklch(95.11671506% 0.0167909766 215.45868624);
+  --color-on-tertiary-container: oklch(37.64053450% 0.0461503944 221.94991006);
+  --color-accent: oklch(90.26749798% 0.1105427306 93.87593258);
+  --color-accent-content: oklch(35.60101539% 0.0588941318 87.79310558);
+  --color-neutral: oklch(34.78392925% 0.0173048639 78.03949200);
+  --color-neutral-content: oklch(98.35030566% 0.0170577608 84.58657624);
+  --color-neutral-variant: oklch(48.47267982% 0.0259043741 73.78871657);
+  --color-surface: oklch(99.14473089% 0.0097633072 87.46952653);
+  --color-surface-dim: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-surface-bright: oklch(99.99999935% 0 0);
+  --color-surface-container-lowest: oklch(99.99999935% 0 0);
+  --color-surface-container-low: oklch(97.37543141% 0.0167153184 87.99753171);
+  --color-surface-container: oklch(95.32878442% 0.0224695782 87.15156842);
+  --color-surface-container-high: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-surface-container-highest: oklch(90.04844636% 0.0317371513 84.59011110);
+  --color-surface-variant: oklch(90.04844636% 0.0317371513 84.59011110);
+  --color-on-surface: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-on-surface-variant: oklch(48.47267982% 0.0259043741 73.78871657);
+  --color-base-100: oklch(99.14473089% 0.0097633072 87.46952653);
+  --color-base-200: oklch(97.37543141% 0.0167153184 87.99753171);
+  --color-base-300: oklch(93.02387608% 0.0258398160 84.59321482);
+  --color-base-400: oklch(55.01199157% 0.0351909086 74.88191474);
+  --color-base-500: oklch(44.93783706% 0.0295877832 74.85638734);
+  --color-base-600: oklch(35.00292970% 0.0249407737 76.85509951);
+  --color-base-700: oklch(24.86662243% 0.0194041154 73.70277146);
+  --color-base-800: oklch(18.07521115% 0.0118517040 73.14319887);
+  --color-base-900: oklch(11.73198826% 0.0090103504 73.47505765);
+  --color-base-content: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-outline: oklch(57.87187705% 0.0396997009 75.20078373);
+  --color-outline-variant: oklch(85.83658493% 0.0325359084 82.75783875);
+  --color-inverse-surface: oklch(28.54323950% 0.0202535180 76.57676498);
+  --color-inverse-on-surface: oklch(98.35030566% 0.0170577608 84.58657624);
+  --color-inverse-primary: oklch(90.26749798% 0.1105427306 93.87593258);
+  --color-shadow: oklch(0.00000000% 0 0);
+  --color-scrim: oklch(0.00000000% 0 0 / 50%);
+  --color-info: oklch(50.82237171% 0.0901951310 235.77699072);
+  --color-info-content: oklch(99.99999935% 0 0);
+  --color-info-container: oklch(95.09147873% 0.0151283794 228.96415080);
+  --color-on-info-container: oklch(39.58659448% 0.0609008792 232.98919080);
+  --color-success: oklch(52.17594416% 0.0995342775 154.56738341);
+  --color-success-content: oklch(99.99999935% 0 0);
+  --color-success-container: oklch(94.93242285% 0.0208030926 140.89790892);
+  --color-on-success-container: oklch(39.51234051% 0.0596350615 156.43156459);
+  --color-warning: oklch(55.13077016% 0.1354192110 53.04846323);
+  --color-warning-content: oklch(99.99999935% 0 0);
+  --color-warning-container: oklch(94.03448323% 0.0406430766 74.46372929);
+  --color-on-warning-container: oklch(40.76011391% 0.0954501128 54.71444706);
+  --color-error: oklch(54.21677601% 0.1543098528 27.29045200);
+  --color-error-content: oklch(99.99999935% 0 0);
+  --color-error-container: oklch(93.88397486% 0.0266133029 34.97748526);
+  --color-on-error-container: oklch(38.73080591% 0.0993593486 27.58854513);
 
   --radius-selector: 0.25rem;
   --radius-field: 0.625rem;
@@ -2355,7 +2355,7 @@ html {
   .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(.otp-code, .otp-input) ~ .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; }
 
@@ -4170,10 +4170,20 @@ html {
     }
   }
 
-  @supports (position-area: block-end) {
+  @supports (position-area: block-end) and (anchor-scope: --dm-dropdown-trigger) {
+    /* Keep the shared anchor name local to each dropdown, including nested ones. */
+    .dropdown {
+      anchor-scope: --dm-dropdown-trigger;
+    }
+
+    .dropdown > [popovertarget] {
+      anchor-name: --dm-dropdown-trigger;
+    }
+
     .dropdown > .dropdown-content[popover] {
       inset: auto;
       margin: 0.25rem;
+      position-anchor: --dm-dropdown-trigger;
       position-area: block-end span-inline-end;
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
     }
@@ -5368,33 +5378,39 @@ html {
  */
 
 @layer components {
-  /* Modal Container */
-  .modal {
+  /* Native HTML dialog owns visibility and modal behavior. */
+  dialog.modal {
     position: fixed;
     inset: 0;
-    z-index: 999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    visibility: hidden;
+    margin: auto;
+    padding: 0;
+    border: none;
+    width: calc(100% - 2rem);
+    max-width: 32rem;
+    max-height: calc(100dvh - 2rem);
+    box-sizing: border-box;
+    background-color: transparent;
+    color: var(--color-on-surface);
+    border-radius: var(--radius-lg);
+    overflow: visible;
     opacity: 0;
-    transition: visibility 200ms ease-out, opacity 200ms ease-out;
+    transition: opacity 200ms ease-out, display 200ms allow-discrete, overlay 200ms allow-discrete;
   }
 
-  /* Modal Open State */
-  .modal.modal-open,
-  .modal:target {
-    visibility: visible;
+  dialog.modal[open] {
     opacity: 1;
   }
 
+  dialog.modal:not([open]) {
+    display: none;
+  }
+
   /* Modal Box */
   .modal-box {
     position: relative;
-    z-index: 1;
-    max-width: 32rem;
-    max-height: calc(100dvh - 5rem);
+    width: 100%;
+    box-sizing: border-box;
+    max-height: calc(100dvh - 2rem);
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
@@ -5405,24 +5421,19 @@ html {
     transition: transform 200ms ease-out;
   }
 
-  .modal.modal-open .modal-box,
-  .modal:target .modal-box {
+  dialog.modal[open] .modal-box {
     transform: scale(1);
   }
 
-  /* Modal Backdrop */
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
+  /* The browser renders the backdrop in the top layer. */
+  dialog.modal::backdrop {
     background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
-    cursor: pointer;
+    opacity: 0;
+    transition: opacity 200ms ease-out, display 200ms allow-discrete, overlay 200ms allow-discrete;
   }
 
-  .modal-backdrop::before {
-    content: '';
-    position: absolute;
-    inset: 0;
+  dialog.modal[open]::backdrop {
+    opacity: 1;
   }
 
   /* Modal Action */
@@ -5436,61 +5447,47 @@ html {
     padding-top: 1rem;
   }
 
-  /* Modal Toggle (CSS-only) */
-  .modal-toggle {
-    position: fixed;
-    width: 0;
-    height: 0;
-    appearance: none;
-    opacity: 0;
-  }
-
-  .modal-toggle:checked + .modal {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .modal-toggle:checked + .modal .modal-box {
-    transform: scale(1);
-  }
-
   /* Modal Sizes */
-  .modal-sm .modal-box {
+  dialog.modal.modal-sm {
     max-width: 20rem;
   }
 
-  .modal-md .modal-box {
+  dialog.modal.modal-md {
     max-width: 32rem;
   }
 
-  .modal-lg .modal-box {
+  dialog.modal.modal-lg {
     max-width: 48rem;
   }
 
-  .modal-xl .modal-box {
+  dialog.modal.modal-xl {
     max-width: 64rem;
   }
 
-  .modal-full .modal-box {
+  dialog.modal.modal-full {
     max-width: calc(100vw - 2rem);
-    max-height: calc(100vh - 2rem);
-    width: 100%;
+    max-height: calc(100dvh - 2rem);
+    width: calc(100% - 2rem);
+    height: calc(100dvh - 2rem);
+  }
+
+  dialog.modal.modal-full .modal-box {
     height: 100%;
   }
 
   /* Modal Positions */
-  .modal-top {
-    align-items: flex-start;
-    padding-top: 2rem;
+  dialog.modal.modal-top {
+    margin-top: 2rem;
+    margin-bottom: auto;
   }
 
-  .modal-bottom {
-    align-items: flex-end;
-    padding-bottom: 2rem;
+  dialog.modal.modal-bottom {
+    margin-top: auto;
+    margin-bottom: 2rem;
   }
 
-  .modal-middle {
-    align-items: center;
+  dialog.modal.modal-middle {
+    margin: auto;
   }
 
   /* Animation Variants */
@@ -5506,22 +5503,21 @@ html {
     transform: scale(0.75);
   }
 
-  :is(.modal-slide-up, .modal-slide-down, .modal-zoom).modal-open .modal-box,
-  :is(.modal-slide-up, .modal-slide-down, .modal-zoom):target .modal-box {
+  dialog.modal:is(.modal-slide-up, .modal-slide-down, .modal-zoom)[open] .modal-box {
     transform: translateY(0) scale(1);
   }
 
   /* Backdrop Variants */
-  .modal-backdrop-light {
+  dialog.modal.modal-backdrop-light::backdrop {
     background-color: color-mix(in srgb, white 80%, transparent);
   }
 
-  .modal-backdrop-blur {
+  dialog.modal.modal-backdrop-blur::backdrop {
     background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
     backdrop-filter: blur(8px);
   }
 
-  .modal-no-backdrop {
+  dialog.modal.modal-no-backdrop::backdrop {
     background-color: transparent;
   }
 
@@ -5591,55 +5587,50 @@ html {
 
   /* Responsive Modal */
   @media (max-width: 640px) {
-    .modal-box {
-      max-width: calc(100vw - 2rem);
-      margin: 1rem;
-    }
-
-    .modal-responsive {
-      align-items: flex-end;
-      padding: 0;
+    dialog.modal.modal-responsive {
+      width: 100%;
+      max-width: 100%;
+      max-height: 90dvh;
+      margin: auto 0 0;
+      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
 
     .modal-responsive .modal-box {
-      max-width: 100%;
       max-height: 90dvh;
-      margin: 0;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
   }
 
   /* Drawer Modal */
-  .drawer-modal {
-    align-items: stretch;
-    justify-content: flex-end;
-    padding: 0;
+  dialog.modal.drawer-modal {
+    width: min(20rem, 100%);
+    max-width: 20rem;
+    max-height: 100dvh;
+    height: 100dvh;
+    margin: 0 0 0 auto;
+    border-radius: 0;
   }
 
   .drawer-modal .modal-box {
-    max-width: 20rem;
     max-height: 100dvh;
     height: 100%;
-    margin: 0;
     border-radius: 0;
     transform: translateX(100%);
   }
 
-  .drawer-modal.modal-open .modal-box,
-  .drawer-modal:target .modal-box {
+  dialog.modal.drawer-modal[open] .modal-box {
     transform: translateX(0);
   }
 
-  .drawer-modal-left {
-    justify-content: flex-start;
+  dialog.modal.drawer-modal-left {
+    margin: 0 auto 0 0;
   }
 
   .drawer-modal-left .modal-box {
     transform: translateX(-100%);
   }
 
-  .drawer-modal-left.modal-open .modal-box,
-  .drawer-modal-left:target .modal-box {
+  dialog.modal.drawer-modal-left[open] .modal-box {
     transform: translateX(0);
   }
 
@@ -5648,7 +5639,7 @@ html {
     text-align: center;
   }
 
-  .alert-dialog .modal-box {
+  dialog.modal.alert-dialog {
     max-width: 24rem;
   }
 
@@ -5687,32 +5678,45 @@ html {
     justify-content: center;
   }
 
-  /* Reduce Motion */
-  @media (prefers-reduced-motion: reduce) {
-    .modal {
-      transition: visibility 0ms, opacity 0ms;
+  /* Entry styles retain motion without changing native visibility. */
+  @starting-style {
+    dialog.modal[open],
+    dialog.modal[open]::backdrop {
+      opacity: 0;
     }
 
-    .modal-box {
-      transition: transform 0ms;
+    dialog.modal[open] .modal-box {
+      transform: scale(0.95);
     }
-  }
 
-  /* Focus Trap Helper */
-  .modal-focus-trap {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
+    dialog.modal.modal-slide-up[open] .modal-box {
+      transform: translateY(6rem) scale(0.95);
+    }
+
+    dialog.modal.modal-slide-down[open] .modal-box {
+      transform: translateY(-6rem) scale(0.95);
+    }
+
+    dialog.modal.modal-zoom[open] .modal-box {
+      transform: scale(0.75);
+    }
+
+    dialog.modal.drawer-modal[open] .modal-box {
+      transform: translateX(100%);
+    }
+
+    dialog.modal.drawer-modal-left[open] .modal-box {
+      transform: translateX(-100%);
+    }
   }
 
-  body.modal-open {
-    overflow: hidden;
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    dialog.modal,
+    dialog.modal::backdrop,
+    .modal-box {
+      transition: none;
+    }
   }
 }
 
@@ -5793,6 +5797,12 @@ html {
     font-size: 2rem;
   }
 
+  .avatar-2xl {
+    width: 6rem;
+    height: 6rem;
+    font-size: 2rem;
+  }
+
   /* Shape Variants */
   .avatar-rounded {
     border-radius: var(--radius-sm);
@@ -6272,7 +6282,7 @@ html {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: var(--chat-scroll-indicator-gap);
+    gap: 0;
     width: calc(
       var(--chat-scroll-indicator-active-size) * var(--chat-scroll-indicator-hover-scale)
     );
@@ -6291,21 +6301,33 @@ html {
   }
 
   .chat-scroll-indicator {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
-    width: var(--chat-scroll-indicator-size);
-    height: var(--chat-scroll-indicator-thickness);
+    width: 100%;
+    height: calc(var(--chat-scroll-indicator-thickness) + var(--chat-scroll-indicator-gap));
     border: 0;
-    border-radius: 999px;
     padding: 0;
+    margin: 0;
+    box-sizing: border-box;
     appearance: none;
-    background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+    background-color: transparent;
     color: inherit;
     font: inherit;
-    opacity: 0.45;
     pointer-events: auto;
     text-decoration: none;
     cursor: pointer;
+  }
+
+  .chat-scroll-indicator::before {
+    content: "";
+    width: var(--chat-scroll-indicator-size);
+    height: var(--chat-scroll-indicator-thickness);
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+    opacity: 0.45;
+    pointer-events: none;
     transform: scaleX(1);
     transform-origin: center;
     transition:
@@ -6314,15 +6336,17 @@ html {
       background-color 140ms ease;
   }
 
-  .chat-scroll-indicator:hover,
-  .chat-scroll-indicator:focus-visible {
+  .chat-scroll-indicator:hover::before,
+  .chat-scroll-indicator:focus-visible::before {
+    animation: none;
     transform: scaleX(var(--chat-scroll-indicator-hover-scale)) scaleY(1.35);
     background-color: var(--color-on-surface);
     opacity: 1;
   }
 
-  .chat-scroll-indicator:hover + .chat-scroll-indicator,
-  .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover) {
+  .chat-scroll-indicator:hover + .chat-scroll-indicator::before,
+  .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover)::before {
+    animation: none;
     transform: scaleX(var(--chat-scroll-indicator-neighbor-scale)) scaleY(1.15);
     background-color: color-mix(in oklch, var(--color-on-surface) 55%, transparent);
     opacity: 0.75;
@@ -6338,7 +6362,7 @@ html {
   }
 
   @supports (animation-timeline: --chat-1) {
-    .chat-scroll-indicator {
+    .chat-scroll-indicator::before {
       animation-name: chat-scroll-indicator-activate;
       animation-duration: 1ms;
       animation-timing-function: linear;
@@ -6467,99 +6491,99 @@ html {
     view-timeline-axis: block;
   }
 
-  .chat-scroll-indicator[data-chat-tl="1"] {
+  .chat-scroll-indicator[data-chat-tl="1"]::before {
     animation-timeline: --chat-1;
   }
 
-  .chat-scroll-indicator[data-chat-tl="2"] {
+  .chat-scroll-indicator[data-chat-tl="2"]::before {
     animation-timeline: --chat-2;
   }
 
-  .chat-scroll-indicator[data-chat-tl="3"] {
+  .chat-scroll-indicator[data-chat-tl="3"]::before {
     animation-timeline: --chat-3;
   }
 
-  .chat-scroll-indicator[data-chat-tl="4"] {
+  .chat-scroll-indicator[data-chat-tl="4"]::before {
     animation-timeline: --chat-4;
   }
 
-  .chat-scroll-indicator[data-chat-tl="5"] {
+  .chat-scroll-indicator[data-chat-tl="5"]::before {
     animation-timeline: --chat-5;
   }
 
-  .chat-scroll-indicator[data-chat-tl="6"] {
+  .chat-scroll-indicator[data-chat-tl="6"]::before {
     animation-timeline: --chat-6;
   }
 
-  .chat-scroll-indicator[data-chat-tl="7"] {
+  .chat-scroll-indicator[data-chat-tl="7"]::before {
     animation-timeline: --chat-7;
   }
 
-  .chat-scroll-indicator[data-chat-tl="8"] {
+  .chat-scroll-indicator[data-chat-tl="8"]::before {
     animation-timeline: --chat-8;
   }
 
-  .chat-scroll-indicator[data-chat-tl="9"] {
+  .chat-scroll-indicator[data-chat-tl="9"]::before {
     animation-timeline: --chat-9;
   }
 
-  .chat-scroll-indicator[data-chat-tl="10"] {
+  .chat-scroll-indicator[data-chat-tl="10"]::before {
     animation-timeline: --chat-10;
   }
 
-  .chat-scroll-indicator[data-chat-tl="11"] {
+  .chat-scroll-indicator[data-chat-tl="11"]::before {
     animation-timeline: --chat-11;
   }
 
-  .chat-scroll-indicator[data-chat-tl="12"] {
+  .chat-scroll-indicator[data-chat-tl="12"]::before {
     animation-timeline: --chat-12;
   }
 
-  .chat-scroll-indicator[data-chat-tl="13"] {
+  .chat-scroll-indicator[data-chat-tl="13"]::before {
     animation-timeline: --chat-13;
   }
 
-  .chat-scroll-indicator[data-chat-tl="14"] {
+  .chat-scroll-indicator[data-chat-tl="14"]::before {
     animation-timeline: --chat-14;
   }
 
-  .chat-scroll-indicator[data-chat-tl="15"] {
+  .chat-scroll-indicator[data-chat-tl="15"]::before {
     animation-timeline: --chat-15;
   }
 
-  .chat-scroll-indicator[data-chat-tl="16"] {
+  .chat-scroll-indicator[data-chat-tl="16"]::before {
     animation-timeline: --chat-16;
   }
 
-  .chat-scroll-indicator[data-chat-tl="17"] {
+  .chat-scroll-indicator[data-chat-tl="17"]::before {
     animation-timeline: --chat-17;
   }
 
-  .chat-scroll-indicator[data-chat-tl="18"] {
+  .chat-scroll-indicator[data-chat-tl="18"]::before {
     animation-timeline: --chat-18;
   }
 
-  .chat-scroll-indicator[data-chat-tl="19"] {
+  .chat-scroll-indicator[data-chat-tl="19"]::before {
     animation-timeline: --chat-19;
   }
 
-  .chat-scroll-indicator[data-chat-tl="20"] {
+  .chat-scroll-indicator[data-chat-tl="20"]::before {
     animation-timeline: --chat-20;
   }
 
-  .chat-scroll-indicator[data-chat-tl="21"] {
+  .chat-scroll-indicator[data-chat-tl="21"]::before {
     animation-timeline: --chat-21;
   }
 
-  .chat-scroll-indicator[data-chat-tl="22"] {
+  .chat-scroll-indicator[data-chat-tl="22"]::before {
     animation-timeline: --chat-22;
   }
 
-  .chat-scroll-indicator[data-chat-tl="23"] {
+  .chat-scroll-indicator[data-chat-tl="23"]::before {
     animation-timeline: --chat-23;
   }
 
-  .chat-scroll-indicator[data-chat-tl="24"] {
+  .chat-scroll-indicator[data-chat-tl="24"]::before {
     animation-timeline: --chat-24;
   }
 
@@ -6635,6 +6659,54 @@ html {
     margin-bottom: 0;
   }
 
+  .chat-status {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.75rem;
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .chat-status-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25rem;
+  }
+
+  .chat-status-value {
+    color: var(--color-on-surface);
+    font-weight: 500;
+  }
+
+  .chat-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .chat-actions-hover {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 140ms ease;
+  }
+
+  .chat:hover .chat-actions-hover,
+  .chat:focus-within .chat-actions-hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (hover: none) {
+    .chat-actions-hover {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
   .chat-bubble {
     --chat-bubble-bg: var(--color-surface-container-highest);
     --chat-bubble-fg: var(--color-on-surface);
@@ -6651,7 +6723,6 @@ html {
     border-radius: 1rem;
     background-color: var(--chat-bubble-bg);
     color: var(--chat-bubble-fg);
-    box-shadow: inset 0 0 0 1px var(--color-outline-variant);
     font-size: 0.875rem;
     line-height: 1.45;
     overflow-wrap: anywhere;
@@ -6670,7 +6741,7 @@ html {
     position: absolute;
     inset-block-start: 0;
     inline-size: 0.75rem;
-    block-size: 1rem;
+    block-size: 0.75rem;
     background-color: var(--chat-bubble-bg);
     mask-image: radial-gradient(ellipse at 0 100%, transparent 68%, black 72%);
     pointer-events: none;
@@ -7031,11 +7102,15 @@ html {
       scroll-behavior: auto;
     }
 
-    .chat-scroll-indicator {
+    .chat-scroll-indicator::before {
       animation: none;
       transition: none;
     }
 
+    .chat-actions-hover {
+      transition: none;
+    }
+
     .chat-typing::before,
     .chat-typing::after,
     .chat-typing span,
@@ -11162,256 +11237,168 @@ html {
   }
   @media (forced-colors: active) { .otp-code { background-image: none; } }
 
-  @media (prefers-reduced-motion: reduce) {
-    .otp-input-field {
-      transition: none;
-    }
-  }
-}
-
-/**
- * PIN Input Component Styles
- * DuskMoonUI - Secure PIN/password entry input
- */
-
-@layer components {
-  /* Base PIN Container */
-  .pin-input {
+  /* One native input over decorative cells, following the daisyUI OTP layout.
+     The spans must precede the input; their count matches maxlength/pattern. */
+  .otp-input:has(> .otp-code) {
+    --otp-count: 6;
+    --otp-cell: 2ch;
+    --otp-gap-ratio: 0.25;
+    --otp-gap: calc(var(--otp-cell) * var(--otp-gap-ratio));
+    --otp-stride: calc(var(--otp-cell) + var(--otp-gap));
+    --otp-width-units: calc(var(--otp-count) * (1 + var(--otp-gap-ratio)) + 0.25);
+    --otp-height: 3rem;
+    position: relative;
     display: inline-flex;
+    flex-wrap: nowrap;
     align-items: center;
-    gap: 0.5rem;
-  }
-
-  /* PIN Input Field */
-  .pin-input-field {
-    width: 3rem;
-    height: 3.5rem;
-    padding: 0;
-    font-size: 1.5rem;
-    font-weight: 600;
-    text-align: center;
-    color: var(--color-on-surface);
-    background-color: var(--color-surface);
-    border: 2px solid currentColor;
+    gap: 0;
+    inline-size: calc(var(--otp-cell) * var(--otp-width-units) + 2px);
+    max-inline-size: 100%;
+    container-type: inline-size;
+    block-size: var(--otp-height);
+    font: 1.5rem / 1 ui-monospace, monospace;
+    direction: ltr;
+    color: var(--dm-validation-color, var(--color-on-surface));
     border-radius: var(--radius-sm);
-    outline: none;
-    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
-    caret-color: var(--color-primary);
-    -webkit-text-security: disc;
+    /* Reserve space for the trailing native caret and cell focus rings. */
+    clip-path: inset(-4px -4px -4px -4px);
   }
 
-  .pin-input-field::placeholder {
-    color: var(--color-on-surface-variant);
-    opacity: 0.3;
+  /* Scale cells to the actual wrapper width, including inside narrow forms. */
+  .otp-input > :is(span, .otp-code), .otp-input:has(> .otp-code)::after {
+    --otp-cell: calc((100cqi - 2px) / var(--otp-width-units));
+    --otp-gap: calc(var(--otp-cell) * var(--otp-gap-ratio));
+    --otp-stride: calc(var(--otp-cell) + var(--otp-gap));
   }
 
-  .pin-input-field:hover:not(:disabled):not(:focus) {
-    background-color: var(--color-surface-container);
+  .otp-input:has(> span:nth-child(1)) { --otp-count: 1; }
+  .otp-input:has(> span:nth-child(2)) { --otp-count: 2; }
+  .otp-input:has(> span:nth-child(3)) { --otp-count: 3; }
+  .otp-input:has(> span:nth-child(4)) { --otp-count: 4; }
+  .otp-input:has(> span:nth-child(5)) { --otp-count: 5; }
+  .otp-input:has(> span:nth-child(6)) { --otp-count: 6; }
+  .otp-input:has(> span:nth-child(7)) { --otp-count: 7; }
+  .otp-input:has(> span:nth-child(8)) { --otp-count: 8; }
+
+  .otp-input > span[aria-hidden="true"] {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--otp-cell);
+    box-sizing: border-box;
+    background-color: var(--color-surface);
+    border: 1px solid currentColor;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: background-color 150ms ease-in-out;
   }
+  .otp-input > span:nth-child(1) { left: 0; }
+  .otp-input > span:nth-child(2) { left: var(--otp-stride); }
+  .otp-input > span:nth-child(3) { left: calc(var(--otp-stride) * 2); }
+  .otp-input > span:nth-child(4) { left: calc(var(--otp-stride) * 3); }
+  .otp-input > span:nth-child(5) { left: calc(var(--otp-stride) * 4); }
+  .otp-input > span:nth-child(6) { left: calc(var(--otp-stride) * 5); }
+  .otp-input > span:nth-child(7) { left: calc(var(--otp-stride) * 6); }
+  .otp-input > span:nth-child(8) { left: calc(var(--otp-stride) * 7); }
 
-  .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  .otp-input > .otp-code {
+    position: relative;
+    z-index: 1;
+    field-sizing: content;
+    flex-shrink: 0;
+    inline-size: auto;
+    min-inline-size: 0;
+    max-inline-size: none;
+    block-size: 100%;
+    margin: 0;
+    padding: 0 0 0 calc((var(--otp-cell) - 1ch) / 2);
+    border: 0;
+    border-radius: 0;
+    font: inherit;
+    font-size: min(1em, var(--otp-cell));
+    letter-spacing: calc(var(--otp-stride) - 1ch);
+    color: inherit;
+    background: transparent;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
   }
 
-  .pin-input-field:disabled {
-    opacity: 0.38;
-    cursor: not-allowed;
-    background-color: var(--color-surface-container);
-  }
-
-  /* Show PIN (toggle visibility) */
-  .pin-input-visible .pin-input-field {
-    -webkit-text-security: none;
-  }
-
-  /* Size Variants */
-  .pin-input-sm .pin-input-field {
-    width: 2.5rem;
-    height: 3rem;
-    font-size: 1.25rem;
-    border-radius: var(--radius-xs);
-  }
-
-  .pin-input-lg .pin-input-field {
-    width: 3.5rem;
-    height: 4rem;
-    font-size: 1.75rem;
-    border-radius: var(--radius-sm);
-  }
-
-  /* Compact Gap */
-  .pin-input-compact {
-    gap: 0.25rem;
-  }
-
-  /* Filled Variant */
-  .pin-input-filled .pin-input-field {
-    background-color: var(--color-surface-container);
-    border: none;
-    border-bottom: 2px solid var(--color-outline);
-    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-  }
-
-  .pin-input-filled .pin-input-field:focus {
-    border-bottom-color: var(--color-primary);
-    box-shadow: none;
-  }
-
-  /* Circle Variant */
-  .pin-input-circle .pin-input-field {
-    width: 3rem;
-    height: 3rem;
-    border-radius: var(--radius-full);
-  }
-
-  .pin-input-circle.pin-input-sm .pin-input-field {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .pin-input-circle.pin-input-lg .pin-input-field {
-    width: 3.5rem;
-    height: 3.5rem;
-  }
-
-  /* Dot Display (shows dots instead of numbers) */
-  .pin-input-dots .pin-input-field {
-    font-size: 2rem;
-    letter-spacing: -0.25rem;
-  }
-
-  /* Color Variants */
-  .pin-input-primary .pin-input-field {
-    color: var(--color-primary);
-  }
-
-  .pin-input-primary .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
-  }
-
-  .pin-input-secondary .pin-input-field {
-    color: var(--color-secondary);
-  }
-
-  .pin-input-secondary .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-secondary) 10%, transparent);
-  }
-
-  .pin-input-tertiary .pin-input-field {
-    color: var(--color-tertiary);
-  }
-
-  .pin-input-tertiary .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-tertiary) 10%, transparent);
-  }
-
-  .pin-input-info .pin-input-field {
-    color: var(--color-info);
-  }
-
-  .pin-input-info .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 10%, transparent);
-  }
-
-  .pin-input-success .pin-input-field {
-    color: var(--color-success);
-  }
-
-  .pin-input-success .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
-  }
-
-  .pin-input-warning .pin-input-field {
-    color: var(--color-warning);
-  }
-
-  .pin-input-warning .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
-  }
-
-  .pin-input-error .pin-input-field {
-    color: var(--color-error);
-    animation: pin-shake 300ms ease-in-out;
-  }
-
-  .pin-input-error .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
-  }
-
-  .pin-input-accent .pin-input-field {
-    color: var(--color-accent);
-  }
-
-  .pin-input-accent .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
-  }
-
-  .pin-input-neutral .pin-input-field {
-    color: var(--color-neutral);
-  }
-
-  .pin-input-neutral .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-neutral) 10%, transparent);
-  }
-
-  .pin-input-base .pin-input-field {
-    color: var(--color-base-content);
-  }
-
-  .pin-input-base .pin-input-field:focus {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 10%, transparent);
-  }
-
-  @keyframes pin-shake {
-    0%, 100% { transform: translateX(0); }
-    20%, 60% { transform: translateX(-4px); }
-    40%, 80% { transform: translateX(4px); }
-  }
-
-  /* Ghost Variant */
-  .pin-input-ghost .pin-input-field {
-    background-color: transparent;
-    border-color: transparent;
+  /* Intrinsic input width follows the entered characters, positioning the next cell. */
+  .otp-input:has(> .otp-code)::after {
+    content: "";
+    flex-shrink: 0;
+    inline-size: var(--otp-cell);
+    block-size: var(--otp-height);
+    margin-inline-start: calc(-0.25 * var(--otp-cell));
+    border-radius: inherit;
+    pointer-events: none;
   }
-
-  .pin-input-ghost .pin-input-field:focus {
-    background-color: var(--color-surface-container);
-    border-color: transparent;
+  .otp-input:focus-within::after,
+  .otp-input:has(> .otp-code:focus) > span {
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    outline: 1px solid currentColor;
+  }
+  .otp-input:has(> .otp-code:valid:focus)::after { visibility: hidden; }
+  /* Cell indicators replace the reset's unlayered native focus outline. */
+  .otp-input > .otp-code:focus {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .otp-input-xs:has(> .otp-code) { font-size: 1rem; --otp-height: 2rem; }
+  .otp-input-sm:has(> .otp-code) { font-size: 1.25rem; --otp-height: 2.5rem; }
+  .otp-input-md:has(> .otp-code) { font-size: 1.5rem; --otp-height: 3rem; }
+  .otp-input-lg:has(> .otp-code) { font-size: 1.75rem; --otp-height: 3.5rem; }
+  .otp-input-xl:has(> .otp-code) { font-size: 2rem; --otp-height: 4rem; }
+  .otp-input-joined:has(> .otp-code) { --otp-gap-ratio: 0; }
+  .otp-input-joined > span:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+  .otp-input-joined > span:not(:nth-last-child(2)) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
+  .otp-input-ghost > span { border-color: transparent; }
+  .otp-input-filled > span { background-color: var(--color-surface-container); }
+  .otp-input-underline > span { border-width: 0 0 1px; border-radius: 0; background-color: transparent; }
+
+  .otp-input-primary:has(> .otp-code) { color: var(--dm-validation-color, var(--color-primary)); }
+  .otp-input-secondary:has(> .otp-code) { color: var(--dm-validation-color, var(--color-secondary)); }
+  .otp-input-tertiary:has(> .otp-code) { color: var(--dm-validation-color, var(--color-tertiary)); }
+  .otp-input-info:has(> .otp-code) { color: var(--dm-validation-color, var(--color-info)); }
+  .otp-input-success:has(> .otp-code) { color: var(--dm-validation-color, var(--color-success)); }
+  .otp-input-warning:has(> .otp-code) { color: var(--dm-validation-color, var(--color-warning)); }
+  .otp-input-error:has(> .otp-code) { color: var(--dm-validation-color, var(--color-error)); }
+  .otp-input-accent:has(> .otp-code) { color: var(--dm-validation-color, var(--color-accent)); }
+  .otp-input-neutral:has(> .otp-code) { color: var(--dm-validation-color, var(--color-neutral)); }
+  .otp-input-base:has(> .otp-code) { color: var(--dm-validation-color, var(--color-base-content)); }
+
+  .otp-input:has(> .otp-code:is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:disabled)):not(:where(.form-group-error *, .form-control.error *)) {
+    --dm-validation-color: var(--color-success);
   }
-
-  /* PIN Group with Label */
-  .pin-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  .otp-input:has(> .otp-code:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)),
+  :is(.form-group-error, .form-control.error) .otp-input {
+    --dm-validation-color: var(--color-error);
   }
-
-  .pin-label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--color-on-surface);
+  .otp-input:has(> .otp-code:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > span,
+  :is(.form-group-error, .form-control.error) .otp-input > span {
+    border-color: currentColor;
   }
-
-  .pin-helper {
-    font-size: 0.75rem;
-    color: var(--color-on-surface-variant);
+  .otp-input:has(> .otp-code:disabled) {
+    opacity: 0.38;
+    cursor: not-allowed;
   }
+  .otp-input > .otp-code:disabled { opacity: 1; }
 
-  .pin-error-message {
-    font-size: 0.75rem;
-    color: var(--color-error);
+  /* Engines without content sizing retain a usable single native input. */
+  @supports not (field-sizing: content) {
+    .otp-input > .otp-code { inline-size: 100%; letter-spacing: normal; padding: 0.75rem; background-color: var(--color-surface); border: 1px solid currentColor; border-radius: inherit; }
+    .otp-input > span, .otp-input:has(> .otp-code)::after { display: none; }
+    .otp-input > .otp-code:focus { outline: 2px solid currentColor !important; outline-offset: 2px; }
+  }
+  @media (forced-colors: active) {
+    .otp-input:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
   }
 
-  /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
-    .pin-input-field {
+    .otp-input-field, .otp-input > span {
       transition: none;
     }
-
-    .pin-input-error .pin-input-field {
-      animation: none;
-    }
   }
 }
 
@@ -15423,6 +15410,12 @@ html {
     border-radius: var(--radius-sm);
   }
 
+  .skeleton-input {
+    height: 2.75rem;
+    width: 100%;
+    border-radius: var(--radius-xs);
+  }
+
   .skeleton-image {
     aspect-ratio: 16 / 9;
     width: 100%;
@@ -18062,20 +18055,20 @@ html {
     z-index: 1;
   }
 
-  :is(.join, .join-horizontal) > .join-item:not(:first-child) {
+  :is(.join, .join-horizontal):not(.join-vertical) > .join-item:not(:first-child) {
     margin-inline-start: -1px;
   }
 
-  :is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child) {
+  :is(.join, .join-horizontal):not(.join-vertical) > .join-item:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
 
-  :is(.join, .join-horizontal) > .join-item:first-child:not(:last-child) {
+  :is(.join, .join-horizontal):not(.join-vertical) > .join-item:first-child:not(:last-child) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
-  :is(.join, .join-horizontal) > .join-item:last-child:not(:first-child) {
+  :is(.join, .join-horizontal):not(.join-vertical) > .join-item:last-child:not(:first-child) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
@@ -22092,6 +22085,47 @@ html {
   .timeline-marker-tertiary { border-color: var(--color-tertiary); background: var(--color-tertiary-container); }
   .timeline-marker-success { border-color: var(--color-success); background: var(--color-success-container); }
   .timeline-marker-error { border-color: var(--color-error); background: var(--color-error-container); }
+  .timeline-marker-accent {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .timeline-marker-accent .timeline-marker-icon {
+    color: var(--color-accent-content);
+  }
+
+  .timeline-marker-accent .timeline-marker-dot {
+    background-color: var(--color-accent-content);
+  }
+
+  .timeline-marker-neutral {
+    border-color: var(--color-neutral);
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .timeline-marker-neutral .timeline-marker-icon {
+    color: var(--color-neutral-content);
+  }
+
+  .timeline-marker-neutral .timeline-marker-dot {
+    background-color: var(--color-neutral-content);
+  }
+
+  .timeline-marker-base {
+    border-color: var(--color-base-300);
+    background-color: var(--color-base-300);
+    color: var(--color-base-content);
+  }
+
+  .timeline-marker-base .timeline-marker-icon {
+    color: var(--color-base-content);
+  }
+
+  .timeline-marker-base .timeline-marker-dot {
+    background-color: var(--color-base-content);
+  }
   .timeline-item-active > .timeline-marker { border-color: var(--color-primary); background: var(--color-primary-container); }
   .timeline-item-pending > .timeline-marker { border-style: dashed; }
   .timeline-compact > .timeline-item { padding-block-end: 0.75rem; gap: 0.5rem; }
@@ -23327,6 +23361,10 @@ html {
       0 16px 40px rgb(15 23 42 / 0.12);
   }
 
+  .cascader-container.cascader-open > .cascader-dropdown {
+    display: block;
+  }
+
   .cascader-search {
     box-sizing: border-box;
     display: block;
@@ -23451,11 +23489,10 @@ html {
   }
 
   .calendar-header {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
     gap: 0.75rem;
     align-items: center;
-    justify-content: space-between;
     padding: 0.875rem;
     border-bottom: 1px solid var(--color-outline-variant);
   }
@@ -23466,10 +23503,16 @@ html {
   }
 
   .calendar-controls {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    min-width: 0;
     gap: 0.5rem;
-    align-items: center;
+    justify-items: center;
+    text-align: center;
+  }
+
+  .calendar-header > .calendar-nav {
+    width: 2rem;
+    padding: 0;
   }
 
   .calendar-nav,
@@ -23682,7 +23725,9 @@ html {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    min-width: 16rem;
+    box-sizing: border-box;
+    width: 18rem;
+    min-width: 0;
     max-width: min(20rem, calc(100vw - 2rem));
     padding: 0.75rem;
     background-color: var(--color-surface);
@@ -23699,49 +23744,161 @@ html {
       0 16px 40px rgb(15 23 42 / 0.12);
   }
 
-  .color-picker-panel .color-picker-input {
+  .color-picker .color-picker-area {
+    position: relative;
+    flex: none;
     width: 100%;
-    height: 2.5rem;
-    padding: 0 0.75rem;
-    font-family:
-      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    font-size: 0.875rem;
+    aspect-ratio: 4 / 3;
+    border-radius: var(--radius-sm);
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, transparent),
+      hsl(var(--color-picker-hue) 100% 50%);
+    cursor: crosshair;
+    touch-action: none;
   }
 
-  .color-picker-presets {
-    display: grid;
-    gap: 0.75rem;
+  .color-picker-area:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
   }
 
-  .color-picker-preset {
-    display: grid;
-    gap: 0.5rem;
+  .color-picker-area[aria-disabled="true"] {
+    cursor: not-allowed;
   }
 
-  .color-picker-preset-label {
-    color: var(--color-on-surface-variant);
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1rem;
+  .color-picker-area-indicator {
+    position: absolute;
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px #000;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
   }
 
-  .color-picker-preset-colors {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+  .color-picker-instructions {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 
-  .color-picker-preset-colors .color-picker-swatch {
-    --color-picker-swatch-size: 1.5rem;
-
-    border-radius: 999px;
+  .color-picker .color-picker-hue {
+    width: 100%;
+    height: 1.5rem;
+    margin: 0;
+    background: transparent;
+    appearance: none;
+    cursor: pointer;
   }
 
-  .descriptions {
-    box-sizing: border-box;
-    width: 100%;
-    color: var(--color-on-surface);
+  .color-picker-hue::-webkit-slider-runnable-track {
+    height: 0.75rem;
+    border-radius: var(--radius-full);
+    background: linear-gradient(
+      to right,
+      #f00,
+      #ff0,
+      #0f0,
+      #0ff,
+      #00f,
+      #f0f,
+      #f00
+    );
+  }
+
+  .color-picker-hue::-moz-range-track {
+    height: 0.75rem;
+    border-radius: var(--radius-full);
+    background: linear-gradient(
+      to right,
+      #f00,
+      #ff0,
+      #0f0,
+      #0ff,
+      #00f,
+      #f0f,
+      #f00
+    );
+  }
+
+  .color-picker-hue::-webkit-slider-thumb {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.125rem;
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-on-surface);
+    box-shadow: 0 0 0 1px var(--color-outline);
+    appearance: none;
+  }
+
+  .color-picker-hue::-moz-range-thumb {
+    width: 0.75rem;
+    height: 0.75rem;
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-on-surface);
+    box-shadow: 0 0 0 1px var(--color-outline);
+  }
+
+  .color-picker-hue:disabled {
+    cursor: not-allowed;
+  }
+
+  .color-picker-hue:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+    border-radius: var(--radius-full);
+  }
+  .color-picker-panel .color-picker-input {
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    font-size: 0.875rem;
+  }
+
+  .color-picker-presets {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .color-picker-preset {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .color-picker-preset-label {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+  }
+
+  .color-picker-preset-colors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .color-picker-preset-colors .color-picker-swatch {
+    --color-picker-swatch-size: 1.5rem;
+
+    border-radius: 999px;
+  }
+
+  .descriptions {
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--color-on-surface);
     font-size: 0.875rem;
     line-height: 1.375rem;
   }
@@ -23857,133 +24014,29 @@ html {
     background-color: var(--color-tertiary);
   }
 
-  .dropdown-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-  }
-
-  .dropdown-wrapper > [role="button"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 2.25rem;
-    padding: 0 0.875rem;
-    color: var(--color-on-surface);
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition:
-      background-color 150ms ease-in-out,
-      border-color 150ms ease-in-out,
-      color 150ms ease-in-out;
-  }
-
-  .dropdown-wrapper > [role="button"]:hover,
-  .dropdown-wrapper > [role="button"]:focus-visible {
-    color: var(--color-primary);
-    background-color: var(--color-surface-container);
-    border-color: var(--color-primary);
-    outline: none;
-  }
-
-  .dropdown-wrapper > .popover.dropdown {
-    position: absolute;
-    z-index: 1050;
-    display: block;
-    min-width: 12rem;
-    max-width: calc(100vw - 2rem);
-    padding: 0.375rem;
-    color: var(--color-on-surface);
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md);
-    box-shadow:
-      0 4px 12px rgb(15 23 42 / 0.1),
-      0 16px 40px rgb(15 23 42 / 0.12);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-0.25rem);
-    transition:
-      opacity 150ms ease-out,
-      visibility 150ms ease-out,
-      transform 150ms ease-out;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-open {
-    opacity: 1;
-    visibility: visible;
-    transform: none;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-bottom,
-  .dropdown-wrapper > .popover.dropdown.dropdown-bottom-left {
-    top: calc(100% + 0.5rem);
-    left: 0;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-bottom-right {
-    top: calc(100% + 0.5rem);
-    right: 0;
-    left: auto;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-top,
-  .dropdown-wrapper > .popover.dropdown.dropdown-top-left {
-    bottom: calc(100% + 0.5rem);
-    left: 0;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-top-right {
-    right: 0;
-    bottom: calc(100% + 0.5rem);
-    left: auto;
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-left {
-    top: 50%;
-    right: calc(100% + 0.5rem);
-    transform: translate(0.25rem, -50%);
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-left.dropdown-open {
-    transform: translateY(-50%);
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-right {
-    top: 50%;
-    left: calc(100% + 0.5rem);
-    transform: translate(-0.25rem, -50%);
-  }
-
-  .dropdown-wrapper > .popover.dropdown.dropdown-right.dropdown-open {
-    transform: translateY(-50%);
-  }
-
-  .dropdown-menu {
+  .dropdown-menu.menu {
     display: grid;
-    gap: 0.125rem;
+    width: 100%;
+    gap: 0.25rem;
     padding: 0;
     margin: 0;
     list-style: none;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
   }
 
   .dropdown-menu .menu-item {
     display: flex;
-    gap: 0.625rem;
+    gap: 0.5rem;
     align-items: center;
     width: 100%;
     min-height: 2rem;
-    padding: 0.375rem 0.625rem;
+    padding: 0.375rem 0.5rem;
     color: var(--color-on-surface);
     font: inherit;
     font-size: 0.875rem;
+    font-weight: 400;
     text-align: left;
     background-color: transparent;
     border: 0;
@@ -24001,6 +24054,17 @@ html {
     color: var(--color-error);
   }
 
+  .dropdown-menu .menu-item:disabled {
+    color: var(--color-on-surface-variant);
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .dropdown-menu .menu-item:disabled:hover,
+  .dropdown-menu .menu-item:disabled:focus-visible {
+    background-color: transparent;
+  }
+
   .dropdown-menu .menu-divider {
     height: 1px;
     margin: 0.25rem 0;
@@ -24008,21 +24072,51 @@ html {
   }
 
   .dropdown-button {
+    position: relative;
     display: inline-flex;
     align-items: center;
   }
 
-  .dropdown-button > *:first-child {
+  .dropdown-button-block {
+    display: flex;
+    width: 100%;
+  }
+
+  .dropdown-button-block > .btn:first-child {
+    flex: 1;
+  }
+
+  .dropdown-button > .dropdown {
+    position: static;
+    margin-left: -1px;
+  }
+
+  .dropdown-button .btn-base.btn-outline {
+    border-color: var(--color-outline-variant);
+  }
+
+  .dropdown-button > .btn:first-child {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
-  .dropdown-button > *:last-child {
-    margin-left: -1px;
+  .dropdown-button > .dropdown .btn {
+    inline-size: calc(1lh + var(--btn-py) + var(--btn-py) + 2px);
+    padding-inline: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
+  .dropdown-button > .dropdown .btn-content {
+    display: inline-flex;
+    align-items: center;
+    block-size: 1lh;
+  }
+
+  .dropdown-button > .dropdown .btn-content svg {
+    display: block;
+  }
+
   .empty {
     box-sizing: border-box;
     display: grid;
@@ -24828,6 +24922,157 @@ html {
     }
   }
 
+  .dm-layout {
+    min-width: 0;
+    min-height: 0;
+    background: var(--color-surface);
+  }
+
+  .dm-layout > .dm-layout-shell,
+  .dm-layout .dm-layout-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .dm-layout .dm-layout-sider {
+    min-height: 0;
+    padding: 0;
+    color: var(--color-on-surface);
+    background: var(--color-surface-container-low);
+    border-inline-end: 1px solid var(--color-outline-variant);
+  }
+
+  .dm-layout .dm-layout-breadcrumb {
+    min-width: 0;
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid var(--color-outline-variant);
+  }
+
+  .dm-layout .dm-layout-body {
+    display: block;
+    min-height: 0;
+    padding: 1rem;
+    background: transparent;
+  }
+
+  .dm-layout .dm-layout-content {
+    min-width: 0;
+    max-width: 100%;
+    overflow: auto;
+    overflow-wrap: anywhere;
+  }
+
+  .dm-layout .dm-layout-auxiliary {
+    margin-bottom: 1rem;
+    color: var(--color-on-surface-variant);
+  }
+
+  .dm-menu {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    color: var(--color-on-surface);
+    background: var(--color-surface-container-low);
+  }
+
+  .dm-menu-header,
+  .dm-menu-content,
+  .dm-menu-footer {
+    min-width: 0;
+    padding: 0.5rem;
+  }
+
+  .dm-menu-header {
+    font-weight: 700;
+    border-bottom: 1px solid var(--color-outline-variant);
+  }
+
+  .dm-menu-content {
+    flex: 1 1 auto;
+  }
+
+  .dm-menu-footer {
+    display: flex;
+    justify-content: flex-end;
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .dm-menu-collapse-button svg {
+    display: block;
+  }
+
+  .dm-menu .menu {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .dm-menu .menu-item > span:not(.menu-item-icon),
+  .dm-menu .menu-item-submenu > span:not(.menu-item-icon) {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .dm-menu-item-label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dm-menu-item-symbol {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dm-menu-item-symbol > svg {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .dm-menu-collapsed .menu-item,
+  .dm-menu-collapsed .menu-item-submenu {
+    position: relative;
+    justify-content: center;
+    gap: 0;
+    padding-inline: 0;
+  }
+
+  .dm-menu-collapsed .dm-menu-item-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .dm-menu-collapsed .menu-submenu {
+    padding-inline-start: 0;
+  }
+
+  .dm-menu-collapsed .dm-menu-footer {
+    justify-content: center;
+  }
+
+  @media (max-width: 640px) {
+    .dm-layout .dm-layout-sider {
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--color-outline-variant);
+    }
+  }
+
   .list {
     display: flex;
     flex-direction: column;
@@ -25254,7 +25499,7 @@ html {
     opacity: 1;
   }
 
-  .modal-backdrop {
+  .modal-backdrop:not(dialog) {
     position: fixed;
     inset: 0;
     z-index: 1000;
@@ -25266,16 +25511,16 @@ html {
     background: color-mix(in oklch, var(--color-scrim) 42%, transparent);
   }
 
-  .modal-backdrop.modal-open {
+  .modal-backdrop:not(dialog).modal-open {
     display: flex;
   }
 
-  .modal-backdrop-center {
+  .modal-backdrop-center:not(dialog) {
     align-items: center;
     padding-top: 16px;
   }
 
-  .modal-backdrop > .modal {
+  .modal-backdrop:not(dialog) > .modal:not(dialog) {
     position: relative;
     display: flex;
     width: min(100%, 32rem);
@@ -25291,7 +25536,14 @@ html {
       color-mix(in oklch, var(--color-scrim) 35%, transparent);
   }
 
-  .modal-header {
+  dialog.modal > .react-modal-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-header {
     display: flex;
     align-items: flex-start;
     gap: 16px;
@@ -25299,7 +25551,7 @@ html {
     border-block-end: 1px solid var(--color-outline-variant);
   }
 
-  .modal-title {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-title {
     margin: 0;
     color: var(--color-on-surface);
     font-size: 1rem;
@@ -25307,7 +25559,7 @@ html {
     line-height: 1.4;
   }
 
-  .modal-body {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-body {
     flex: 1 1 auto;
     min-height: 0;
     padding: 20px;
@@ -25316,7 +25568,7 @@ html {
     line-height: 1.5;
   }
 
-  .modal-footer {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
@@ -25324,7 +25576,11 @@ html {
     border-block-start: 1px solid var(--color-outline-variant);
   }
 
-  .modal-footer > button {
+  .react-modal-box .modal-footer {
+    margin-top: 0;
+  }
+
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button {
     min-height: 2.25rem;
     padding: 0 14px;
     color: var(--color-on-surface);
@@ -25336,18 +25592,18 @@ html {
     cursor: pointer;
   }
 
-  .modal-footer > button:last-child {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:last-child {
     color: var(--color-primary-content);
     background: var(--color-primary);
     border-color: var(--color-primary);
   }
 
-  .modal-footer > button:disabled {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:disabled {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  .modal-close {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close {
     position: absolute;
     top: 12px;
     right: 12px;
@@ -25366,8 +25622,8 @@ html {
     cursor: pointer;
   }
 
-  .modal-close:hover,
-  .modal-close:focus-visible {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:hover,
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:focus-visible {
     color: var(--color-on-surface);
     background: var(--color-surface-container);
     outline: none;
@@ -25554,184 +25810,61 @@ html {
     transform: translateY(-50%);
   }
 
-  .datepicker-icon::before {
-    width: 0.875rem;
-    height: 0.8125rem;
-    border: 1.75px solid currentcolor;
-    border-radius: 0.1875rem;
-    content: "";
-  }
-
-  .datepicker-icon::after {
-    position: absolute;
-    top: 0.3125rem;
-    left: 0.1875rem;
-    width: 0.625rem;
-    border-top: 1.75px solid currentcolor;
-    content: "";
-  }
-
   .datepicker-clear {
     position: absolute;
     top: 50%;
     right: 2.25rem;
-    display: inline-flex;
-    width: 1.25rem;
-    height: 1.25rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    color: var(--color-on-surface-variant);
-    font-size: 0.8125rem;
-    line-height: 1;
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-full);
-    cursor: pointer;
-    transform: translateY(-50%);
-  }
-
-  .datepicker-clear:hover,
-  .datepicker-clear:focus-visible {
-    color: var(--color-on-surface);
-    background-color: var(--color-surface-container);
-    outline: none;
-  }
-
-  .datepicker-range .datepicker-clear {
-    right: 0.5rem;
-  }
-
-  .datepicker-range-separator {
-    flex: 0 0 auto;
-    color: var(--color-on-surface-variant);
-  }
-
-  .popover-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-  }
-
-  .popover-wrapper > .popover {
-    position: absolute;
-    z-index: 1050;
-    min-width: 12rem;
-    max-width: min(20rem, calc(100vw - 2rem));
-    padding: 0.875rem 1rem;
-    color: var(--color-on-surface);
-    font-size: 0.875rem;
-    line-height: 1.375rem;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transition:
-      opacity 150ms ease-out,
-      visibility 150ms ease-out,
-      transform 150ms ease-out;
-  }
-
-  .popover-wrapper > .popover.popover-show {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-
-  .popover-wrapper > .popover strong {
-    display: block;
-    margin-bottom: 0.25rem;
-    color: var(--color-on-surface);
-    font-weight: 600;
-  }
-
-  .popover-wrapper > .popover-top {
-    bottom: calc(100% + 0.75rem);
-    left: 50%;
-    transform: translateX(-50%) translateY(0.25rem);
-  }
-
-  .popover-wrapper > .popover-top.popover-show {
-    transform: translateX(-50%);
-  }
-
-  .popover-wrapper > .popover-bottom {
-    top: calc(100% + 0.75rem);
-    left: 50%;
-    transform: translateX(-50%) translateY(-0.25rem);
-  }
-
-  .popover-wrapper > .popover-bottom.popover-show {
-    transform: translateX(-50%);
-  }
-
-  .popover-wrapper > .popover-left {
-    top: 50%;
-    right: calc(100% + 0.75rem);
-    transform: translate(0.25rem, -50%);
-  }
-
-  .popover-wrapper > .popover-left.popover-show {
-    transform: translateY(-50%);
-  }
-
-  .popover-wrapper > .popover-right {
-    top: 50%;
-    left: calc(100% + 0.75rem);
-    transform: translate(-0.25rem, -50%);
-  }
-
-  .popover-wrapper > .popover-right.popover-show {
+    display: inline-flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: var(--color-on-surface-variant);
+    font-size: 0.8125rem;
+    line-height: 1;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-full);
+    cursor: pointer;
     transform: translateY(-50%);
   }
 
-  .popover-wrapper > .popover > .popover-arrow {
-    position: absolute;
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    transform: rotate(45deg);
+  .datepicker-clear:hover,
+  .datepicker-clear:focus-visible {
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    outline: none;
   }
 
-  .popover-wrapper > .popover-top > .popover-arrow {
-    bottom: -0.4375rem;
-    left: 50%;
-    border-top: 0;
-    border-left: 0;
-    transform: translateX(-50%) rotate(45deg);
+  .datepicker-range .datepicker-clear {
+    right: 0.5rem;
   }
 
-  .popover-wrapper > .popover-bottom > .popover-arrow {
-    top: -0.4375rem;
-    left: 50%;
-    border-right: 0;
-    border-bottom: 0;
-    transform: translateX(-50%) rotate(45deg);
+  .datepicker-range-separator {
+    flex: 0 0 auto;
+    color: var(--color-on-surface-variant);
   }
 
-  .popover-wrapper > .popover-left > .popover-arrow {
-    top: 50%;
-    right: -0.4375rem;
-    border-bottom: 0;
-    border-left: 0;
-    transform: translateY(-50%) rotate(45deg);
+  .popover-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
   }
 
-  .popover-wrapper > .popover-right > .popover-arrow {
-    top: 50%;
-    left: -0.4375rem;
-    border-top: 0;
-    border-right: 0;
-    transform: translateY(-50%) rotate(45deg);
+  .popover-wrapper > .popover[popover] {
+    max-width: min(20rem, calc(100vw - 2rem));
+    color: var(--color-on-surface);
+    font-size: 0.875rem;
+    line-height: 1.375rem;
   }
 
-  .popover-wrapper > .popover-no-arrow > .popover-arrow {
-    display: none;
+  .popover-wrapper > .popover > strong {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--color-on-surface);
+    font-weight: 600;
   }
 
   .popconfirm {
@@ -26751,6 +26884,11 @@ html {
     --switch-content-color: var(--color-tertiary-content);
   }
 
+  .switch:has(.switch-error) {
+    --switch-color: var(--color-error);
+    --switch-content-color: var(--color-error-content);
+  }
+
   .switch-input {
     position: absolute;
     width: 1px;
@@ -26816,6 +26954,10 @@ html {
     background-color: var(--color-surface);
   }
 
+  .switch:has(.switch-input[aria-invalid="true"]) .switch-track {
+    border-color: var(--color-error);
+  }
+
   .switch:has(.switch-input:focus-visible) .switch-track {
     box-shadow: 0 0 0 3px
       color-mix(in oklch, var(--switch-color) 22%, transparent);
@@ -27052,7 +27194,6 @@ html {
   .tab:hover:not(:disabled),
   .tab:focus-visible {
     color: var(--color-primary);
-    outline: none;
   }
 
   .tab-active,
@@ -27675,6 +27816,154 @@ html {
     }
   }
 
+  .datepicker > button.datepicker-icon,
+  .time-picker > button.time-picker-icon {
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .datepicker > button.datepicker-icon {
+    right: 0.375rem;
+    width: 2rem;
+    height: 2rem;
+    border: 0;
+  }
+
+  .datepicker > button.datepicker-icon:focus-visible,
+  .time-picker > button.time-picker-icon:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
+  .datepicker > button.datepicker-icon:disabled,
+  .time-picker > button.time-picker-icon:disabled {
+    cursor: not-allowed;
+  }
+
+  .datepicker > .datepicker-dropdown {
+    position: absolute;
+    top: calc(100% + 0.375rem);
+    left: 0;
+    z-index: 1050;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: calc(100vw - 2rem);
+    padding: 0;
+    color: var(--color-on-surface);
+    background: var(--color-surface);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .datepicker-dropdown > .calendar {
+    width: 100%;
+    border: 0;
+    box-shadow: none;
+  }
+
+  .datepicker-dropdown .calendar-header,
+  .datepicker-dropdown .calendar-body {
+    padding: 0.5rem;
+  }
+
+  .datepicker-dropdown .calendar-header,
+  .datepicker-dropdown .calendar-controls {
+    gap: 0.375rem;
+  }
+
+  .datepicker-dropdown .calendar-header button {
+    padding-inline: 0.375rem;
+    font-size: 0.75rem;
+  }
+
+  .datepicker-dropdown .datepicker-footer,
+  .datepicker-dropdown .datepicker-preset {
+    padding: 0.5rem;
+  }
+
+  .time-picker > .time-picker-panel {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: calc(100vw - 2rem);
+  }
+
+  .time-picker-columns {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .time-picker-column {
+    flex: 1 1 0;
+    min-width: 0;
+    max-height: 12rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+
+  .time-picker-option {
+    display: block;
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem;
+    color: var(--color-on-surface);
+    font: inherit;
+    font-size: 0.8125rem;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .time-picker-option:hover:not(:disabled),
+  .time-picker-option:focus-visible {
+    color: var(--color-primary);
+    background: var(--color-primary-container);
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+
+  .time-picker-option[aria-selected="true"] {
+    color: var(--color-primary-content);
+    background: var(--color-primary);
+  }
+
+  .time-picker-option:disabled {
+    color: var(--color-on-surface-variant);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .time-picker-panel .time-picker-footer {
+    gap: 0.375rem;
+    margin-top: 0.375rem;
+    padding-top: 0.375rem;
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .time-picker-confirm {
+    min-height: 2rem;
+    padding: 0 0.625rem;
+    color: var(--color-primary-content);
+    font: inherit;
+    font-size: 0.8125rem;
+    background: var(--color-primary);
+    border: 0;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .time-picker-confirm:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .timeline-item-pending .timeline-marker {
       animation: none;
@@ -27691,7 +27980,7 @@ html {
     vertical-align: middle;
   }
 
-  .tooltip {
+  .tooltip:where(:not([popover])) {
     position: absolute;
     z-index: 1070;
     display: inline-flex;
@@ -27716,61 +28005,61 @@ html {
       transform 150ms ease-in-out;
   }
 
-  .tooltip-show {
+  .tooltip-show:where(:not([popover])) {
     opacity: 1;
   }
 
-  .tooltip-sm {
+  .tooltip-sm:where(:not([popover])) {
     padding: 0.25rem 0.5rem;
     font-size: 0.6875rem;
   }
 
-  .tooltip-lg {
+  .tooltip-lg:where(:not([popover])) {
     padding: 0.5rem 0.75rem;
     font-size: 0.8125rem;
   }
 
-  .tooltip-top {
+  .tooltip-top:where(:not([popover])) {
     bottom: calc(100% + 0.5rem);
     left: 50%;
     transform: translate(-50%, 0.25rem);
   }
 
-  .tooltip-top.tooltip-show {
+  .tooltip-top.tooltip-show:where(:not([popover])) {
     transform: translate(-50%, 0);
   }
 
-  .tooltip-bottom {
+  .tooltip-bottom:where(:not([popover])) {
     top: calc(100% + 0.5rem);
     left: 50%;
     transform: translate(-50%, -0.25rem);
   }
 
-  .tooltip-bottom.tooltip-show {
+  .tooltip-bottom.tooltip-show:where(:not([popover])) {
     transform: translate(-50%, 0);
   }
 
-  .tooltip-left {
+  .tooltip-left:where(:not([popover])) {
     top: 50%;
     right: calc(100% + 0.5rem);
     transform: translate(0.25rem, -50%);
   }
 
-  .tooltip-left.tooltip-show {
+  .tooltip-left.tooltip-show:where(:not([popover])) {
     transform: translate(0, -50%);
   }
 
-  .tooltip-right {
+  .tooltip-right:where(:not([popover])) {
     top: 50%;
     left: calc(100% + 0.5rem);
     transform: translate(-0.25rem, -50%);
   }
 
-  .tooltip-right.tooltip-show {
+  .tooltip-right.tooltip-show:where(:not([popover])) {
     transform: translate(0, -50%);
   }
 
-  .tooltip-arrow {
+  :where(.tooltip:not([popover])) .tooltip-arrow {
     position: absolute;
     display: block;
     width: 0.5rem;
@@ -27780,43 +28069,53 @@ html {
     transform: rotate(45deg);
   }
 
-  .tooltip-top .tooltip-arrow {
+  .tooltip-top:where(:not([popover])) .tooltip-arrow {
     bottom: -0.25rem;
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
 
-  .tooltip-bottom .tooltip-arrow {
+  .tooltip-bottom:where(:not([popover])) .tooltip-arrow {
     top: -0.25rem;
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
 
-  .tooltip-left .tooltip-arrow {
+  .tooltip-left:where(:not([popover])) .tooltip-arrow {
     top: 50%;
     right: -0.25rem;
     transform: translateY(-50%) rotate(45deg);
   }
 
-  .tooltip-right .tooltip-arrow {
+  .tooltip-right:where(:not([popover])) .tooltip-arrow {
     top: 50%;
     left: -0.25rem;
     transform: translateY(-50%) rotate(45deg);
   }
 
-  .tooltip-no-arrow {
+  .tooltip-no-arrow:where(:not([popover])) {
     margin: 0;
   }
 
-  .tooltip-no-arrow .tooltip-arrow {
+  .tooltip-no-arrow:where(:not([popover])) .tooltip-arrow {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .tooltip {
+    .tooltip:where(:not([popover])) {
       transition: none;
     }
   }
+
+  .tooltip-sm[popover] {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.6875rem;
+  }
+
+  .tooltip-lg[popover] {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
 }
 
 @layer components {
@@ -28274,6 +28573,42 @@ html {
     opacity: 0.55;
   }
 
+  .tree-select-container > .tree-select-dropdown > .tree-select-search-input {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .tree-select-title {
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  .tree-select-title:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .tree-select-title:disabled {
+    cursor: not-allowed;
+  }
+
+  .tree-select .tree-select-switcher {
+    transform: none;
+  }
+
+  .tree-select > .tree-select-clear {
+    position: absolute;
+    top: 1rem;
+    right: 2.75rem;
+  }
+
   .tree-node-switcher {
     display: inline-grid;
     width: 1.5rem;
@@ -28745,6 +29080,7 @@ html {
     border-right-color: var(--dm-color-solid);
   }
 
+  /* WORKAROUND(upstream): duskmoon-dev/duskmoonui#65 adds the missing accent, neutral, and base timeline marker classes. */
   :is(
     .timeline-marker-primary,
     .timeline-marker-secondary,
@@ -28826,56 +29162,4 @@ html {
       transparent 50%
     );
   }
-
-  /* WORKAROUND(upstream): duskmoon-dev/duskmoonui#50 keeps the tail and caret separate. */
-  .chat-bubble-streaming::after {
-    content: none;
-  }
-
-  .chat-start .chat-bubble-streaming::after {
-    content: "";
-    position: absolute;
-    top: 1px;
-    left: -0.5rem;
-    display: block;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
-    margin-left: 0;
-    background-color: var(--chat-bubble-bg);
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-    vertical-align: initial;
-    animation: none;
-  }
-
-  .chat-end .chat-bubble-streaming::after {
-    content: "";
-    position: absolute;
-    top: 1px;
-    right: -0.5rem;
-    display: block;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
-    margin-left: 0;
-    background-color: var(--chat-bubble-bg);
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-    vertical-align: initial;
-    transform: scaleX(-1);
-    animation: none;
-  }
-
-  .chat-streaming-caret {
-    display: inline-block;
-    width: 1px;
-    height: 1em;
-    margin-left: 0.25rem;
-    background-color: currentcolor;
-    vertical-align: -0.125em;
-    animation: chat-stream-caret 1s step-end infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .chat-streaming-caret {
-      animation: none;
-    }
-  }
 }