@dialpad/dialtone 8.21.4 → 8.22.0

package/lib/dist/css/dialtone.css

@@ -402,10 +402,15 @@ template {
   border-radius: var(--dt-size-radius-pill);
 }
 .d-avatar__initials {
+  position: absolute;
+  z-index: var(--zi-base);
   font-weight: var(--dt-font-weight-bold);
   font-size: var(--avatar-size-text);
   line-height: var(--dt-font-line-height-100);
   text-transform: uppercase;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .d-avatar__icon {
   display: flex;
@@ -650,6 +655,10 @@ template {
 }
 .d-breadcrumbs__item .d-link {
   color: var(--breadcrumbs-color-text);
+  text-decoration: none;
+}
+.d-breadcrumbs__item .d-link:hover {
+  text-decoration: underline;
 }
 .d-breadcrumbs__item--selected {
   --breadcrumbs-color-text: var(--dt-color-foreground-primary);
@@ -1312,6 +1321,11 @@ template {
 .d-chip__label--active {
   background-color: var(--dt-color-black-400);
 }
+.d-chip__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .d-chip__label--xs {
   padding: var(--dt-space-200) var(--dt-space-350);
   font-size: var(--dt-font-size-100);
@@ -1371,83 +1385,155 @@ template {
   width: var(--dt-size-500);
   height: var(--dt-size-500);
 }
+.d-codeblock {
+  display: block;
+  padding: var(--dt-space-400);
+  color: var(--dt-color-foreground-secondary);
+  font-size: var(--dt-font-size-200);
+  font-family: var(--dt-font-family-mono);
+  line-height: var(--dt-font-line-height-400);
+  white-space: pre-wrap;
+  background-color: var(--dt-color-surface-secondary);
+  border: var(--dt-size-100) solid;
+  border-color: var(--dt-color-border-subtle);
+  border-radius: var(--dt-size-radius-400);
+}
+.d-collapsible__icon {
+  --icon-base-scale: var(--dt-size-400);
+  --icon-size-300: calc(var(--icon-base-scale) * 2.25);
+  --icon-size: var(--icon-size-300);
+  flex: none;
+  flex-shrink: 0;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin-right: var(--dt-space-400);
+  fill: currentColor;
+}
+.d-collapsible__anchor-text {
+  margin-right: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.d-combobox__empty-list {
+  padding: var(--dt-space-0);
+}
+.d-combobox__loading-list {
+  max-height: var(--dt-size-925);
+  margin-top: var(--dt-space-400);
+  padding: var(--dt-space-0);
+  overflow-y: auto;
+}
 .d-datepicker {
-  width: calc(var(--dt-size-925) - var(--dt-size-550));
-  padding: var(--dt-size-500);
+  --datepicker-width: calc(var(--dt-size-300) * 75);
+  --datepicker-day-size: calc(var(--dt-size-600) - var(--dt-size-200));
+  display: flex;
+  flex-direction: column;
+  gap: var(--dt-space-400);
+  width: var(--datepicker-width);
+  padding: var(--dt-space-500);
 }
 .d-datepicker p {
   display: flex;
-  margin: 0;
-  font-weight: 400;
-  font-size: var(--dt-size-450);
-  font-family: inherit;
-  font-style: normal;
+  color: var(--dt-color-foreground-secondary);
+  font-size: var(--dt-font-size-100);
   text-transform: uppercase;
 }
 .d-datepicker--body {
-  padding: 0 var(--dt-size-400);
+  padding: 0;
+}
+.d-datepicker__month-year-picker {
+  display: flex;
+  gap: var(--dt-space-500);
+  align-items: center;
+  justify-content: space-between;
+}
+.d-datepicker__month-year-picker > div {
+  display: flex;
+  gap: var(--dt-space-200);
+}
+.d-datepicker__month-year-picker button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--datepicker-day-size);
+  height: var(--datepicker-day-size);
+  padding: 0;
+  color: var(--dt-action-color-foreground-base-default);
+  background-color: var(--dt-action-color-background-base-default);
+  border: none;
+  border-radius: var(--dt-size-radius-circle);
+  cursor: pointer;
+}
+.d-datepicker__month-year-picker button:hover {
+  color: var(--dt-action-color-foreground-base-hover);
+  background-color: var(--dt-action-color-background-base-hover);
+}
+.d-datepicker__month-year-picker button:active {
+  color: var(--dt-action-color-foreground-base-active);
+  background-color: var(--dt-action-color-background-base-active);
+}
+.d-datepicker__calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dt-space-200);
 }
 .d-datepicker__week-day {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--dt-size-500);
 }
 .d-datepicker__week-day > div {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--datepicker-day-size);
+  height: var(--datepicker-day-size);
 }
 .d-datepicker__week-day > div p {
   margin: 0;
-  color: var(--dt-color-surface-strong);
+  color: var(--dt-color-foreground-tertiary);
+  font-weight: var(--dt-font-weight-medium);
 }
 .d-datepicker__week {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--dt-size-400);
 }
 .d-datepicker__day {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--datepicker-day-size);
+  height: var(--datepicker-day-size);
   padding: 0;
-  font-size: var(--dt-size-450);
+  color: var(--dt-action-color-foreground-muted-default);
+  font-size: var(--dt-font-size-100);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
   background-color: transparent;
   border: none;
-  border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
+  border-radius: var(--dt-size-radius-circle);
   cursor: pointer;
 }
 .d-datepicker__day--disabled {
-  color: var(--dt-color-surface-bold);
+  color: var(--dt-color-foreground-muted);
+  cursor: default;
 }
 .d-datepicker__day--selected {
-  color: var(--dt-color-foreground-primary);
-  background: var(--dt-color-purple-400);
+  color: var(--dt-color-neutral-white);
+  background: var(--dt-color-brand-purple);
 }
-.d-datepicker__day:focus {
-  box-shadow: var(--dt-shadow-focus);
+.d-datepicker__day:hover:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) {
+  color: var(--dt-action-color-foreground-muted-hover);
+  background-color: var(--dt-action-color-background-muted-hover);
 }
-.d-datepicker__month-year-picker {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  margin-bottom: var(--dt-size-525);
+.d-datepicker__day:active:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) {
+  color: var(--dt-action-color-foreground-muted-active);
+  background-color: var(--dt-action-color-background-muted-active);
 }
-.d-datepicker__month-year-picker > div {
-  display: inline-flex;
+.d-datepicker__day:focus-visible {
+  box-shadow: var(--dt-shadow-focus);
 }
-.d-datepicker__month-year-picker button {
-  display: inline-flex;
-  align-items: center;
-  padding: 0;
-  color: var(--dt-action-color-foreground-base-default);
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
+.d-datepicker__day:focus-visible:not(.d-datepicker__day--selected) {
+  background-color: var(--dt-color-surface-moderate);
 }
 .d-emoji-picker {
   flex-direction: column;
@@ -1697,6 +1783,10 @@ legend .d-label {
   background-color: var(--validation-color-text);
   content: '';
 }
+.d-validation-message__container {
+  display: flex;
+  flex-direction: column;
+}
 .d-validation-message--warning {
   --validation-color-text: var(--dt-color-foreground-warning);
 }
@@ -1718,6 +1808,25 @@ legend .d-label {
   -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
           mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
 }
+.d-image-viewer__preview-button {
+  padding: var(--dt-space-0);
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+.d-image-viewer__full {
+  max-width: 80%;
+  max-height: 80%;
+  padding: var(--dt-space-0);
+  border-radius: var(--dt-size-radius-0);
+}
+.d-image-viewer__full__image {
+  max-width: 100%;
+  max-height: 100%;
+}
+.d-image-viewer__close-button {
+  --fco: 100%;
+  color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
+}
 .d-input,
 .d-input--md,
 .d-textarea,
@@ -1897,6 +2006,34 @@ legend .d-label {
 .d-input__wrapper::-ms-expand {
   display: none;
 }
+.d-input__label-text {
+  display: flex;
+  flex: 1 0%;
+  align-items: baseline;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: var(--dt-space-300);
+  color: var(--dt-color-foreground-secondary);
+  font-weight: var(--dt-font-weight-semi-bold);
+  font-size: var(--dt-font-size-200);
+  font-family: inherit;
+  line-height: var(--dt-font-line-height-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.d-input__description {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+  font-family: inherit;
+  line-height: var(--dt-font-line-height-400);
+  fill: currentColor;
+}
+.d-input__length-description {
+  margin-bottom: var(--dt-space-200);
+}
 .d-input__wrapper {
   padding: 0;
 }
@@ -2071,6 +2208,31 @@ legend .d-label {
 .d-input-icon--xl {
   --input-icon-size: var(--dt-icon-size-500);
 }
+.d-keyboard-shortcut {
+  display: inline-flex;
+  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);
+  border: var(--dt-size-100) solid;
+  border-color: var(--dt-color-border-default);
+  border-radius: var(--dt-size-radius-300);
+}
+.d-keyboard-shortcut--inverted {
+  border-color: var(--dt-color-border-moderate-inverted);
+}
+.d-keyboard-shortcut__icon,
+.d-keyboard-shortcut__item {
+  margin-right: var(--dt-space-200);
+  color: var(--dt-color-foreground-tertiary);
+}
+.d-keyboard-shortcut__icon--inverted,
+.d-keyboard-shortcut__item--inverted {
+  color: var(--dt-color-foreground-secondary-inverted);
+}
 .d-link {
   --link-color-default: var(--dt-color-link-primary);
   --link-color-default-hover: var(--dt-color-link-primary-hover);
@@ -2182,6 +2344,11 @@ legend .d-label {
   color: var(--dt-color-neutral-white);
   background-color: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) + 10%));
 }
+.d-list-item-group {
+  position: relative;
+  padding-right: var(--dt-space-0);
+  padding-left: var(--dt-space-0);
+}
 .d-modal {
   --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
   --modal-dialog-padding: var(--dt-space-600);
@@ -2671,6 +2838,24 @@ legend .d-label {
 .d-banner.d-banner--important {
   --banner-color-border: transparent;
 }
+.d-pagination {
+  display: flex;
+  flex-direction: row;
+  grid-gap: var(--dt-space-300);
+  align-items: center;
+}
+.d-pagination__button {
+  padding-right: var(--dt-space-400);
+  padding-left: var(--dt-space-400);
+}
+.d-pagination__separator {
+  align-self: flex-end;
+}
+.d-pagination__separator-icon {
+  width: var(--dt-size-550);
+  color: var(--dt-color-foreground-tertiary);
+  text-align: center;
+}
 .d-popover__dialog {
   --popover-color-background: var(--dt-color-surface-secondary);
   --popover-border-width: var(--dt-size-100);
@@ -2713,6 +2898,17 @@ legend .d-label {
   font-weight: var(--dt-font-weight-semi-bold);
   font-size: var(--dt-font-size-200);
 }
+.d-popover__header__content,
+.d-popover__footer__content {
+  width: 100%;
+  text-overflow: ellipsis;
+}
+.d-popover__header__close-button,
+.d-popover__footer__close-button {
+  margin-right: var(--dt-space-350);
+  padding: var(--dt-space-350);
+  border-color: transparent;
+}
 .d-popover__header {
   grid-row: 1;
   border-bottom: var(--popover-border-width) solid var(--popover-color-border);
@@ -2797,6 +2993,21 @@ legend .d-label {
   flex-direction: column;
   align-items: flex-start;
 }
+.d-input-group__fieldset__label {
+  display: flex;
+  flex: 1 0%;
+  align-items: baseline;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: var(--dt-space-300);
+  color: var(--dt-color-foreground-secondary);
+  font-weight: var(--dt-font-weight-semi-bold);
+  font-size: var(--dt-font-size-200);
+  font-family: inherit;
+  line-height: var(--dt-font-line-height-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
 .d-checkbox__input,
 .d-radio__input {
   display: flex;
@@ -2820,6 +3031,15 @@ legend .d-label {
   line-height: var(--dt-font-line-height-400);
   cursor: pointer;
 }
+.d-checkbox__description {
+  display: flex;
+  box-sizing: border-box;
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+  font-family: inherit;
+  line-height: var(--dt-font-line-height-400);
+  fill: currentColor;
+}
 @supports ((-webkit-appearance: none) or (appearance: none)) {
   .d-checkbox {
     background-repeat: no-repeat;
@@ -3148,6 +3368,34 @@ legend .d-label {
     fill: var(--placeholder-from-color);
   }
 }
+.d-skeleton-list-item {
+  display: flex;
+}
+.d-skeleton-list-item--single {
+  align-items: center;
+}
+.d-skeleton-list-item__shape {
+  margin-right: var(--dt-space-400);
+}
+.d-skeleton-list-item__paragraph-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.d-skeleton-paragraph {
+  width: 100%;
+  margin-bottom: var(--dt-space-450);
+}
+.d-skeleton-paragraph:last-child {
+  margin-bottom: var(--dt-space-0);
+}
+.d-skeleton-text {
+  height: var(--dt-size-400);
+  border-radius: var(--dt-size-radius-200);
+}
+.d-skeleton-text--heading {
+  border-radius: var(--dt-size-radius-200);
+}
 .d-table {
   --table-color-border: var(--dt-color-border-default);
   --table-th-color-text: var(--dt-color-foreground-secondary);
@@ -3212,6 +3460,9 @@ legend .d-label {
 .d-table--striped.d-table--inverted tr:nth-child(even) {
   background-color: hsla(var(--bgc-primary-hsl) / 0.1);
 }
+.d-tab-panel--hidden {
+  display: none;
+}
 .d-tablist {
   position: relative;
   display: flex;
@@ -3673,6 +3924,10 @@ legend .d-label {
 .d-toggle-group {
   gap: var(--dt-space-400);
 }
+.d-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
 .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-color-background);
   --presence-color-border-offline: var(--dt-color-black-600);
@@ -7264,7 +7519,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Fri, 17 Nov 2023 20:38:15 GMT
+ * Generated on Wed, 29 Nov 2023 15:51:14 GMT
  */
 
 .dialtone-theme-light {
@@ -8061,7 +8316,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Fri, 17 Nov 2023 20:38:16 GMT
+ * Generated on Wed, 29 Nov 2023 15:51:14 GMT
  */
 
 .dialtone-theme-dark {