@dialpad/dialtone-css 8.74.0-next.1 → 8.74.0-next.3

package/lib/dist/dialtone.css

@@ -2024,9 +2024,9 @@
     --button-border-radius: var(--dt-button-size-radius-md);
     --button-border-width: var(--dt-size-border-100);
     --button-typography: var(--dt-typography-button-md);
-    --button-padding-y-xs: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--button-border-width));
+    --button-padding-y-xs: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--button-border-width));
     --button-padding-x-xs: calc(var(--dt-size-400) - var(--button-border-width));
-    --button-padding-y-sm: calc(var(--dt-size-400) - var(--button-border-width));
+    --button-padding-y-sm: calc(var(--dt-size-350) - var(--button-border-width));
     --button-padding-x-sm: calc(var(--dt-size-450) - var(--button-border-width));
     --button-padding-y-md: calc(var(--dt-size-400) - var(--button-border-width));
     --button-padding-x-md: calc(var(--dt-size-450) - var(--button-border-width));
@@ -2045,6 +2045,7 @@
     padding: var(--button-padding-y) var(--button-padding-x);
     color: var(--button-color-text);
     font: var(--button-typography);
+    font-weight: var(--dt-font-weight-medium);
     text-transform: inherit;
     text-decoration: none;
     vertical-align: middle;
@@ -2062,17 +2063,17 @@
             user-select: none;
     fill: currentColor;
   }
-  .d-btn:hover:not([disabled]),
-  .d-btn--md:hover:not([disabled]) {
+  .d-btn:hover:not(:disabled, .d-btn--disabled),
+  .d-btn--md:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-hover);
     --button-color-background: var(--dt-action-color-background-base-hover);
   }
-  .d-btn:active:not([disabled]),
-  .d-btn--md:active:not([disabled]),
-  .d-btn.d-btn--active:not([disabled]),
-  .d-btn--md.d-btn--active:not([disabled]),
-  .d-btn.d-btn--active:active:not([disabled]),
-  .d-btn--md.d-btn--active:active:not([disabled]) {
+  .d-btn:active:not(:disabled, .d-btn--disabled),
+  .d-btn--md:active:not(:disabled, .d-btn--disabled),
+  .d-btn.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--md.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn.d-btn--active:active:not(:disabled, .d-btn--disabled),
+  .d-btn--md.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-active);
     --button-color-background: var(--dt-action-color-background-base-active);
   }
@@ -2081,13 +2082,35 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-btn[disabled],
-  .d-btn--md[disabled] {
-    --button-color-border: transparent !important;
-    --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
-    --button-color-background: var(--dt-action-color-background-disabled-default) !important;
+  .d-btn--disabled,
+  .d-btn--md--disabled,
+  .d-btn:disabled,
+  .d-btn--md:disabled {
+    --chroma-adjust-text: 0.08;
+    --chroma-adjust-background: 0.08;
+    --chroma-adjust-border: 0.08;
+    --opacity-adjust-text: 65%;
+    --opacity-adjust-background: 65%;
+    --opacity-adjust-border: 40%;
+    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
+    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
+    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
     cursor: not-allowed;
     transition: none;
+    pointer-events: none;
+  }
+  .d-btn--disabled.d-btn--primary,
+  .d-btn--md--disabled.d-btn--primary,
+  .d-btn:disabled.d-btn--primary,
+  .d-btn--md:disabled.d-btn--primary {
+    --opacity-adjust-text: 80%;
+  }
+  .d-btn--disabled.d-btn--muted,
+  .d-btn--md--disabled.d-btn--muted,
+  .d-btn:disabled.d-btn--muted,
+  .d-btn--md:disabled.d-btn--muted {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 50%;
   }
   .d-btn--unstyled {
     /* stylelint-disable */
@@ -2128,6 +2151,31 @@
     --button-padding-x: var(--button-padding-x-xl);
     --button-border-radius: var(--dt-button-size-radius-xl);
   }
+  .d-btn__leading,
+  .d-btn__trailing {
+    display: inline-flex;
+    align-items: center;
+    align-self: stretch;
+    margin-block: calc(-1 * var(--button-padding-y));
+  }
+  .d-btn:disabled .d-btn__leading,
+  .d-btn:disabled .d-btn__trailing,
+  .d-btn--disabled .d-btn__leading,
+  .d-btn--disabled .d-btn__trailing {
+    opacity: 0.6;
+  }
+  .d-btn__leading {
+    order: -1;
+    margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-size-200);
+    border-start-start-radius: calc(var(--button-border-radius) - 1px);
+    border-end-start-radius: calc(var(--button-border-radius) - 1px);
+  }
+  .d-btn__trailing {
+    margin-inline: var(--dt-size-200) calc(-1 * var(--button-padding-x));
+    border-start-end-radius: calc(var(--button-border-radius) - 1px);
+    border-end-end-radius: calc(var(--button-border-radius) - 1px);
+    order: 2;
+  }
   .d-btn__label {
     display: inline-flex;
     flex: 1 auto;
@@ -2162,13 +2210,13 @@
     --button-color-text: var(--dt-action-color-foreground-muted-default);
     --button-border-radius: var(--dt-size-radius-circle);
   }
-  .d-btn--circle:hover:not([disabled]) {
+  .d-btn--circle:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
   }
-  .d-btn--circle:active:not([disabled]),
-  .d-btn--circle.d-btn--active:not([disabled]),
-  .d-btn--circle.d-btn--active:active:not([disabled]) {
+  .d-btn--circle:active:not(:disabled, .d-btn--disabled),
+  .d-btn--circle.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--circle.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-active);
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
@@ -2209,13 +2257,13 @@
     --button-color-border: var(--dt-action-color-border-base-default);
     --button-color-background: var(--dt-action-color-background-base-primary-default);
   }
-  .d-btn--primary:hover:not([disabled]) {
+  .d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-primary-default);
     --button-color-background: var(--dt-action-color-background-base-primary-hover);
   }
-  .d-btn--primary:active:not([disabled]),
-  .d-btn--primary.d-btn--active:not([disabled]),
-  .d-btn--primary.d-btn--active:active:not([disabled]) {
+  .d-btn--primary:active:not(:disabled, .d-btn--disabled),
+  .d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-primary-default);
     --button-color-background: var(--dt-action-color-background-base-primary-active);
   }
@@ -2223,13 +2271,13 @@
     --button-color-text: var(--dt-action-color-foreground-muted-default);
     --button-color-border: var(--dt-action-color-border-muted-default);
   }
-  .d-btn--muted:hover:not([disabled]) {
+  .d-btn--muted:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
   }
-  .d-btn--muted:active:not([disabled]),
-  .d-btn--muted.d-btn--active:not([disabled]),
-  .d-btn--muted.d-btn--active:active:not([disabled]) {
+  .d-btn--muted:active:not(:disabled, .d-btn--disabled),
+  .d-btn--muted.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--muted.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-active);
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
@@ -2241,13 +2289,13 @@
     --button-color-background: var(--dt-action-color-background-critical-default);
     --button-color-border: var(--dt-action-color-border-critical-default);
   }
-  .d-btn--danger:hover:not([disabled]) {
+  .d-btn--danger:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-hover);
     --button-color-background: var(--dt-action-color-background-critical-hover);
   }
-  .d-btn--danger:active:not([disabled]),
-  .d-btn--danger.d-btn--active:not([disabled]),
-  .d-btn--danger.d-btn--active:active:not([disabled]) {
+  .d-btn--danger:active:not(:disabled, .d-btn--disabled),
+  .d-btn--danger.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--danger.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-active);
     --button-color-background: var(--dt-action-color-background-critical-active);
   }
@@ -2258,13 +2306,13 @@
     --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
     --button-color-background: var(--dt-action-color-background-critical-primary-default);
   }
-  .d-btn--danger.d-btn--primary:hover:not([disabled]) {
+  .d-btn--danger.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
     --button-color-background: var(--dt-action-color-background-critical-primary-hover);
   }
-  .d-btn--danger.d-btn--primary:active:not([disabled]),
-  .d-btn--danger.d-btn--primary.d-btn--active:not([disabled]),
-  .d-btn--danger.d-btn--primary.d-btn--active:active:not([disabled]) {
+  .d-btn--danger.d-btn--primary:active:not(:disabled, .d-btn--disabled),
+  .d-btn--danger.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--danger.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
     --button-color-background: var(--dt-action-color-background-critical-primary-active);
   }
@@ -2273,13 +2321,13 @@
     --button-color-background: var(--dt-action-color-background-positive-default);
     --button-color-border: var(--dt-action-color-border-positive-default);
   }
-  .d-btn--positive:hover:not([disabled]) {
+  .d-btn--positive:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-positive-hover);
     --button-color-background: var(--dt-action-color-background-positive-hover);
   }
-  .d-btn--positive:active:not([disabled]),
-  .d-btn--positive.d-btn--active:not([disabled]),
-  .d-btn--positive.d-btn--active:active:not([disabled]) {
+  .d-btn--positive:active:not(:disabled, .d-btn--disabled),
+  .d-btn--positive.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--positive.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-positive-active);
     --button-color-background: var(--dt-action-color-background-positive-active);
   }
@@ -2290,13 +2338,13 @@
     --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
     --button-color-background: var(--dt-action-color-background-positive-primary-default);
   }
-  .d-btn--positive.d-btn--primary:hover:not([disabled]) {
+  .d-btn--positive.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
     --button-color-background: var(--dt-action-color-background-positive-primary-hover);
   }
-  .d-btn--positive.d-btn--primary:active:not([disabled]),
-  .d-btn--positive.d-btn--primary.d-btn--active:not([disabled]),
-  .d-btn--positive.d-btn--primary.d-btn--active:active:not([disabled]) {
+  .d-btn--positive.d-btn--primary:active:not(:disabled, .d-btn--disabled),
+  .d-btn--positive.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--positive.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
     --button-color-background: var(--dt-action-color-background-positive-primary-active);
   }
@@ -2305,13 +2353,13 @@
     --button-color-background: var(--dt-action-color-background-inverted-default);
     --button-color-border: var(--dt-action-color-border-inverted-default);
   }
-  .d-btn--inverted:hover:not([disabled]) {
+  .d-btn--inverted:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-hover);
     --button-color-background: var(--dt-action-color-background-inverted-hover);
   }
-  .d-btn--inverted:active:not([disabled]),
-  .d-btn--inverted.d-btn--active:not([disabled]),
-  .d-btn--inverted.d-btn--active:active:not([disabled]) {
+  .d-btn--inverted:active:not(:disabled, .d-btn--disabled),
+  .d-btn--inverted.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--inverted.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-active);
     --button-color-background: var(--dt-action-color-background-inverted-active);
   }
@@ -2322,13 +2370,13 @@
     --button-color-text: var(--dt-action-color-foreground-inverted-primary-default);
     --button-color-background: var(--dt-action-color-background-inverted-primary-default);
   }
-  .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
+  .d-btn--inverted.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-primary-hover);
     --button-color-background: var(--dt-action-color-background-inverted-primary-hover);
   }
-  .d-btn--inverted.d-btn--primary:active:not([disabled]),
-  .d-btn--inverted.d-btn--primary.d-btn--active:not([disabled]),
-  .d-btn--inverted.d-btn--primary.d-btn--active:active:not([disabled]) {
+  .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled),
+  .d-btn--inverted.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-btn--inverted.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-inverted-primary-active);
     --button-color-background: var(--dt-action-color-background-inverted-primary-active);
   }
@@ -2378,28 +2426,19 @@
             animation: d-loading-circle 900ms infinite linear;
     content: "";
   }
-  .d-btn--disabled {
-    --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
-    --button-color-background: var(--dt-action-color-background-disabled-default) !important;
-    --button-color-border: transparent !important;
-    cursor: not-allowed;
-    transition: none;
-    pointer-events: none;
-  }
   .d-btn--brand {
     --button-color-text: var(--dt-color-neutral-white);
     --button-color-background: var(--brand-color);
     display: flex;
   }
-  .d-btn--brand:hover:not([disabled]),
-  .d-btn--brand:active:not([disabled]) {
+  .d-btn--brand:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: oklch(from var(--dt-color-neutral-white) l c h / 0.9);
     --button-color-background: oklch(from var(--brand-color) calc(l - 0.05) c h);
   }
   .d-btn--brand:focus-visible {
     box-shadow: 0 0 0 var(--dt-size-100) var(--dt-color-neutral-white), 0 0 0 0.25em oklch(from var(--brand-color) l c h / 0.9);
   }
-  .d-btn--brand:active:not([disabled]) {
+  .d-btn--brand:active:not(:disabled, .d-btn--disabled) {
     --button-color-background: oklch(from var(--brand-color) calc(l - 0.1) c h);
   }
   .d-btn--brand .d-btn__icon {
@@ -2632,9 +2671,9 @@
     --button-border-radius: var(--dt-button-size-radius-md);
     --button-border-width: var(--dt-size-border-100);
     --button-typography: var(--dt-typography-button-md);
-    --button-padding-y-xs: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--button-border-width));
+    --button-padding-y-xs: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--button-border-width));
     --button-padding-x-xs: calc(var(--dt-size-400) - var(--button-border-width));
-    --button-padding-y-sm: calc(var(--dt-size-400) - var(--button-border-width));
+    --button-padding-y-sm: calc(var(--dt-size-350) - var(--button-border-width));
     --button-padding-x-sm: calc(var(--dt-size-450) - var(--button-border-width));
     --button-padding-y-md: calc(var(--dt-size-400) - var(--button-border-width));
     --button-padding-x-md: calc(var(--dt-size-450) - var(--button-border-width));
@@ -2652,6 +2691,7 @@
     padding: var(--button-padding-y) var(--button-padding-x);
     color: var(--button-color-text);
     font: var(--button-typography);
+    font-weight: var(--dt-font-weight-medium);
     text-transform: inherit;
     text-decoration: none;
     vertical-align: middle;
@@ -2677,13 +2717,13 @@
     padding: calc(var(--dt-size-200) + var(--dt-size-100));
     border-width: 0;
   }
-  .d-chip__close:hover:not([disabled]) {
+  .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-hover);
     --button-color-background: var(--dt-action-color-background-base-hover);
   }
-  .d-chip__close:active:not([disabled]),
-  .d-chip__close.d-btn--active:not([disabled]),
-  .d-chip__close.d-btn--active:active:not([disabled]) {
+  .d-chip__close:active:not(:disabled, .d-btn--disabled),
+  .d-chip__close.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-base-active);
     --button-color-background: var(--dt-action-color-background-base-active);
   }
@@ -2691,20 +2731,37 @@
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
-  .d-chip__close[disabled] {
-    --button-color-border: transparent !important;
-    --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
-    --button-color-background: var(--dt-action-color-background-disabled-default) !important;
+  .d-chip__close--disabled,
+  .d-chip__close:disabled {
+    --chroma-adjust-text: 0.08;
+    --chroma-adjust-background: 0.08;
+    --chroma-adjust-border: 0.08;
+    --opacity-adjust-text: 65%;
+    --opacity-adjust-background: 65%;
+    --opacity-adjust-border: 40%;
+    color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
+    background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
+    border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
     cursor: not-allowed;
     transition: none;
+    pointer-events: none;
   }
-  .d-chip__close:hover:not([disabled]) {
+  .d-chip__close--disabled.d-btn--primary,
+  .d-chip__close:disabled.d-btn--primary {
+    --opacity-adjust-text: 80%;
+  }
+  .d-chip__close--disabled.d-btn--muted,
+  .d-chip__close:disabled.d-btn--muted {
+    --opacity-adjust-text: 50%;
+    --opacity-adjust-border: 50%;
+  }
+  .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-hover);
     --button-color-background: var(--dt-action-color-background-muted-hover);
   }
-  .d-chip__close:active:not([disabled]),
-  .d-chip__close.d-btn--active:not([disabled]),
-  .d-chip__close.d-btn--active:active:not([disabled]) {
+  .d-chip__close:active:not(:disabled, .d-btn--disabled),
+  .d-chip__close.d-btn--active:not(:disabled, .d-btn--disabled),
+  .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
     --button-color-text: var(--dt-action-color-foreground-muted-active);
     --button-color-background: var(--dt-action-color-background-muted-active);
   }
@@ -2893,7 +2950,7 @@
   }
   .d-datepicker__month-year-title {
     font-weight: var(--dt-font-weight-normal);
-    font-size: var(--dt-font-size-100);
+    font-size: var(--dt-font-size-150);
     line-height: var(--dt-font-line-height-300);
     text-transform: uppercase;
   }
@@ -2901,10 +2958,6 @@
     inline-size: var(--datepicker-button-size);
     block-size: var(--datepicker-button-size);
   }
-  .d-datepicker__nav-btn:disabled {
-    background-color: var(--dt-color-neutral-transparent);
-    opacity: var(--dt-opacity-900);
-  }
   .d-datepicker__weekday {
     color: var(--dt-color-foreground-tertiary);
     font-weight: var(--dt-font-weight-medium);
@@ -2933,10 +2986,6 @@
     color: var(--dt-action-color-foreground-base-primary-default);
     background: var(--dt-action-color-background-base-primary-default);
   }
-  .d-datepicker__day--disabled {
-    background-color: var(--dt-color-neutral-transparent);
-    opacity: var(--dt-opacity-900);
-  }
 }
 @layer dialtone.components {
   .d-context-menu-list {
@@ -3469,7 +3518,7 @@
   }
   .d-input__wrapper .d-input-icon:has(+ .d-textarea--xs),
   .d-input__wrapper .d-textarea--xs + .d-input-icon {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -3483,7 +3532,7 @@
   }
   .d-input__wrapper .d-input-icon:has(+ .d-textarea--sm),
   .d-input__wrapper .d-textarea--sm + .d-input-icon {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);
@@ -3538,7 +3587,7 @@
     box-shadow: none !important;
   }
   .d-input.d-input--xs {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -3548,7 +3597,7 @@
     block-size: var(--dt-icon-size-100);
   }
   .d-input.d-input--sm {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);
@@ -3584,7 +3633,7 @@
     scroll-padding-block: var(--input-padding-y);
   }
   .d-textarea--xs {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -3595,7 +3644,7 @@
     block-size: var(--dt-icon-size-100);
   }
   .d-textarea--sm {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);
@@ -3940,6 +3989,8 @@
   .d-loader__icon {
     -webkit-animation: d-loading-circle 900ms infinite linear;
             animation: d-loading-circle 900ms infinite linear;
+    -webkit-mask-image: conic-gradient(from 270deg, black 0deg, black 105deg, transparent 170deg, transparent 180deg, black 234deg, black 360deg);
+            mask-image: conic-gradient(from 270deg, black 0deg, black 105deg, transparent 170deg, transparent 180deg, black 234deg, black 360deg);
   }
 }
 @layer dialtone.components {
@@ -4572,10 +4623,6 @@
   .d-pagination__button {
     padding-inline: var(--dt-size-400);
   }
-  .d-pagination__button:disabled {
-    color: var(--dt-color-foreground-secondary-inverted);
-    background-color: var(--dt-color-neutral-transparent);
-  }
   .d-pagination__item {
     font-variant-numeric: tabular-nums;
   }
@@ -4663,6 +4710,80 @@
     visibility: hidden;
   }
 }
+@layer dialtone.components {
+  .d-progress-circle {
+    --progress-size: var(--dt-icon-size-500);
+    --progress-color: var(--dt-color-border-bold);
+    --progress-size-stroke: 3.25;
+    block-size: var(--progress-size);
+    inline-size: var(--progress-size);
+  }
+  .d-progress-circle--size-100 {
+    --progress-size: var(--dt-icon-size-100);
+  }
+  .d-progress-circle--size-200 {
+    --progress-size: var(--dt-icon-size-200);
+  }
+  .d-progress-circle--size-300 {
+    --progress-size: var(--dt-icon-size-300);
+  }
+  .d-progress-circle--size-400 {
+    --progress-size: var(--dt-icon-size-400);
+  }
+  .d-progress-circle--size-500 {
+    --progress-size: var(--dt-icon-size-500);
+  }
+  .d-progress-circle--size-600 {
+    --progress-size: var(--dt-icon-size-600);
+  }
+  .d-progress-circle--size-700 {
+    --progress-size: var(--dt-icon-size-700);
+  }
+  .d-progress-circle--size-800 {
+    --progress-size: var(--dt-icon-size-800);
+  }
+  .d-progress-circle--brand {
+    --progress-color: var(--dt-color-border-brand);
+  }
+  .d-progress-circle--critical {
+    --progress-color: var(--dt-color-border-critical);
+  }
+  .d-progress-circle--positive {
+    --progress-color: var(--dt-color-border-success);
+  }
+  .d-progress-circle--warning {
+    --progress-color: var(--dt-color-border-warning);
+  }
+  .d-progress-circle--ai {
+    --progress-color: var(--dt-color-border-bold);
+  }
+  .d-progress-circle--info {
+    --progress-color: var(--dt-color-blue-600);
+  }
+  .d-progress-circle__bar {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+  .d-progress-circle__shape--track {
+    transition: stroke-dasharray var(--td200) linear, stroke-dashoffset var(--td200) linear;
+    stroke: color-mix(in oklch, var(--progress-color) 25%, var(--dt-color-surface-primary));
+    stroke-dasharray: var(--track-dasharray);
+    stroke-dashoffset: var(--track-dashoffset);
+    stroke-linecap: round;
+  }
+  .d-progress-circle__shape--fill {
+    -webkit-transform: rotate(var(--fill-rotate));
+            transform: rotate(var(--fill-rotate));
+    -webkit-transform-origin: center;
+            transform-origin: center;
+    transition: stroke-dashoffset var(--td200) linear;
+    stroke: var(--progress-color);
+    stroke-dasharray: var(--stroke-dasharray);
+    stroke-dashoffset: var(--fill-dashoffset);
+    stroke-linecap: round;
+  }
+}
 @layer dialtone.components {
   .d-checkbox,
   .d-radio {
@@ -4721,6 +4842,7 @@
   .d-radio-group {
     display: inline-flex;
     gap: var(--dt-size-400);
+    vertical-align: top;
     cursor: pointer;
   }
   .d-checkbox-group--disabled,
@@ -4758,8 +4880,8 @@
   .d-radio__input {
     display: flex;
     align-self: flex-start;
-    -webkit-padding-before: var(--dt-size-300);
-            padding-block-start: var(--dt-size-300);
+    -webkit-padding-before: calc(var(--dt-size-300) + var(--dt-size-50));
+            padding-block-start: calc(var(--dt-size-300) + var(--dt-size-50));
   }
   .d-checkbox__copy,
   .d-radio__copy {
@@ -4772,10 +4894,17 @@
     flex: 1 auto;
     flex-direction: column;
     align-items: flex-start;
+    align-self: flex-end;
     color: var(--dt-color-foreground-primary);
-    font: var(--dt-typography-label-md-plain);
+    font: var(--dt-text-label-md);
+    font-weight: var(--dt-font-weight-normal);
     cursor: pointer;
   }
+  .d-checkbox__label.d-text-label--sm,
+  .d-radio__label.d-text-label--sm {
+    -webkit-margin-before: var(--dt-size-100);
+            margin-block-start: var(--dt-size-100);
+  }
   .d-checkbox__messages,
   .d-radio__messages {
     -webkit-margin-before: var(--dt-size-200-negative);
@@ -5194,7 +5323,7 @@
     display: none;
   }
   .d-select--xs .d-select__input {
-    --input-padding-y: calc(calc(var(--dt-size-400) - var(--dt-size-100)) - var(--input-border-width));
+    --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
     --input-border-radius: var(--dt-inputs-size-radius-xs);
     --input-typography: var(--dt-typography-inputs-xs);
@@ -5204,7 +5333,7 @@
     block-size: var(--dt-icon-size-100);
   }
   .d-select--sm .d-select__input {
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-sm);
     --input-border-radius: var(--dt-inputs-size-radius-sm);
@@ -5411,6 +5540,36 @@
   }
 }
 @layer dialtone.components {
+  .d-tab-neux {
+    inline-size: 100%;
+  }
+  .d-tab-neux [role="tabpanel"] {
+    box-shadow: none;
+  }
+  .d-tab-neux > .d-tablist {
+    --tablist-padding-bottom: var(--dt-size-400);
+    -webkit-padding-after: var(--tablist-padding-bottom);
+            padding-block-end: var(--tablist-padding-bottom);
+  }
+  .d-tab-neux > .d-tablist--xs {
+    --tablist-padding-bottom: var(--dt-size-350);
+  }
+  .d-tab-neux > .d-tablist--sm {
+    --tablist-padding-bottom: var(--dt-size-400);
+  }
+  .d-tab-neux > .d-tablist--md {
+    /* default */
+  }
+  .d-tab-neux > .d-tablist--lg {
+    --tablist-padding-bottom: var(--dt-size-400);
+  }
+  .d-tab-neux > .d-tablist--xl {
+    --tablist-padding-bottom: var(--dt-size-450);
+  }
+  .d-tab-neux .d-tablist--no-border {
+    -webkit-border-after: 0;
+            border-block-end: 0;
+  }
   .d-tablist {
     --tab-color-background: var(--dt-action-color-background-base-default);
     --tab-color-text: var(--dt-action-color-foreground-muted-default);
@@ -5422,7 +5581,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--dt-size-300);
-    align-items: baseline;
+    align-items: center;
   }
   .d-tablist:focus {
     outline: 0;
@@ -5506,6 +5665,42 @@
   .d-tablist--no-border .d-tablist--sm .d-tab:not(.d-tab--selected) {
     border-radius: var(--tab-border-radius);
   }
+  .d-tablist--lg .d-tab {
+    --tab-padding-x: calc(var(--dt-size-500) - var(--dt-size-border-100));
+    --tab-padding-y: calc((var(--dt-size-400) + var(--dt-size-200)) - var(--dt-size-border-100));
+    --tab-border-radius: var(--dt-button-size-radius-lg);
+    --tab-font-style: var(--dt-typography-button-lg);
+  }
+  .d-tablist--no-border .d-tablist--lg .d-tab:not(.d-tab--selected) {
+    border-radius: var(--tab-border-radius);
+  }
+  .d-tablist--xl .d-tab {
+    --tab-padding-x: calc(var(--dt-size-500) - var(--dt-size-border-100));
+    --tab-padding-y: calc(var(--dt-size-450) - var(--dt-size-border-100));
+    --tab-border-radius: var(--dt-button-size-radius-xl);
+    --tab-font-style: var(--dt-typography-button-xl);
+  }
+  .d-tablist--no-border .d-tablist--xl .d-tab:not(.d-tab--selected) {
+    border-radius: var(--tab-border-radius);
+  }
+  .d-tab__label {
+    transition: font-weight var(--ttf-out) var(--td50);
+  }
+  .d-btn--active .d-tab__label,
+  .d-btn--outlined .d-tab__label,
+  .d-tab--is-selected .d-tab__label {
+    font-weight: var(--dt-font-weight-bold) !important;
+  }
+  .d-tab__label[data-content]::after {
+    display: block;
+    font-weight: var(--dt-font-weight-bold);
+    white-space: nowrap;
+    text-align: center;
+    background-color: #666;
+    visibility: hidden;
+    content: attr(data-content);
+    block-size: 0;
+  }
   .d-tab--selected {
     --tab-color-text: var(--dt-action-color-foreground-base-default);
     z-index: var(--zi-selected);
@@ -5526,6 +5721,18 @@
   .d-tablist--no-border .d-tab--selected:hover::after {
     background-color: var(--tab-color-background);
   }
+  .d-tab--is-selected {
+    position: relative;
+    z-index: var(--zi-selected);
+  }
+  .d-tab--is-selected::after {
+    position: absolute;
+    background-color: var(--dt-action-color-foreground-base-default);
+    content: '';
+    block-size: var(--dt-size-200);
+    inset-block-start: calc(calc(100% + var(--tablist-padding-bottom)) - var(--dt-size-100));
+    inset-inline: 0;
+  }
   .d-tablist--inverted {
     --tab-color-text: var(--dt-action-color-foreground-inverted-default);
   }
@@ -5776,7 +5983,7 @@
   .d-toggle {
     --toggle-transition-timing-function: var(--ttf-out-quint);
     --toggle-transition-speed: var(--td300);
-    --toggle-color-background: oklch(from var(--dt-color-surface-bold) 0.738deg c h);
+    --toggle-color-background: oklch(from var(--dt-color-surface-bold) 0.738 c h);
     --toggle-size-height: var(--dt-size-550);
     --toggle-size-width: var(--dt-size-650);
     --toggle-size-icon: var(--dt-size-500);
@@ -6300,12 +6507,16 @@
   .d-recipe-attachment-carousel__arrow {
     position: absolute;
     inset-block-start: var(--dt-size-30-percent);
-    background-color: var(--dt-color-neutral-white);
+    color: var(--dt-color-foreground-tertiary-inverted);
+    background-color: var(--dt-color-surface-strong);
     border: var(--dt-size-100) solid;
-    border-color: var(--bc-default);
+    border-color: var(--dt-color-border-moderate-inverted);
     border-width: var(--dt-size-100);
     opacity: 0;
   }
+  .d-recipe-attachment-carousel__arrow:hover {
+    color: var(--dt-color-foreground-primary-inverted);
+  }
   .d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
     opacity: 1;
   }
@@ -6322,13 +6533,13 @@
     position: absolute;
     inset-block-start: inherit;
     inset-inline-end: inherit;
-    color: var(--dt-color-neutral-white);
-    background-color: var(--dt-color-black-400);
-    border: var(--dt-size-100) solid;
-    border-color: var(--dt-color-neutral-white);
-    border-width: var(--dt-size-200);
+    color: var(--dt-color-foreground-tertiary-inverted);
+    background-color: var(--dt-color-surface-strong);
     opacity: 0;
   }
+  .d-recipe-attachment-carousel__image-close-button:hover {
+    color: var(--dt-color-foreground-primary-inverted);
+  }
   .d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button,
   .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
     opacity: 1;
@@ -6353,31 +6564,9 @@
     inset-block-start: inherit;
     inset-inline-end: inherit;
     display: flex;
-    background-color: var(--dt-color-neutral-white);
-    border: var(--dt-size-100) solid;
-    border-color: var(--dt-color-border-subtle);
-    border-width: var(--dt-size-200);
-    border-radius: 50%;
-    -webkit-transform: rotate(-90deg);
-            transform: rotate(-90deg);
-  }
-  .d-recipe-attachment-carousel__progress-bar {
-    inline-size: var(--dt-size-550);
-    block-size: var(--dt-size-550);
-  }
-  .d-recipe-attachment-carousel__progress-bar-circle {
-    fill: none;
-    stroke-width: 2;
-    stroke-dasharray: var(--stroke-dasharray);
-  }
-  .d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
-    stroke: var(--dt-color-black-100);
-    stroke-dashoffset: 0;
-  }
-  .d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
-    transition: stroke-dashoffset 500ms linear;
-    stroke: var(--dt-color-purple-800);
-    stroke-dashoffset: var(--stroke-dashoffset);
+    padding: var(--dt-size-300);
+    background-color: var(--dt-color-surface-moderate);
+    border-radius: var(--dt-size-radius-circle);
   }
 }
 @layer dialtone.components {