@dialpad/dialtone 6.26.0 → 6.28.0

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/less/utilities/interactivity.less

@@ -57,3 +57,13 @@
 
 .d-us-auto { user-select: auto !important; }
 .d-us-none { user-select: none !important; }
+
+//============================================================================
+//  $   RESIZE
+//      The resize CSS property sets whether an element is resizable,
+//      and if so, in which directions.
+//  ----------------------------------------------------------------------------
+.d-r-both { resize: both !important; }
+.d-r-horizontal { resize: horizontal !important; }
+.d-r-vertical { resize: vertical !important; }
+.d-r-none { resize: none !important; }

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);
 }
@@ -15600,6 +15630,18 @@ body.theme-dark .d\:d-bgg-to-0 {
 .d-us-none {
   user-select: none !important;
 }
+.d-r-both {
+  resize: both !important;
+}
+.d-r-horizontal {
+  resize: horizontal !important;
+}
+.d-r-vertical {
+  resize: vertical !important;
+}
+.d-r-none {
+  resize: none !important;
+}
 .d-box-border {
   box-sizing: border-box !important;
 }
@@ -20120,7 +20162,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 +20191,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 > :not(:first-child) {
+  margin-right: var(--su4);
 }
-.sm\:d-modal__footer > * {
-  margin: 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 +20209,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 +20242,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);
 }
@@ -21289,7 +21349,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);
@@ -21319,13 +21378,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 > * {
-  margin: var(--su4);
+.md\:d-modal__footer > :not(:first-child) {
+  margin-right: 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);
@@ -21333,7 +21396,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;
@@ -21365,19 +21429,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);
 }
@@ -22458,7 +22536,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);
@@ -22488,13 +22565,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);
@@ -22502,7 +22583,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;
@@ -22534,19 +22616,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);
 }
@@ -23627,7 +23723,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);
@@ -23657,13 +23752,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);
@@ -23671,7 +23770,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;
@@ -23703,19 +23803,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);
 }