@dialpad/dialtone 9.172.0 → 9.174.0

package/README.md

@@ -117,13 +117,13 @@ import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue3/blank-space';
 
 ```js
 // Named import
-import { DtButton } from "@dialpad/dialtone/vue3"
+import { DtButton } from "@dialpad/dialtone/vue"
 
 // Default import (Preferred if using webpack as it is tree-shakeable by default)
-import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
+import { DtButton } from "@dialpad/dialtone/vue/lib/button"
 ```
 
-> **Note:** Dialtone Vue 2 has been deprecated. Please migrate to Dialtone Vue 3. The latest version of Dialtone that still supports Vue 2 is 9.154.0.
+> **Note:** Dialtone Vue 2 has been deprecated. Please migrate to Dialtone Vue. The latest version of Dialtone that still supports Vue 2 is 9.154.0.
 
 #### Dialtone MCP Server
 
@@ -186,7 +186,7 @@ they have the same package name e.g: `@dialpad/dialtone-vue`.
 
 - Dialtone CSS
 - Dialtone Tokens
-- Dialtone Vue 3
+- Dialtone Vue
 
 ### Tree-shaking
 
@@ -218,7 +218,7 @@ Packages expose ESM for bundlers to statically analyze and tree-shake, with CJS
 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/*` map to individual component imports.
+- `@dialpad/dialtone` exposes `./vue/lib/*` map to individual component imports.
 - `@dialpad/dialtone-vue` exposes `./lib/*` for individual component imports.
 - `@dialpad/dialtone-icons` exposes `./vue3/*` for individual icon/illustration imports.
 
@@ -231,7 +231,7 @@ pulling entire bundles):
 | [Dialtone emojis](packages/dialtone-emojis/README.md)            | Emoji assets                                                                                                                                       | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-emojis?logo=npm&color=7C52FF)           |
 | [Dialtone icons](packages/dialtone-icons/README.md)              | Resources needed to implement icons on your application that conform to Dialpad’s design principles and best practices                             | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-icons?logo=npm&color=7C52FF)            |
 | [Dialtone tokens](packages/dialtone-tokens/README.md)            | Design tokens for Dialpad's design system Dialtone and everything related to building and publishing them                                          | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-tokens?logo=npm&color=7C52FF)           |
-| [Dialtone vue](packages/dialtone-vue/README.md)               | Vue components library to simplify and standardize the use of common UI patterns and behaviour across all Dialpad projects (compatible with Vue 3) | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-vue?logo=npm&color=7C52FF)         |
+| [Dialtone Vue](packages/dialtone-vue/README.md)                  | Vue components library to simplify and standardize the use of common UI patterns and behaviour across all Dialpad projects                         | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-vue?logo=npm&color=7C52FF)              |
 | [ESlint plugin](packages/eslint-plugin-dialtone/README.md)       | ESLint plugin containing rules to help developers maintain dialtone recommended practices                                                          | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Feslint-plugin-dialtone?logo=npm&color=7C52FF)    |
 | [Stylelint plugin](packages/stylelint-plugin-dialtone/README.md) | StyleLint plugin containing rules to help developers maintain dialtone recommended practices for CSS                                               | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fstylelint-plugin-dialtone?logo=npm&color=7C52FF) |
 
@@ -349,13 +349,13 @@ This will start the documentation site and watch the library for changes, it wil
 
 Access the local server at `http://localhost:4000`
 
-##### Dialtone Vue 3 storybook
+##### Dialtone Vue storybook
 
 ```bash
 nx run dialtone-vue:start
 ```
 
-Access the local storybook server for Dialtone Vue 3 via `http://localhost:9011/`
+Access the local storybook server for Dialtone Vue via `http://localhost:9011/`
 
 #### Common Commands
 

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

@@ -3556,14 +3556,20 @@ legend .d-label--md {
   margin-top: var(--dt-space-200);
 }
 .d-loader {
-  display: inline-flex;
+  display: inline-grid;
 }
 .d-loader__icon {
+  grid-area: 1 / 1;
+  opacity: var(--dt-opacity-1000);
   -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);
 }
+.d-loader__icon-track {
+  grid-area: 1 / 1;
+  opacity: var(--dt-opacity-200);
+}
 .d-modal {
   --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
   --modal-dialog-padding: var(--dt-space-600);
@@ -4566,13 +4572,6 @@ legend .d-label--md {
   padding-left: var(--dt-space-400);
   border-left: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
 }
-.d-rich-text-editor > .ProseMirror table {
-  border-collapse: collapse;
-}
-.d-rich-text-editor > .ProseMirror td {
-  padding-left: var(--dt-space-200);
-  border: var(--dt-size-border-100) solid var(--dt-color-foreground-primary);
-}
 .d-rich-text-editor-bubble-menu__button-stack {
   padding: var(--dt-space-300);
 }
@@ -10429,6 +10428,7 @@ ul {
   margin-bottom: auto;
 }
 .d-recipe-message-input__button {
+  flex-shrink: 0;
   max-width: 2.8rem;
   max-height: 2.8rem;
   border-radius: var(--dt-size-radius-300);
@@ -10445,6 +10445,7 @@ ul {
 }
 .d-recipe-message-input__bottom-section {
   display: flex;
+  flex-wrap: nowrap;
   justify-content: space-between;
   padding: var(--dt-space-300) var(--dt-space-400) var(--dt-space-400);
 }
@@ -10452,6 +10453,11 @@ ul {
 .d-recipe-message-input__bottom-section-right {
   display: flex;
 }
+.d-recipe-message-input__bottom-section-left,
+.d-recipe-message-input__bottom-section-left-stack {
+  flex: 1 1 auto;
+  min-width: var(--dt-size-0);
+}
 .d-recipe-message-input__image-input {
   position: absolute;
 }