@dialpad/dialtone 9.146.0 → 9.147.0

package/dist/css/dialtone.css

@@ -1895,11 +1895,11 @@ template {
 }
 .d-btn--brand:hover:not([disabled]),
 .d-btn--brand:active:not([disabled]) {
-  --button-color-text: hsla(var(--dt-color-neutral-white-hsl)  /  90%);
+  --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 hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l)  /  90%);
+  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]) {
   --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
@@ -2514,7 +2514,6 @@ fieldset {
   margin-bottom: var(--dt-space-300);
   color: var(--dt-color-foreground-secondary);
   font: var(--dt-typography-label-md);
-  word-break: break-word;
   overflow-wrap: break-word;
 }
 legend .d-label,
@@ -2614,7 +2613,7 @@ legend .d-label--md {
 }
 .d-image-viewer__close-button {
   --fco: 100%;
-  color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
+  color: hsl(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
 }
 .d-input,
 .d-input--md,
@@ -3128,7 +3127,6 @@ legend .d-label--md {
   height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  clip: rect(0 0 0 0);
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
 }
@@ -3285,7 +3283,7 @@ legend .d-label--md {
 }
 .d-list-group--link:hover {
   color: var(--dt-color-foreground-primary);
-  background-color: hsla(var(--dt-color-purple-400-hsl)  /  85%);
+  background-color: hsl(var(--dt-color-purple-400-hsl)  /  85%);
 }
 .d-list-group--link-selected {
   color: var(--dt-color-neutral-white);
@@ -3816,7 +3814,7 @@ legend .d-label--md {
   --toast-color-background: var(--dt-color-surface-secondary);
 }
 .d-toast-alternate {
-  --toast-alternate-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
+  --toast-alternate-color-shadow: hsl(var(--dt-color-black-900-hsl) / 0.15);
   --toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
   --toast-alternate-color-background: var(--dt-color-surface-primary);
   --toast-alternate-color-text: var(--dt-color-foreground-primary);
@@ -3959,7 +3957,7 @@ legend .d-label--md {
 .d-pagination {
   display: flex;
   flex-direction: row;
-  grid-gap: var(--dt-space-300);
+  gap: var(--dt-space-300);
   align-items: center;
 }
 .d-pagination__button {
@@ -4132,7 +4130,6 @@ legend .d-label--md {
   font-size: var(--dt-font-size-200);
   font-family: inherit;
   line-height: var(--dt-font-line-height-300);
-  word-break: break-word;
   overflow-wrap: break-word;
 }
 .d-checkbox__input,
@@ -4328,11 +4325,11 @@ legend .d-label--md {
   margin-left: var(--dt-space-200);
 }
 .d-mention-suggestion__status {
+  margin-left: var(--dt-space-100);
   overflow: hidden;
+  color: var(--dt-color-foreground-tertiary);
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--dt-color-foreground-tertiary);
-  margin-left: var(--dt-space-100);
 }
 .d-mention-suggestion__divider {
   color: var(--dt-color-foreground-tertiary);
@@ -4750,7 +4747,7 @@ legend .d-label--md {
   background-color: var(--dt-color-surface-secondary-opaque);
 }
 .d-table--striped.d-table--inverted tr:nth-child(even) {
-  background-color: hsla(var(--bgc-primary-hsl) / 0.1);
+  background-color: hsl(var(--bgc-primary-hsl) / 0.1);
 }
 .d-tablist {
   --tab-color-background: var(--dt-action-color-background-base-default);
@@ -6599,9 +6596,7 @@ legend .d-label--md {
   flex: none !important;
 }
 .d-fl-equal {
-  flex-basis: 0 !important;
-  flex-grow: 1 !important;
-  flex-shrink: 1 !important;
+  flex: 1 1 0 !important;
 }
 .d-fl-grow0 {
   flex-grow: 0 !important;
@@ -6741,13 +6736,15 @@ legend .d-label--md {
   grid-column: unset !important;
 }
 .d-gcg-unset {
-  grid-column-gap: unset !important;
+  -webkit-column-gap: unset !important;
+     -moz-column-gap: unset !important;
+          column-gap: unset !important;
 }
 .d-grg-unset {
-  grid-row-gap: unset !important;
+  row-gap: unset !important;
 }
 .d-gg-unset {
-  grid-gap: unset !important;
+  gap: unset !important;
 }
 .d-ji-center {
   justify-items: center !important;
@@ -6844,11 +6841,11 @@ legend .d-label--md {
   grid-template-columns: [sidebar-start] var(--sidebar-width) [sidebar-end content-start] var(--content-width) [content-end];
 }
 .d-gl-header {
-  grid-template-areas: 'header' 'content';
-  grid-template-rows: [header-start] var(--header-height) [header-end content-start] var(--content-height) [content-end];
   grid-auto-rows: 1fr;
   grid-auto-columns: minmax(-webkit-min-content, auto);
   grid-auto-columns: minmax(min-content, auto);
+  grid-template-areas: 'header' 'content';
+  grid-template-rows: [header-start] var(--header-height) [header-end content-start] var(--content-height) [content-end];
 }
 .d-ga-sidebar {
   grid-area: sidebar !important;
@@ -7441,9 +7438,8 @@ legend .d-label--md {
   margin: var(--dt-space-100-negative);
   padding: var(--dt-space-0);
   overflow: hidden;
-  word-wrap: normal;
+  overflow-wrap: normal;
   border: none;
-  clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
 }
@@ -8466,7 +8462,6 @@ ul {
 .d-lc-unset {
   display: initial !important;
   overflow: initial !important;
-  -webkit-box-orient: initial !important;
   -webkit-line-clamp: initial !important;
 }
 .d-ow-normal {
@@ -8554,7 +8549,7 @@ ul {
   word-break: break-all !important;
 }
 .d-wb-break-word {
-  word-break: break-word !important;
+  overflow-wrap: break-word !important;
 }
 .d-wb-keep-all {
   word-break: keep-all !important;
@@ -8563,19 +8558,19 @@ ul {
   word-break: unset !important;
 }
 .d-ww-normal {
-  word-wrap: normal !important;
+  overflow-wrap: normal !important;
 }
 .d-ww-break-word {
-  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
 }
 .d-ww-anywhere {
-  word-wrap: anywhere !important;
+  overflow-wrap: anywhere !important;
 }
 .d-ww-initial {
-  word-wrap: initial !important;
+  overflow-wrap: initial !important;
 }
 .d-ww-inherit {
-  word-wrap: inherit !important;
+  overflow-wrap: inherit !important;
 }
 .d-truncate {
   overflow: hidden !important;
@@ -9956,6 +9951,254 @@ ul {
   border: var(--dt-space-100) solid;
   border-color: var(--dt-color-border-default);
 }
+@property --dt-recipe-motion-text-mask-pos {
+  inherits: true;
+  initial-value: 0%;
+  syntax: '<percentage>';
+}
+.dt-recipe-motion-text {
+  /* Theme variables - can be overridden by design system */
+  --dt-recipe-motion-text-duration: 1000ms;
+  --dt-recipe-motion-text-char-duration: var(--dt-recipe-motion-text-duration);
+  --dt-recipe-motion-text-word-duration: calc(var(--dt-recipe-motion-text-duration) * 2);
+  --dt-recipe-motion-text-highlight-color: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 80%, var(--dt-color-brand-gold) 100%);
+  --dt-recipe-motion-text-gradient: linear-gradient(90deg, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%) 0% 0% / 500% 100%;
+  --dt-recipe-motion-text-shimmer-gradient: linear-gradient(90deg, black 0%, black 20%, #0005 40%, #0005 60%, black 80%, black 100%) 0% 0% / 500% 100%;
+  position: relative;
+}
+.dt-recipe-motion-text__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+}
+.dt-recipe-motion-text__content {
+  display: contents;
+}
+.dt-recipe-motion-text__fallback {
+  display: contents;
+}
+.dt-recipe-motion-text__char {
+  display: inline-block;
+  white-space: pre;
+}
+.dt-recipe-motion-text__word {
+  position: relative;
+  display: inline;
+  white-space: nowrap;
+}
+@-webkit-keyframes dt-recipe-motion-text-gradient-in-char-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dt-recipe-motion-text-gradient-in-char-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes dt-recipe-motion-text-gradient-in-word-reveal {
+  from {
+    --dt-recipe-motion-text-mask-pos: 100%;
+  }
+  to {
+    --dt-recipe-motion-text-mask-pos: 0%;
+  }
+}
+@keyframes dt-recipe-motion-text-gradient-in-word-reveal {
+  from {
+    --dt-recipe-motion-text-mask-pos: 100%;
+  }
+  to {
+    --dt-recipe-motion-text-mask-pos: 0%;
+  }
+}
+@-webkit-keyframes dt-recipe-motion-text-fade-in-char-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dt-recipe-motion-text-fade-in-char-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes dt-recipe-motion-text-fade-in-word-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dt-recipe-motion-text-fade-in-word-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes dt-recipe-motion-text-slide-in-char-appear {
+  from {
+    -webkit-transform: translateY(0.3em);
+            transform: translateY(0.3em);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes dt-recipe-motion-text-slide-in-char-appear {
+  from {
+    -webkit-transform: translateY(0.3em);
+            transform: translateY(0.3em);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes dt-recipe-motion-text-slide-in-word-appear {
+  from {
+    -webkit-transform: translateY(0.5em);
+            transform: translateY(0.5em);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes dt-recipe-motion-text-slide-in-word-appear {
+  from {
+    -webkit-transform: translateY(0.5em);
+            transform: translateY(0.5em);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+.dt-recipe-motion-text-char-gradient-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-gradient-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-in-out);
+          animation: dt-recipe-motion-text-gradient-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-in-out);
+}
+.dt-recipe-motion-text-char-gradient-in-leave-active {
+  animation: dt-recipe-motion-text-gradient-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text-word-gradient-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-out-quint);
+          animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-out-quint);
+}
+.dt-recipe-motion-text-word-gradient-in-leave-active {
+  animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text-char-fade-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-fade-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+          animation: dt-recipe-motion-text-fade-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+}
+.dt-recipe-motion-text-char-fade-in-leave-active {
+  animation: dt-recipe-motion-text-fade-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text-word-fade-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-fade-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+          animation: dt-recipe-motion-text-fade-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+}
+.dt-recipe-motion-text-word-fade-in-leave-active {
+  animation: dt-recipe-motion-text-fade-in-word-appear calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text-char-slide-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-slide-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+          animation: dt-recipe-motion-text-slide-in-char-appear var(--dt-recipe-motion-text-char-duration) var(--ttf-out-quint);
+}
+.dt-recipe-motion-text-char-slide-in-leave-active {
+  animation: dt-recipe-motion-text-slide-in-char-appear calc(var(--dt-recipe-motion-text-char-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text-word-slide-in-enter-active {
+  -webkit-animation: dt-recipe-motion-text-slide-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+          animation: dt-recipe-motion-text-slide-in-word-appear var(--dt-recipe-motion-text-word-duration) var(--ttf-out-quint);
+}
+.dt-recipe-motion-text-word-slide-in-leave-active {
+  animation: dt-recipe-motion-text-slide-in-word-appear calc(var(--dt-recipe-motion-text-word-duration) * 0.5) var(--ttf-out-quint) reverse;
+}
+.dt-recipe-motion-text--gradient-sweep,
+.dt-recipe-motion-text--shimmer {
+  position: relative;
+  display: inline-block;
+  -webkit-animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-in-out) 1;
+          animation: dt-recipe-motion-text-gradient-in-word-reveal calc(var(--dt-recipe-motion-text-word-duration) * 1.5) var(--ttf-in-out) 1;
+}
+.dt-recipe-motion-text--gradient-in .dt-recipe-motion-text__word::before,
+.dt-recipe-motion-text--gradient-sweep::before {
+  position: absolute;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  background: var(--dt-recipe-motion-text-highlight-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  content: attr(data-text-content);
+  pointer-events: none;
+  -webkit-text-fill-color: transparent;
+  -webkit-mask: var(--dt-recipe-motion-text-gradient);
+          mask: var(--dt-recipe-motion-text-gradient);
+  -webkit-mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+          mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+}
+.dt-recipe-motion-text--shimmer {
+  content: attr(data-text-content);
+  -webkit-mask: var(--dt-recipe-motion-text-shimmer-gradient);
+          mask: var(--dt-recipe-motion-text-shimmer-gradient);
+  -webkit-mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+          mask-position: var(--dt-recipe-motion-text-mask-pos) 0%;
+}
+.dt-recipe-motion-text--none .dt-recipe-motion-text__word,
+.dt-recipe-motion-text--none .dt-recipe-motion-text__char {
+  -webkit-transform: none;
+          transform: none;
+  opacity: 1;
+}
+.dt-recipe-motion-text--paused {
+  -webkit-animation-play-state: paused !important;
+          animation-play-state: paused !important;
+}
+.dt-recipe-motion-text--looped {
+  -webkit-animation-iteration-count: infinite !important;
+          animation-iteration-count: infinite !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dt-recipe-motion-text {
+    --dt-recipe-motion-text-duration: 0ms;
+    --dt-recipe-motion-text-char-duration: 0ms;
+    --dt-recipe-motion-text-word-duration: 0ms;
+    transition-duration: 0ms !important;
+    -webkit-animation-duration: 0ms !important;
+            animation-duration: 0ms !important;
+  }
+}
 .d-recipe-settings-menu-button {
   width: var(--dt-size-550);
   height: var(--dt-size-600);
@@ -9974,13 +10217,13 @@ ul {
 .d-recipe-settings-menu-button-update {
   height: var(--dt-size-600);
   color: var(--dt-color-blue-500);
-  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
-  border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
+  background-color: hsl(var(--dt-color-blue-200-hsl) / 0.25);
+  border-color: hsl(var(--dt-color-blue-200-hsl) / 0.25);
   border-radius: var(--dt-size-radius-pill);
 }
 .d-recipe-settings-menu-button-update:hover {
   color: var(--dt-shell-action-color-foreground-primary-hover);
-  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
+  background-color: hsl(var(--dt-color-blue-200-hsl) / 0.5);
 }
 .d-recipe-time-pill {
   padding: var(--dt-space-300) var(--dt-space-500);