@dialpad/dialtone 9.147.0 → 9.149.0

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

@@ -653,21 +653,51 @@ template {
   display: flex;
   flex-direction: var(--stack-direction);
   gap: var(--stack-gap);
-  justify-content: flex-start;
 }
 .d-stack--column-reverse {
   --stack-direction: column-reverse;
-  justify-content: flex-start;
 }
 .d-stack--row {
   --stack-direction: row;
-  align-items: center;
-  justify-content: normal;
 }
 .d-stack--row-reverse {
   --stack-direction: row-reverse;
+}
+.d-stack--align-normal {
+  align-items: normal;
+}
+.d-stack--align-start {
+  align-items: start;
+}
+.d-stack--align-center {
   align-items: center;
-  justify-content: normal;
+}
+.d-stack--align-end {
+  align-items: end;
+}
+.d-stack--align-stretch {
+  align-items: stretch;
+}
+.d-stack--align-baseline {
+  align-items: baseline;
+}
+.d-stack--justify-start {
+  justify-content: start;
+}
+.d-stack--justify-center {
+  justify-content: center;
+}
+.d-stack--justify-end {
+  justify-content: end;
+}
+.d-stack--justify-around {
+  justify-content: space-around;
+}
+.d-stack--justify-between {
+  justify-content: space-between;
+}
+.d-stack--justify-evenly {
+  justify-content: space-evenly;
 }
 .d-stack--gap-50 {
   --stack-gap: var(--dt-space-50);
@@ -714,21 +744,15 @@ template {
 @media screen and (min-width: 480px) {
   .d-stack--sm-column {
     --stack-direction: column;
-    justify-content: flex-start;
   }
   .d-stack--sm-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
   }
   .d-stack--sm-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--sm-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--sm-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -772,25 +796,55 @@ template {
   .d-stack--sm-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--sm-align-normal {
+    align-items: normal;
+  }
+  .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;
   }
   .d-stack--md-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
   }
   .d-stack--md-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--md-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--md-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -834,25 +888,55 @@ template {
   .d-stack--md-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--md-align-normal {
+    align-items: normal;
+  }
+  .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;
   }
   .d-stack--lg-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
   }
   .d-stack--lg-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--lg-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--lg-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -896,25 +980,55 @@ template {
   .d-stack--lg-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--lg-align-normal {
+    align-items: normal;
+  }
+  .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;
   }
   .d-stack--xl-column-reverse {
     --stack-direction: column-reverse;
-    justify-content: flex-start;
   }
   .d-stack--xl-row {
     --stack-direction: row;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--xl-row-reverse {
     --stack-direction: row-reverse;
-    align-items: center;
-    justify-content: normal;
   }
   .d-stack--xl-gap-50 {
     --stack-gap: var(--dt-space-50);
@@ -958,6 +1072,42 @@ template {
   .d-stack--xl-gap-700 {
     --stack-gap: var(--dt-space-700);
   }
+  .d-stack--xl-align-normal {
+    align-items: normal;
+  }
+  .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;
@@ -1138,6 +1288,7 @@ template {
   font-weight: var(--dt-font-weight-bold);
   font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
   line-height: var(--dt-font-line-height-100);
+  white-space: nowrap;
   text-align: center;
   background-color: var(--dt-color-surface-strong);
   border-radius: var(--dt-size-radius-pill);
@@ -1293,6 +1444,7 @@ template {
   will-change: transform;
 }
 .d-avatar--group-digits-2 > .d-avatar__count {
+  padding-inline: var(--dt-space-0);
   inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
 }
 .d-avatar--group-digits-3 {
@@ -1308,6 +1460,7 @@ template {
   will-change: transform;
 }
 .d-avatar--group-digits-3 > .d-avatar__count {
+  padding-inline: var(--dt-space-0);
   inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
 }
 .d-badge {
@@ -3104,16 +3257,18 @@ legend .d-label--md {
 }
 .d-keyboard-shortcut {
   display: inline-flex;
+  gap: var(--dt-space-200);
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding-right: var(--dt-space-300);
-  padding-left: var(--dt-space-300);
-  font-size: var(--dt-font-size-100);
-  font-family: var(--dt-font-family-body);
+  padding-inline: var(--dt-space-350);
+  font: var(--dt-typography-body-sm);
+  line-height: var(--dt-font-line-height-400);
+  min-inline-size: 1lh;
   border: var(--dt-size-100) solid;
   border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
+  font-variant-numeric: tabular-nums;
   /* Hiding class, making content visible only to screen readers but not visually */
   /* "sr" meaning "screen-reader" */
   /* https://css-tricks.com/inclusively-hidden/ */
@@ -3132,9 +3287,21 @@ legend .d-label--md {
 }
 .d-keyboard-shortcut__icon,
 .d-keyboard-shortcut__item {
-  margin-right: var(--dt-space-200);
+  min-height: 1lh;
   color: var(--dt-color-foreground-tertiary);
 }
+.d-keyboard-shortcut__icon.d-icon--plus,
+.d-keyboard-shortcut__item.d-icon--plus {
+  color: var(--dt-color-foreground-muted);
+}
+.d-keyboard-shortcut__icon.d-icon--plus,
+.d-keyboard-shortcut__item.d-icon--plus {
+  color: var(--dt-color-foreground-muted);
+}
+.d-keyboard-shortcut--inverted .d-keyboard-shortcut__icon.d-icon--plus,
+.d-keyboard-shortcut--inverted .d-keyboard-shortcut__item.d-icon--plus {
+  color: var(--dt-color-foreground-muted-inverted);
+}
 .d-keyboard-shortcut__icon--inverted,
 .d-keyboard-shortcut__item--inverted {
   color: var(--dt-color-foreground-secondary-inverted);