@dialpad/dialtone 8.21.5 → 8.22.0

package/lib/build/less/components/forms.less

@@ -118,6 +118,11 @@ fieldset {
     background-color: var(--validation-color-text);
     content: '';
   }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 //  $$   VALIDATION STATES

package/lib/build/less/components/pagination.less

@@ -0,0 +1,41 @@
+//
+//  DIALTONE
+//  COMPONENTS: Pagination
+//
+//  These are the styles for Pagination component.
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • PREV & NEXT BUTTONS
+//  • SEPARATOR
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-pagination {
+  display: flex;
+  flex-direction: row;
+  grid-gap: var(--dt-space-300);
+  align-items: center;
+}
+
+//  ============================================================================
+//  $   PREV & NEXT BUTTONS
+//  ----------------------------------------------------------------------------
+.d-pagination__button {
+  padding-right: var(--dt-space-400);
+  padding-left: var(--dt-space-400);
+}
+
+//  ============================================================================
+//  $   SEPARATOR
+//  ----------------------------------------------------------------------------
+.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;
+}

package/lib/build/less/components/popover.less

@@ -74,6 +74,17 @@
     overflow: auto;
     font-weight: var(--dt-font-weight-semi-bold);
     font-size: var(--dt-font-size-200);
+
+    &__content {
+      width: 100%;
+      text-overflow: ellipsis;
+    }
+
+    &__close-button {
+      margin-right: var(--dt-space-350);
+      padding: var(--dt-space-350);
+      border-color: transparent;
+    }
   }
 
   &__header {

package/lib/build/less/components/skeleton.less

@@ -6,6 +6,13 @@
 //  The --placeholder-from-color and --placeholder-to-color custom properties can be set on the parent class of the
 //  placeholder to control the animation colors.
 //  For further documentation of these styles, please visit https://dialpad.design/components/skeleton
+//
+//
+//  TABLE OF CONTENTS
+//  • SKELETON CONTAINER
+//  • SKELETON LIST ITEM
+//  • SKELETON PARAGRAPH
+//  • SKELETON TEXT
 
 //  ============================================================================
 //  @   SKELETON CONTAINER
@@ -44,3 +51,48 @@
     fill: var(--placeholder-from-color);
   }
 }
+
+//  ============================================================================
+//  @   SKELETON LIST ITEM
+//  ----------------------------------------------------------------------------
+.d-skeleton-list-item {
+  display: flex;
+
+  &--single {
+    align-items: center;
+  }
+
+  &__shape {
+    margin-right: var(--dt-space-400);
+  }
+
+  &__paragraph-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+//  ============================================================================
+//  @   SKELETON PARAGRAPH
+//  ----------------------------------------------------------------------------
+.d-skeleton-paragraph {
+  width: 100%;
+  margin-bottom: var(--dt-space-450);
+
+  &:last-child {
+    margin-bottom: var(--dt-space-0);
+  }
+}
+
+//  ============================================================================
+//  @   SKELETON TEXT
+//  ----------------------------------------------------------------------------
+.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);
+}

package/lib/build/less/components/tab-panel.less

@@ -0,0 +1,15 @@
+//
+//  DIALTONE
+//  COMPONENTS: Tab Panel
+//
+//  These are the styles for Tab Panel component.
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-tab-panel--hidden {
+  display: none;
+}

package/lib/build/less/components/toggle.less

@@ -13,6 +13,7 @@
 //  • INDETERMINATE TOGGLE
 //  • FOCUSED TOGGLE
 //  • DISABLED TOGGLE
+//  • TOGGLE WRAPPER
 //
 //
 //  ============================================================================
@@ -162,3 +163,11 @@
 .d-toggle-group {
   gap: var(--dt-space-400); // 8
 }
+
+//  ============================================================================
+//  $   TOGGLE WRAPPER
+//  ----------------------------------------------------------------------------
+.d-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}

package/lib/build/less/dialtone.less

@@ -33,11 +33,13 @@
 @import 'components/notice';
 @import 'components/toast';
 @import 'components/banner';
+@import 'components/pagination';
 @import 'components/popover';
 @import 'components/radio-checkbox';
 @import 'components/selects';
 @import 'components/skeleton';
 @import 'components/table';
+@import 'components/tab-panel';
 @import 'components/tabs';
 @import 'components/tooltip';
 @import 'components/toggle';

package/lib/dist/css/dialtone.css

@@ -1783,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);
 }
@@ -2834,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);
@@ -2876,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);
@@ -3335,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);
@@ -3399,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;
@@ -3860,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);
@@ -7451,7 +7519,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 17:52:51 GMT
+ * Generated on Wed, 29 Nov 2023 15:51:14 GMT
  */
 
 .dialtone-theme-light {
@@ -8248,7 +8316,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 17:52:52 GMT
+ * Generated on Wed, 29 Nov 2023 15:51:14 GMT
  */
 
 .dialtone-theme-dark {