@dialpad/dialtone 9.148.0 → 9.149.1

package/README.md

@@ -35,7 +35,7 @@ If you don't care about theming and just want to use Dialtone with the default l
 @import "@dialpad/dialtone/css-default-theme";
 ```
 
-- Javascript
+- JavaScript
 
 ```js
 import "@dialpad/dialtone/css-default-theme";
@@ -51,13 +51,13 @@ If you want to use theming, import from the below path. This file does not inclu
 @import "@dialpad/dialtone/css";
 ```
 
-- Javascript
+- JavaScript
 
 ```js
 import "@dialpad/dialtone/css";
 ```
 
-##### Set theme via setTheme() javascript function (preferred)
+##### Set theme via setTheme() JavaScript function (preferred)
 
 Import the theme you want to use and set it via the `setTheme` function:
 
@@ -78,7 +78,7 @@ Possible themes are as follows:
 - ExpressiveSmLight - Marketing Small Light
 - ExpressiveSmDark - Marketing Small Dark
 
-There is an optional second parameter to `setTheme` that allows you to set the theme on a specific element. This is useful in the case of a Shadow DOM
+There is an optional second parameter to `setTheme` that allows you to set the theme on a specific element. This is useful in the case of a shadow DOM
 when you want to apply the theme to the root element of the shadow DOM rather than the document root. If you do not set this parameter the theme will be applied to the document root.
 
 ```js
@@ -89,7 +89,7 @@ setTheme(DpLight, document.querySelector('#my-shadow-root-host'));
 
 ##### Set theme manually by importing files
 
-You may want to use this method if you are unable to use javascript.
+You may want to use this method if you are unable to use JavaScript.
 
 You need to import two tokens files in order to apply a theme. A base tokens files, which is either light or dark, and
 a semantic brand tokens file which is named after a brand and theme 'tokens-dp-light', 'tokens-dp-dark', 'tokens-tmo-light', ...
@@ -101,7 +101,7 @@ a semantic brand tokens file which is named after a brand and theme 'tokens-dp-l
 @import "@dialpad/dialtone/tokens/tokens-dp-light.css" // Dialpad light brand
 ```
 
-- Javascript
+- JavaScript
 
 ```js
 import "@dialpad/dialtone/tokens/tokens-base-light.css" // Base light theme
@@ -117,7 +117,7 @@ import "@dialpad/dialtone/tokens/tokens-dp-light.css" // Dialpad light brand
 import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue2';
 import { DtIllustrationBlankSpace } from '@dialpad/dialtone-icons/vue2';
 
-// Default import (Prefered if using webpack as it is tree-shakeable by default)
+// Default import (Preferred if using webpack as it is tree-shakeable by default)
 import DtIconArrowUp from '@dialpad/dialtone-icons/vue2/arrow-up';
 import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue2/blank-space';
 ```
@@ -129,7 +129,7 @@ import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue2/blank-space';
 import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue3';
 import { DtIllustrationBlankSpace } from '@dialpad/dialtone-icons/vue3';
 
-// Default import (Prefered if using webpack as it is tree-shakeable by default)
+// Default import (Preferred if using webpack as it is tree-shakeable by default)
 import DtIconArrowUp from '@dialpad/dialtone-icons/vue3/arrow-up';
 import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue3/blank-space';
 ```
@@ -152,7 +152,7 @@ import { DtButton } from "@dialpad/dialtone/vue2/lib/button"
 // Named import
 import { DtButton } from "@dialpad/dialtone/vue3"
 
-// Default import (Prefered if using webpack as it is tree-shakeable by default)
+// Default import (Preferred if using webpack as it is tree-shakeable by default)
 import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
 ```
 
@@ -196,7 +196,7 @@ dialtone/
 Dialtone is a mono-package that includes many packages within it to ease the maintenance of versions of
 the library.
 
-#### How does our bundling works
+#### How our bundling works
 
 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`.
@@ -342,9 +342,9 @@ if they need to run before a specific command.
 - Improve the speed of the command execution by saving its output to cache.
 - Run the command on the [affected](https://nx.dev/nx-api/nx/documents/affected) projects only.
 
-⚠️ You can run the commands with PNPM too, but it's not advisable as You'll lose the advantages that NX provides.
+⚠️ You can run the commands with PNPM too, but it's not advisable as you'll lose the advantages that NX provides.
 
-For more information, check [setup a monorepo with PNPM workspaces and NX](https://blog.nrwl.io/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx-bc5d97258a7e#d69f)
+For more information, check [setup a monorepo with PNPM workspaces and NX](https://nx.dev/blog/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx)
 
 ##### Installation
 

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

@@ -650,24 +650,58 @@ template {
 .d-stack {
   --stack-gap: 0;
   --stack-direction: column;
+  --stack-align: initial;
+  --stack-justify: initial;
   display: flex;
   flex-direction: var(--stack-direction);
   gap: var(--stack-gap);
-  justify-content: flex-start;
+  align-items: var(--stack-align);
+  justify-content: var(--stack-justify);
 }
 .d-stack--column-reverse {
   --stack-direction: column-reverse;
-  justify-content: flex-start;
+  --stack-align: initial;
 }
 .d-stack--row {
   --stack-direction: row;
-  align-items: center;
-  justify-content: normal;
+  --stack-align: center;
 }
 .d-stack--row-reverse {
   --stack-direction: row-reverse;
-  align-items: center;
-  justify-content: normal;
+  --stack-align: center;
+}
+.d-stack--align-start {
+  --stack-align: start;
+}
+.d-stack--align-center {
+  --stack-align: center;
+}
+.d-stack--align-end {
+  --stack-align: end;
+}
+.d-stack--align-stretch {
+  --stack-align: stretch;
+}
+.d-stack--align-baseline {
+  --stack-align: baseline;
+}
+.d-stack--justify-start {
+  --stack-justify: start;
+}
+.d-stack--justify-center {
+  --stack-justify: center;
+}
+.d-stack--justify-end {
+  --stack-justify: end;
+}
+.d-stack--justify-around {
+  --stack-justify: space-around;
+}
+.d-stack--justify-between {
+  --stack-justify: space-between;
+}
+.d-stack--justify-evenly {
+  --stack-justify: space-evenly;
 }
 .d-stack--gap-50 {
   --stack-gap: var(--dt-space-50);
@@ -714,21 +748,19 @@ template {
 @media screen and (min-width: 480px) {
   .d-stack--sm-column {
     --stack-direction: column;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--sm-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--sm-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--sm-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--sm-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -772,25 +804,56 @@ template {
   .d-stack--sm-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--sm-align-start {
+    align-items: start;
+  }
+  .d-stack--sm-align-center {
+    align-items: center;
+  }
+  .d-stack--sm-align-end {
+    align-items: end;
+  }
+  .d-stack--sm-align-stretch {
+    align-items: stretch;
+  }
+  .d-stack--sm-align-baseline {
+    align-items: baseline;
+  }
+  .d-stack--sm-justify-start {
+    justify-content: start;
+  }
+  .d-stack--sm-justify-center {
+    justify-content: center;
+  }
+  .d-stack--sm-justify-end {
+    justify-content: end;
+  }
+  .d-stack--sm-justify-around {
+    justify-content: space-around;
+  }
+  .d-stack--sm-justify-between {
+    justify-content: space-between;
+  }
+  .d-stack--sm-justify-evenly {
+    justify-content: space-evenly;
+  }
 }
 @media screen and (min-width: 640px) {
   .d-stack--md-column {
     --stack-direction: column;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--md-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--md-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--md-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--md-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -834,25 +897,56 @@ template {
   .d-stack--md-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--md-align-start {
+    align-items: start;
+  }
+  .d-stack--md-align-center {
+    align-items: center;
+  }
+  .d-stack--md-align-end {
+    align-items: end;
+  }
+  .d-stack--md-align-stretch {
+    align-items: stretch;
+  }
+  .d-stack--md-align-baseline {
+    align-items: baseline;
+  }
+  .d-stack--md-justify-start {
+    justify-content: start;
+  }
+  .d-stack--md-justify-center {
+    justify-content: center;
+  }
+  .d-stack--md-justify-end {
+    justify-content: end;
+  }
+  .d-stack--md-justify-around {
+    justify-content: space-around;
+  }
+  .d-stack--md-justify-between {
+    justify-content: space-between;
+  }
+  .d-stack--md-justify-evenly {
+    justify-content: space-evenly;
+  }
 }
 @media screen and (min-width: 980px) {
   .d-stack--lg-column {
     --stack-direction: column;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--lg-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--lg-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--lg-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--lg-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -896,25 +990,56 @@ template {
   .d-stack--lg-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--lg-align-start {
+    align-items: start;
+  }
+  .d-stack--lg-align-center {
+    align-items: center;
+  }
+  .d-stack--lg-align-end {
+    align-items: end;
+  }
+  .d-stack--lg-align-stretch {
+    align-items: stretch;
+  }
+  .d-stack--lg-align-baseline {
+    align-items: baseline;
+  }
+  .d-stack--lg-justify-start {
+    justify-content: start;
+  }
+  .d-stack--lg-justify-center {
+    justify-content: center;
+  }
+  .d-stack--lg-justify-end {
+    justify-content: end;
+  }
+  .d-stack--lg-justify-around {
+    justify-content: space-around;
+  }
+  .d-stack--lg-justify-between {
+    justify-content: space-between;
+  }
+  .d-stack--lg-justify-evenly {
+    justify-content: space-evenly;
+  }
 }
 @media screen and (min-width: 1264px) {
   .d-stack--xl-column {
     --stack-direction: column;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--xl-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
+    --stack-align: initial;
   }
   .d-stack--xl-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--xl-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
+    --stack-align: center;
   }
   .d-stack--xl-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -958,6 +1083,39 @@ template {
   .d-stack--xl-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--xl-align-start {
+    align-items: start;
+  }
+  .d-stack--xl-align-center {
+    align-items: center;
+  }
+  .d-stack--xl-align-end {
+    align-items: end;
+  }
+  .d-stack--xl-align-stretch {
+    align-items: stretch;
+  }
+  .d-stack--xl-align-baseline {
+    align-items: baseline;
+  }
+  .d-stack--xl-justify-start {
+    justify-content: start;
+  }
+  .d-stack--xl-justify-center {
+    justify-content: center;
+  }
+  .d-stack--xl-justify-end {
+    justify-content: end;
+  }
+  .d-stack--xl-justify-around {
+    justify-content: space-around;
+  }
+  .d-stack--xl-justify-between {
+    justify-content: space-between;
+  }
+  .d-stack--xl-justify-evenly {
+    justify-content: space-evenly;
+  }
 }
 .d-item-layout {
   display: flex;