@dialpad/dialtone 9.146.0 → 9.147.0

package/README.md

@@ -156,6 +156,11 @@ import { DtButton } from "@dialpad/dialtone/vue3"
 import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
 ```
 
+#### Dialtine MCP Server
+
+Install the MCP server to use it in your local environment and develop efficiently with Dialtone.
+Follow the instructions in the [MCP Server](https://github.com/dialpad/dialtone/tree/staging/packages/dialtone-mcp-server) folder.
+
 ## About this repo
 
 The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.
@@ -193,21 +198,21 @@ the library.
 
 #### How does our bundling works
 
-To achieve this we needed to create certain configs through the monorepo to be able to handle them even if 
+To achieve this we needed to create certain configs through the monorepo to be able to handle them even if
 they have the same package name e.g: `@dialpad/dialtone-vue`.
 
 1. In root [package.json](package.json):
-   - `pnpm`: 
-     - `peerDependencyRules` include `vue": "^2.6 || ^3.2"` to make sure we don't have warnings related to vue version 
+   - `pnpm`:
+     - `peerDependencyRules` include `vue": "^2.6 || ^3.2"` to make sure we don't have warnings related to vue version
        mismatch.
      - `packageExtensions` tells pnpm which Vue version to use for each package.
-   - `dependencies` doesn't include any specific Vue 2 or Vue 3 dependencies as this causes issues on the client when 
+   - `dependencies` doesn't include any specific Vue 2 or Vue 3 dependencies as this causes issues on the client when
      trying to use exports from `./vue2` or `./vue3`.
 2. On individual packages `package.json` files:
    - Include the specific dependencies in case someone uses the individual package
-   - In `vite.config.js`[Vue 2](packages/dialtone-vue2/vite.config.js), 
-     [Vue 3](packages/dialtone-vue3/vite.config.js) add dependencies to external to make sure they don't cause 
-     issues on product. (This is more specific for the Vue 2 package, as product is depending on Vue 2.6 and any 
+   - In `vite.config.js`[Vue 2](packages/dialtone-vue2/vite.config.js),
+     [Vue 3](packages/dialtone-vue3/vite.config.js) add dependencies to external to make sure they don't cause
+     issues on product. (This is more specific for the Vue 2 package, as product is depending on Vue 2.6 and any
      dependency that needs a newer Vue version will cause issues).
 3. In [project.json](project.json)
    - Include implicit dependencies to make sure NX builds them before trying to copy the files to the mono-package.
@@ -215,6 +220,7 @@ they have the same package name e.g: `@dialpad/dialtone-vue`.
    - Copy the built files into the root `dist` folder.
 
 #### Included packages
+
 - Dialtone CSS
 - Dialtone Tokens
 - Dialtone Vue 2
@@ -222,7 +228,7 @@ they have the same package name e.g: `@dialpad/dialtone-vue`.
 
 ### Tree-shaking
 
-Tree-shaking is a feature that allows you to remove unused code from your bundle, and it is enabled by default in our 
+Tree-shaking is a feature that allows you to remove unused code from your bundle, and it is enabled by default in our
 build process for Dialtone, Dialtone Vue, Dialtone Combinator and Dialtone Icons.
 
 We achieve tree-shaking primarily via three mechanisms across the packages:
@@ -240,14 +246,15 @@ We achieve tree-shaking primarily via three mechanisms across the packages:
 #### Publishing ESM builds (with dual ESM/CJS via exports map)
 
 Packages expose ESM for bundlers to statically analyze and tree-shake, with CJS fallbacks.
-- `@dialpad/dialtone-vue` (vue3): 
+
+- `@dialpad/dialtone-vue` (vue3):
   - `"type"`: `"module"`,
   - `"module"`: `"./dist/dialtone-vue.js"`,
   - `"main"`: `"./dist/dialtone-vue.cjs"`,
 
 #### Deep, per-module entry points to enable fine-grained import paths
 
-Exports maps expose subpath entries so consumers can import only what they need (which aids tree-shaking and avoids 
+Exports maps expose subpath entries so consumers can import only what they need (which aids tree-shaking and avoids
 pulling entire bundles):
 
 - `@dialpad/dialtone` exposes `./vue3/lib/*` and `./vue2/lib/*` map to individual component imports.

package/dist/css/dialtone-default-theme.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);