@dialpad/dialtone 6.25.1 → 6.27.1

package/lib/build/less/components/button.less

@@ -219,6 +219,18 @@
     padding: calc(var(--su8) + var(--su1));
     transition-duration: 150ms;
 
+    &:hover {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+    }
+
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
@@ -291,14 +303,16 @@
 .d-btn--muted {
     --button--fc: var(--muted-color);
 
-    &:hover,
-    &:active {
-      --button--fc: var(--muted-color-hover);
-      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    &:hover {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
     }
 
-    &:active {
-      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--muted-color-hover);
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {

package/lib/build/less/components/modal.less

@@ -84,7 +84,6 @@
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -121,10 +120,14 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 
-  > * {
-    margin: var(--su4);
+  >:not(:first-child) {
+    margin-right: var(--su4);
+  }
+
+  >:not(:last-child) {
+    margin-left: var(--su4);
   }
 }
 
@@ -136,6 +139,7 @@
 //  ----------------------------------------------------------------------------
 .d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -146,7 +150,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 
 
@@ -196,15 +201,22 @@
     flex-direction: column;
     max-width: unset;
     height: 100%;
-    padding: var(--su32);
     border-radius: 0;
     transform: unset !important;
   }
 
+  .d-modal__header {
+    padding: var(--su32) var(--su32) 0;
+  }
+
+  .d-modal__content {
+    padding-right: 0;
+    padding-left: var(--su32);
+  }
 
   .d-modal__footer {
-    margin: var(--sun16) var(--sun12);
     margin-top: auto !important;
+    padding: 0 var(--su24) var(--su32) var(--su32);
   }
 
   .d-modal__banner {
@@ -214,6 +226,18 @@
   }
 }
 
+// $$   SCROLLABLE
+//  ----------------------------------------------------------------------------
+.d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .d-modal__content {
+    overflow-y: auto;
+  }
+}
+
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {

package/lib/build/svg/system/fire.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 1C13.5 1 14.24 3.65 14.24 5.8C14.24 7.86 12.89 9.53 10.83 9.53C8.76 9.53 7.2 7.86 7.2 5.8L7.23 5.44C5.21 7.84 4 10.95 4 14.33C4 18.75 7.58 22.33 12 22.33C16.42 22.33 20 18.75 20 14.33C20 8.94 17.41 4.13 13.5 1ZM11.71 19.33C9.93 19.33 8.49 17.93 8.49 16.19C8.49 14.57 9.54 13.43 11.3 13.07C13.07 12.71 14.9 11.86 15.92 10.49C16.31 11.78 16.51 13.14 16.51 14.53C16.51 17.18 14.36 19.33 11.71 19.33Z" fill="#0D0C0F"/></svg>

package/lib/build/svg/system/snooze.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 17H11V14.6402L17.8549 7.51046H11V5H21.5V7.46025L14.7539 14.4895H21.5V17Z" fill="#0D0C0F"/><path d="M9.5 20H2V18.2301L6.89637 12.8828H2V11H9.5V12.8452L4.68135 18.1172H9.5V20Z" fill="#0D0C0F"/></svg>

package/lib/build/svg/system/thread-reply.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V12H20V5H4V17H16.5856L14.2928 14.7072L15.707 13.293L20.4141 18.0001L15.707 22.7072L14.2928 21.293L16.5858 19H4C2.89543 19 2 18.1046 2 17V5Z" fill="black"/>
+<path d="M6 9H18V7H6V9Z" fill="black"/>
+<path d="M14.5 12H6V10H14.5V12Z" fill="black"/>
+<path d="M6 15H11V13H6V15Z" fill="black"/>
+</svg>

package/lib/dist/css/dialtone.css

@@ -813,6 +813,16 @@ body {
   padding: calc(var(--su8) + var(--su1));
   transition-duration: 150ms;
 }
+.d-btn--circle:hover {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+}
+.d-btn--circle:active,
+.d-btn--circle.d-btn--active,
+.d-btn--circle.d-btn--active:active {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+}
 .d-btn--circle.focus-visible {
   box-shadow: var(--bs-focus-ring-circle);
 }
@@ -864,12 +874,14 @@ body {
 .d-btn--muted {
   --button--fc: var(--muted-color);
 }
-.d-btn--muted:hover,
-.d-btn--muted:active {
+.d-btn--muted:hover {
   --button--fc: var(--muted-color-hover);
   --button--bgc: hsla(var(--black-800-hsl)  /  3%);
 }
-.d-btn--muted:active {
+.d-btn--muted:active,
+.d-btn--muted.d-btn--active,
+.d-btn--muted.d-btn--active:active {
+  --button--fc: var(--muted-color-hover);
   --button--bgc: hsla(var(--black-800-hsl)  /  9%);
 }
 .d-btn--muted.focus-visible {
@@ -1657,7 +1669,6 @@ legend .d-label {
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -1687,13 +1698,17 @@ legend .d-label {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 }
-.d-modal__footer > * {
-  margin: var(--su4);
+.d-modal__footer > :not(:first-child) {
+  margin-right: var(--su4);
+}
+.d-modal__footer > :not(:last-child) {
+  margin-left: var(--su4);
 }
 .d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -1701,7 +1716,8 @@ legend .d-label {
 }
 .d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 .d-modal__close {
   position: absolute;
@@ -1733,19 +1749,33 @@ legend .d-label {
   flex-direction: column;
   max-width: unset;
   height: 100%;
-  padding: var(--su32);
   border-radius: 0;
   transform: unset !important;
 }
+.d-modal--full .d-modal__header {
+  padding: var(--su32) var(--su32) 0;
+}
+.d-modal--full .d-modal__content {
+  padding-right: 0;
+  padding-left: var(--su32);
+}
 .d-modal--full .d-modal__footer {
-  margin: var(--sun16) var(--sun12);
   margin-top: auto !important;
+  padding: 0 var(--su24) var(--su32) var(--su32);
 }
 .d-modal--full .d-modal__banner {
   max-width: unset;
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -20120,7 +20150,6 @@ body.theme-dark {
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -20150,13 +20179,17 @@ body.theme-dark {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 }
-.sm\:d-modal__footer > * {
-  margin: var(--su4);
+.sm\:d-modal__footer > :not(:first-child) {
+  margin-right: var(--su4);
+}
+.sm\:d-modal__footer > :not(:last-child) {
+  margin-left: var(--su4);
 }
 .sm\:d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -20164,7 +20197,8 @@ body.theme-dark {
 }
 .sm\:d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 .sm\:d-modal__close {
   position: absolute;
@@ -20196,19 +20230,33 @@ body.theme-dark {
   flex-direction: column;
   max-width: unset;
   height: 100%;
-  padding: var(--su32);
   border-radius: 0;
   transform: unset !important;
 }
+.sm\:d-modal--full .d-modal__header {
+  padding: var(--su32) var(--su32) 0;
+}
+.sm\:d-modal--full .d-modal__content {
+  padding-right: 0;
+  padding-left: var(--su32);
+}
 .sm\:d-modal--full .d-modal__footer {
-  margin: var(--sun16) var(--sun12);
   margin-top: auto !important;
+  padding: 0 var(--su24) var(--su32) var(--su32);
 }
 .sm\:d-modal--full .d-modal__banner {
   max-width: unset;
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.sm\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.sm\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .sm\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -20862,6 +20910,39 @@ body.theme-dark {
 .sm\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.sm\:d-w100p {
+  width: 100% !important;
+}
+.sm\:d-w100vw {
+  width: 100vw !important;
+}
+.sm\:d-jc-center {
+  justify-content: center !important;
+}
+.sm\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.sm\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.sm\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.sm\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.sm\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.sm\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.sm\:d-jc-normal {
+  justify-content: normal !important;
+}
+.sm\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 640px) {
 .md\:d-description {
@@ -21256,7 +21337,6 @@ body.theme-dark {
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -21286,13 +21366,17 @@ body.theme-dark {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
+}
+.md\:d-modal__footer > :not(:first-child) {
+  margin-right: var(--su4);
 }
-.md\:d-modal__footer > * {
-  margin: var(--su4);
+.md\:d-modal__footer > :not(:last-child) {
+  margin-left: var(--su4);
 }
 .md\:d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -21300,7 +21384,8 @@ body.theme-dark {
 }
 .md\:d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 .md\:d-modal__close {
   position: absolute;
@@ -21332,19 +21417,33 @@ body.theme-dark {
   flex-direction: column;
   max-width: unset;
   height: 100%;
-  padding: var(--su32);
   border-radius: 0;
   transform: unset !important;
 }
+.md\:d-modal--full .d-modal__header {
+  padding: var(--su32) var(--su32) 0;
+}
+.md\:d-modal--full .d-modal__content {
+  padding-right: 0;
+  padding-left: var(--su32);
+}
 .md\:d-modal--full .d-modal__footer {
-  margin: var(--sun16) var(--sun12);
   margin-top: auto !important;
+  padding: 0 var(--su24) var(--su32) var(--su32);
 }
 .md\:d-modal--full .d-modal__banner {
   max-width: unset;
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.md\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.md\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .md\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -21998,6 +22097,39 @@ body.theme-dark {
 .md\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.md\:d-w100p {
+  width: 100% !important;
+}
+.md\:d-w100vw {
+  width: 100vw !important;
+}
+.md\:d-jc-center {
+  justify-content: center !important;
+}
+.md\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.md\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.md\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.md\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.md\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.md\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.md\:d-jc-normal {
+  justify-content: normal !important;
+}
+.md\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 980px) {
 .lg\:d-description {
@@ -22392,7 +22524,6 @@ body.theme-dark {
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -22422,13 +22553,17 @@ body.theme-dark {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 }
-.lg\:d-modal__footer > * {
-  margin: var(--su4);
+.lg\:d-modal__footer > :not(:first-child) {
+  margin-right: var(--su4);
+}
+.lg\:d-modal__footer > :not(:last-child) {
+  margin-left: var(--su4);
 }
 .lg\:d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -22436,7 +22571,8 @@ body.theme-dark {
 }
 .lg\:d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 .lg\:d-modal__close {
   position: absolute;
@@ -22468,19 +22604,33 @@ body.theme-dark {
   flex-direction: column;
   max-width: unset;
   height: 100%;
-  padding: var(--su32);
   border-radius: 0;
   transform: unset !important;
 }
+.lg\:d-modal--full .d-modal__header {
+  padding: var(--su32) var(--su32) 0;
+}
+.lg\:d-modal--full .d-modal__content {
+  padding-right: 0;
+  padding-left: var(--su32);
+}
 .lg\:d-modal--full .d-modal__footer {
-  margin: var(--sun16) var(--sun12);
   margin-top: auto !important;
+  padding: 0 var(--su24) var(--su32) var(--su32);
 }
 .lg\:d-modal--full .d-modal__banner {
   max-width: unset;
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.lg\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.lg\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .lg\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -23134,6 +23284,39 @@ body.theme-dark {
 .lg\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.lg\:d-w100p {
+  width: 100% !important;
+}
+.lg\:d-w100vw {
+  width: 100vw !important;
+}
+.lg\:d-jc-center {
+  justify-content: center !important;
+}
+.lg\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.lg\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.lg\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.lg\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.lg\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.lg\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.lg\:d-jc-normal {
+  justify-content: normal !important;
+}
+.lg\:d-jc-unset {
+  justify-content: unset !important;
+}
 }
 @media (max-width: 1264px) {
 .xl\:d-description {
@@ -23528,7 +23711,6 @@ body.theme-dark {
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -23558,13 +23740,17 @@ body.theme-dark {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 }
-.xl\:d-modal__footer > * {
-  margin: var(--su4);
+.xl\:d-modal__footer > :not(:first-child) {
+  margin-right: var(--su4);
+}
+.xl\:d-modal__footer > :not(:last-child) {
+  margin-left: var(--su4);
 }
 .xl\:d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -23572,7 +23758,8 @@ body.theme-dark {
 }
 .xl\:d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 .xl\:d-modal__close {
   position: absolute;
@@ -23604,19 +23791,33 @@ body.theme-dark {
   flex-direction: column;
   max-width: unset;
   height: 100%;
-  padding: var(--su32);
   border-radius: 0;
   transform: unset !important;
 }
+.xl\:d-modal--full .d-modal__header {
+  padding: var(--su32) var(--su32) 0;
+}
+.xl\:d-modal--full .d-modal__content {
+  padding-right: 0;
+  padding-left: var(--su32);
+}
 .xl\:d-modal--full .d-modal__footer {
-  margin: var(--sun16) var(--sun12);
   margin-top: auto !important;
+  padding: 0 var(--su24) var(--su32) var(--su32);
 }
 .xl\:d-modal--full .d-modal__banner {
   max-width: unset;
   padding: var(--su12) var(--su32);
   border-radius: 0;
 }
+.xl\:d-modal__dialog--scrollable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.xl\:d-modal__dialog--scrollable .d-modal__content {
+  overflow-y: auto;
+}
 .xl\:d-modal--danger {
   --modal-header--fc: var(--fc-error);
 }
@@ -24270,4 +24471,37 @@ body.theme-dark {
 .xl\:d-g-cols12 {
   grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
 }
+.xl\:d-w100p {
+  width: 100% !important;
+}
+.xl\:d-w100vw {
+  width: 100vw !important;
+}
+.xl\:d-jc-center {
+  justify-content: center !important;
+}
+.xl\:d-jc-flex-end {
+  justify-content: flex-end !important;
+}
+.xl\:d-jc-flex-start {
+  justify-content: flex-start !important;
+}
+.xl\:d-jc-space-around {
+  justify-content: space-around !important;
+}
+.xl\:d-jc-space-between {
+  justify-content: space-between !important;
+}
+.xl\:d-jc-space-evenly {
+  justify-content: space-evenly !important;
+}
+.xl\:d-jc-baseline {
+  justify-content: baseline !important;
+}
+.xl\:d-jc-normal {
+  justify-content: normal !important;
+}
+.xl\:d-jc-unset {
+  justify-content: unset !important;
+}
 }