@dialpad/dialtone 6.27.0 → 6.29.0

package/lib/dist/css/dialtone.css

@@ -1057,6 +1057,130 @@ body {
 .d-btn-group.d-btn-group--space-between {
   justify-content: space-between;
 }
+.d-chip {
+  --chip--fc: var(--fc-dark);
+  --chip--bgc: var(--black-050);
+  --chip--br: var(--su102);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--su4) var(--su8);
+  color: var(--chip--fc);
+  font-size: var(--fs16);
+  font-family: inherit;
+  line-height: var(--lh4);
+  background-color: var(--chip--bgc);
+  border-radius: var(--chip--br);
+  transition-timing-function: var(--ttf-in-out);
+  transition-duration: 75ms;
+  transition-property: background-color;
+}
+.d-chip .d-chip-btn-holder {
+  flex-shrink: 0;
+  width: calc(var(--su16) + var(--su2));
+  height: calc(var(--su16) + var(--su2));
+}
+.d-chip .d-chip-btn-container {
+  position: absolute;
+  top: var(--su0);
+  right: var(--su0);
+  padding: var(--su2) var(--su2) var(--su2) var(--su0);
+  cursor: pointer;
+}
+.d-chip .d-chip-btn-container .d-btn {
+  padding: calc(var(--su2) + var(--su1));
+  border-width: var(--su0);
+}
+.d-chip .d-chip-btn-container:hover .d-btn {
+  --button--bgc: hsla(var(--black-800-hsl)  /  15%);
+}
+.d-chip .d-chip-btn-container:active .d-btn {
+  --button--bgc: hsla(var(--black-800-hsl)  /  25%);
+}
+.d-chip .d-avatar {
+  --avatar--size: var(--su24);
+  margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
+}
+.d-chip .d-svg,
+.d-chip .d-btn .d-btn__icon .d-svg {
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.d-chip__icon {
+  padding-right: var(--su4);
+  line-height: 0;
+}
+.d-chip--active {
+  background-color: var(--black-100);
+}
+.d-chip--interactive {
+  cursor: pointer;
+}
+.d-chip--interactive:hover {
+  --chip--bgc: var(--black-075);
+}
+.d-chip--interactive.focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-muted);
+}
+.d-chip--interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-muted);
+}
+.d-chip--xs {
+  padding: var(--su2) var(--su6);
+  font-size: var(--fs12);
+}
+.d-chip--xs .d-btn .d-btn__icon .d-svg,
+.d-chip--xs .d-svg {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+.d-chip--xs .d-chip-btn-holder {
+  width: var(--su12);
+  height: var(--su12);
+}
+.d-chip--xs .d-chip-btn-container {
+  top: calc(var(--sun1) + var(--sun2));
+  right: var(--sun2);
+  padding: var(--su4);
+}
+.d-chip--xs .d-chip-btn-container .d-btn {
+  padding: var(--su1);
+}
+.d-chip--xs .d-avatar {
+  --avatar--size: var(--su16);
+  margin-right: var(--su4);
+  margin-left: var(--sun4);
+}
+.d-chip--sm {
+  padding: var(--su2) var(--su8);
+  font-size: var(--fs16);
+}
+.d-chip--sm .d-btn .d-btn__icon .d-svg,
+.d-chip--sm .d-svg {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+.d-chip--sm .d-chip-btn-holder {
+  width: calc(var(--su12) + var(--su2));
+  height: calc(var(--su12) + var(--su2));
+}
+.d-chip--sm .d-chip-btn-container {
+  top: var(--sun1);
+  right: var(--su0);
+  padding: var(--su2);
+}
+.d-chip--sm .d-chip-btn-container .d-btn {
+  padding: var(--su2);
+}
+.d-chip--sm .d-avatar {
+  --avatar--size: calc(var(--su24) - var(--su4));
+  margin-right: var(--su4);
+  margin-left: var(--sun6);
+}
 fieldset {
   min-width: var(--su0);
   padding: var(--su0);
@@ -1669,7 +1793,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);
@@ -1699,13 +1822,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);
@@ -1713,7 +1840,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;
@@ -1745,13 +1873,19 @@ 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;
@@ -1761,6 +1895,7 @@ legend .d-label {
 .d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .d-modal__dialog--scrollable .d-modal__content {
   overflow-y: auto;
@@ -15619,6 +15754,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;
 }
@@ -20139,7 +20286,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);
@@ -20169,13 +20315,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);
@@ -20183,7 +20333,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;
@@ -20215,13 +20366,19 @@ 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;
@@ -20231,6 +20388,7 @@ body.theme-dark {
 .sm\:d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .sm\:d-modal__dialog--scrollable .d-modal__content {
   overflow-y: auto;
@@ -21315,7 +21473,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);
@@ -21345,13 +21502,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);
@@ -21359,7 +21520,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;
@@ -21391,13 +21553,19 @@ 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;
@@ -21407,6 +21575,7 @@ body.theme-dark {
 .md\:d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .md\:d-modal__dialog--scrollable .d-modal__content {
   overflow-y: auto;
@@ -22491,7 +22660,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);
@@ -22521,13 +22689,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 > :not(:first-child) {
+  margin-right: var(--su4);
 }
-.lg\:d-modal__footer > * {
-  margin: 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);
@@ -22535,7 +22707,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;
@@ -22567,13 +22740,19 @@ 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;
@@ -22583,6 +22762,7 @@ body.theme-dark {
 .lg\:d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .lg\:d-modal__dialog--scrollable .d-modal__content {
   overflow-y: auto;
@@ -23667,7 +23847,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);
@@ -23697,13 +23876,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);
@@ -23711,7 +23894,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;
@@ -23743,13 +23927,19 @@ 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;
@@ -23759,6 +23949,7 @@ body.theme-dark {
 .xl\:d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .xl\:d-modal__dialog--scrollable .d-modal__content {
   overflow-y: auto;