@dialpad/dialtone 9.177.2 → 9.179.0

package/dist/css/dialtone-default-theme.css

@@ -1731,17 +1731,17 @@ template {
           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);
 }
@@ -1750,14 +1750,35 @@ template {
   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;
 }
+.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 */
   all: unset;
@@ -1829,13 +1850,13 @@ template {
   --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);
 }
@@ -1875,26 +1896,26 @@ template {
   --button-color-text: var(--dt-action-color-foreground-base-primary-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);
 }
 .d-btn--muted {
   --button-color-text: var(--dt-action-color-foreground-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);
 }
@@ -1905,13 +1926,13 @@ template {
   --button-color-text: var(--dt-action-color-foreground-critical-default);
   --button-color-background: var(--dt-action-color-background-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);
 }
@@ -1922,13 +1943,13 @@ template {
   --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);
 }
@@ -1936,13 +1957,13 @@ template {
   --button-color-text: var(--dt-action-color-foreground-positive-default);
   --button-color-background: var(--dt-action-color-background-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);
 }
@@ -1953,13 +1974,13 @@ template {
   --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);
 }
@@ -1967,13 +1988,13 @@ template {
   --button-color-text: var(--dt-action-color-foreground-inverted-default);
   --button-color-background: var(--dt-action-color-background-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);
 }
@@ -1984,13 +2005,13 @@ template {
   --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);
 }
@@ -2046,28 +2067,20 @@ template {
 .d-btn--loading > :where(.d-btn__loader) {
   position: absolute;
 }
-.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: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
   display: flex;
 }
-.d-btn--brand:hover:not([disabled]),
-.d-btn--brand:active:not([disabled]) {
+.d-btn--brand:hover:not(:disabled, .d-btn--disabled),
+.d-btn--brand:active:not(:disabled, .d-btn--disabled) {
   --button-color-text: hsl(var(--dt-color-neutral-white-hsl)  /  90%);
   --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
 }
 .d-btn--brand:focus-visible {
   box-shadow: 0 0 0 var(--dt-space-100) var(--dt-color-neutral-white), 0 0 0 0.25em hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
 }
-.d-btn--brand:active:not([disabled]) {
+.d-btn--brand:active:not(:disabled, .d-btn--disabled) {
   --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
 }
 .d-btn--brand .d-btn__icon {
@@ -2349,13 +2362,13 @@ template {
   padding: calc(var(--dt-space-200) + var(--dt-space-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);
 }
@@ -2363,20 +2376,36 @@ template {
   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;
 }
-.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);
 }
@@ -2415,12 +2444,12 @@ template {
   height: 2.8rem;
   content: '';
 }
-.d-chip__close:hover:not([disabled]) {
+.d-chip__close:hover:not(:disabled, .d-btn--disabled) {
   --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-background: var(--dt-action-color-background-muted-active);
 }
 .d-chip__icon {
@@ -4177,10 +4206,6 @@ legend .d-label--md {
   padding-right: var(--dt-space-400);
   padding-left: var(--dt-space-400);
 }
-.d-pagination__button:disabled {
-  color: var(--dt-color-foreground-secondary-inverted);
-  background-color: var(--dt-color-neutral-transparent);
-}
 .d-pagination__separator {
   align-self: flex-end;
 }
@@ -4534,6 +4559,81 @@ legend .d-label--md {
     --check-radio-color-background: var(--check-radio-color-background-disabled);
   }
 }
+.d-resizable {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+}
+.d-resizable--column {
+  -webkit-writing-mode: vertical-lr;
+      -ms-writing-mode: tb-lr;
+          writing-mode: vertical-lr;
+}
+.d-resizable-panel {
+  position: absolute;
+  inset-block: 0;
+  overflow: hidden;
+}
+.d-resizable-panel--collapsed {
+  pointer-events: none;
+}
+.d-resizable-panel__content {
+  display: flex;
+  flex: 1;
+  align-items: start;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  -webkit-writing-mode: horizontal-tb;
+      -ms-writing-mode: lr-tb;
+          writing-mode: horizontal-tb;
+}
+.d-resizable-handle {
+  --d-resizable-handle-color-surface: var(--dt-color-border-focus);
+  position: absolute;
+  z-index: calc(var(--zi-navigation-fixed) + var(--zi-base1));
+  background-color: transparent;
+  border-radius: var(--dt-size-radius-pill);
+  touch-action: none;
+  inset-block: var(--dt-size-200);
+  inline-size: var(--dt-size-300);
+}
+.d-resizable-handle::before {
+  position: absolute;
+  content: '';
+  inset: var(--dt-size-400-negative);
+}
+.d-resizable-handle--row {
+  cursor: ew-resize;
+}
+.d-resizable-handle--column {
+  cursor: ns-resize;
+}
+.d-resizable-handle--disabled {
+  background-color: transparent !important;
+  cursor: default;
+  opacity: var(--dt-opacity-500);
+  pointer-events: none;
+}
+.d-resizable-handle__indicator {
+  position: absolute;
+  background-color: transparent;
+  border-radius: var(--dt-size-radius-pill);
+  transition: background-color var(--td150) ease;
+  inset: 0;
+}
+.d-resizable-handle:hover:not(.d-resizable-handle--disabled) .d-resizable-handle__indicator,
+.d-resizable-handle--active .d-resizable-handle__indicator {
+  background-color: var(--d-resizable-handle-color-surface);
+}
+.d-resizable-handle:focus {
+  outline: none;
+}
+.d-resizable-handle:focus-visible {
+  background-color: var(--d-resizable-handle-color-surface);
+  box-shadow: none;
+}
 .d-rich-text-editor__code-block {
   padding: var(--dt-space-400);
   font: var(--dt-typography-code-md);
@@ -10154,10 +10254,10 @@ ul {
 .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary {
   --button-color-text: var(--dt-shell-mention-color-surface-primary);
 }
-.d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
+.d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
   --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, var(--dt-color-surface-primary) 100%);
 }
-.d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not([disabled]) {
+.d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled) {
   --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, var(--dt-color-surface-primary) 100%);
 }
 .d-recipe-leftbar-row .d-fc-success {