@dialpad/dialtone-css 8.74.0-next.3 → 8.74.0-next.4

package/lib/build/less/components/banner.less

@@ -24,7 +24,6 @@
     inset-inline: 0;
     z-index: var(--zi-navigation-fixed);
     max-inline-size: 100%;
-    min-block-size: var(--dt-size-650); // 48
     padding: 0;
     line-height: var(--banner-line-height);
     border-block-end: 1px solid var(--banner-color-border);
@@ -55,19 +54,22 @@
     display: flex;
     align-items: center;
     inline-size: 100%;
-    max-inline-size: 128rem;
-    min-block-size: 100%;
+    min-block-size: calc(var(--dt-size-650) + var(--dt-size-200));
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
 
+    .d-notice__icon {
+        margin-block-start: var(--dt-size-0);
+    }
+
     .d-notice__content {
         flex-direction: row;
-        gap: var(--dt-size-300);
+        gap: var(--dt-size-350);
         align-items: baseline;
     }
 
     .d-notice__message {
-        font-size: var(--dt-font-size-200) !important;
+        font: var(--dt-text-body-sm);
     }
 }
 

package/lib/build/less/components/breadcrumbs.less

@@ -13,7 +13,7 @@
 
 @layer dialtone.components {
 .d-breadcrumbs {
-    --breadcrumbs-font-size: var(--dt-font-size-200);
+    --breadcrumbs-font-size: var(--dt-font-size-150);
     --breadcrumbs-line-height: var(--dt-font-line-height-300);
     --breadcrumbs-color-separator: var(--dt-color-foreground-muted);
     --breadcrumbs-color-text: var(--dt-color-link-muted);
@@ -30,15 +30,13 @@
     //  $  WRAPPER
     //  ----------------------------------------------------------------------------
 
-    > ol {
+    &__list {
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         box-sizing: border-box;
         margin: 0;
         padding: 0;
-        font-size: var(--breadcrumbs-font-size);
-        line-height: var(--breadcrumbs-line-height);
         list-style: none;
     }
 
@@ -47,10 +45,12 @@
     //  ----------------------------------------------------------------------------
     &__item {
         position: relative;
-        margin-inline: var(--dt-size-400) 0;
-        margin-block: 0;
         padding: 0;
+        font-size: var(--breadcrumbs-font-size);
+        line-height: var(--breadcrumbs-line-height);
         list-style: none;
+        margin-inline: var(--dt-size-400) 0;
+        margin-block: 0;
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
@@ -58,21 +58,13 @@
 
             &::before {
                 position: absolute;
-                inset-inline-end: var(--dt-size-450-negative);
-                margin-block-start: var(--dt-size-100-negative);
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
+                inset-inline-end: var(--dt-size-450-negative);
+                margin-block-start: var(--dt-size-100-negative);
             }
         }
 
-        .d-link {
-            color: var(--breadcrumbs-color-text);
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
 
         //  --  SELECTED STATE (CURRENT PAGE)
         &--selected {
@@ -86,5 +78,14 @@
             }
         }
     }
+
+    &__link {
+        color: var(--breadcrumbs-color-text);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }
 }

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

@@ -719,12 +719,15 @@
 
   .d-popover,
   .d-popover div,
-  .d-popover &__omega {
+  .d-popover &__omega,
+  .d-popover &__end {
     block-size: 100%;
   }
 
   &__alpha,
-  &__omega {
+  &__omega,
+  &__start,
+  &__end {
     position: relative;
 
     &:focus-visible {
@@ -732,12 +735,27 @@
     }
   }
 
-  &__alpha {
+  &__alpha,
+  &__start {
     flex-grow: 1;
     padding-inline-end: calc(var(--button-padding-x) + var(--dt-size-200));
+
+    &:not(.d-btn--outlined) {
+      border-inline-end: 0;
+    }
+
+    &:disabled:not(.d-btn--outlined),
+    &:disabled:not(.d-btn--primary),
+    &.d-btn--primary,
+    &.d-btn--outlined {
+      border-inline-end: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
   }
 
-  &__omega {
+  &__omega,
+  &__end {
     // vertical divider between the two buttons
     &::before {
       position: absolute;
@@ -751,20 +769,27 @@
       opacity: var(--dt-opacity-600); // soften it
       content: "";
 
-       // soften divider for muted outlined
-      .d-split-btn:has(.d-btn--outlined.d-btn--muted, .d-btn--outlined.d-btn--inverted) & {
+      // soften divider for muted outlined
+      .d-split-btn:has(.d-btn--outlined.d-btn--muted,
+      .d-btn--outlined.d-btn--inverted) & {
         opacity: var(--dt-opacity-300);
       }
 
       // hide divider line when hovering or focusing any button within the split button
-      .d-split-btn:has(:focus-visible, :hover, .d-btn--active) & {
+      .d-split-btn:has(:focus-visible,
+      :hover,
+      .d-btn--active) & {
         opacity: 0;
       }
 
       // DO NOT hide divider line for primary, outlined, or disabled buttons
       .d-split-btn:has(:disabled) &,
-      .d-split-btn:has(.d-btn--outlined:focus-visible, .d-btn--outlined:hover, .d-btn--outlined.d-btn--active) &,
-      .d-split-btn:has(.d-btn--primary:focus-visible, .d-btn--primary:hover, .d-btn--primary.d-btn--active) & {
+      .d-split-btn:has(.d-btn--outlined:focus-visible,
+      .d-btn--outlined:hover,
+      .d-btn--outlined.d-btn--active) &,
+      .d-split-btn:has(.d-btn--primary:focus-visible,
+      .d-btn--primary:hover,
+      .d-btn--primary.d-btn--active) & {
         opacity: var(--dt-opacity-600);
       }
     }
@@ -779,59 +804,51 @@
     &.d-btn--outlined::before {
       inset-block: var(--dt-size-50-negative);
     }
-  }
-
-  &__alpha:disabled:not(.d-btn--outlined),
-  &__alpha:disabled:not(.d-btn--primary),
-  &__alpha.d-btn--primary,
-  &__alpha.d-btn--outlined {
-    border-inline-end: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
 
-  &__alpha:not(.d-btn--outlined) {
-    border-inline-end: 0;
-  }
-
-  &__omega:not(.d-btn--outlined) {
-    border-inline-start: 0;
-  }
+    &:not(.d-btn--outlined) {
+      border-inline-start: 0;
+    }
 
-  &__omega:not(.d-btn--outlined, .d-btn--primary) > * {
-    // yes, I'm pushing a half-pixel over just for this variant
-    // to ensure icon is centered
-    transform: translateX(var(--dt-size-50));
-  }
+    &:not(.d-btn--outlined, .d-btn--primary) > * {
+      // yes, I'm pushing a half-pixel over just for this variant
+      // to ensure icon is centered
+      transform: translateX(var(--dt-size-50));
+    }
 
-  &__omega:disabled:not(.d-btn--outlined),
-  &__omega:disabled:not(.d-btn--primary),
-  &__omega.d-btn--primary,
-  &__omega.d-btn--outlined {
-    border-inline-start: 0;
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+    &:disabled:not(.d-btn--outlined),
+    &:disabled:not(.d-btn--primary),
+    &.d-btn--primary,
+    &.d-btn--outlined {
+      border-inline-start: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
   }
 
   // adjust x-padding for icon-only button at each size
-  &__omega--xs.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-300);
+  &__omega--xs,
+  &__end--xs {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
   }
 
-  &__omega--sm.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-300);
+  &__omega--sm,
+  &__end--sm {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
   }
 
-  &__omega--md.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-350);
+  &__omega--md,
+  &__end--md {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-350); }
   }
 
-  &__omega--lg.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-400);
+  &__omega--lg,
+  &__end--lg {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-400); }
   }
 
-  &__omega--xl.d-btn--icon-only {
-    --button-padding-x: var(--dt-size-450);
+  &__omega--xl,
+  &__end--xl {
+    &.d-btn--icon-only { --button-padding-x: var(--dt-size-450); }
   }
 }
 

package/lib/build/less/components/card.less

@@ -53,6 +53,7 @@
 //  ----------------------------------------------------------------------------
 .d-card__footer {
   display: flex;
+  gap: var(--dt-size-400);
   align-items: center;
   padding: 0 var(--dt-size-500) var(--dt-size-500);
 }

package/lib/build/less/components/codeblock.less

@@ -13,16 +13,40 @@
 
 @layer dialtone.components {
 .d-codeblock {
-    display: block;
-    padding: var(--dt-size-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);
+    margin: 0;
+    color: var(--dt-color-foreground-tertiary);
+    font: inherit;
+
+    &--bordered {
+        padding: var(--dt-size-450);
+        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);
+    }
+
+    &__code {
+        display: block;
+        font: var(--dt-text-code-sm);
+        line-height: var(--dt-text-line-height-300);
+        white-space: pre-wrap;
+        text-box-trim: trim-both;
+
+        &--xs {
+            font: var(--dt-text-code-xs);
+        }
+
+        &--sm {
+            font: var(--dt-text-code-sm);
+        }
+
+        &--md {
+            font: var(--dt-text-code-md);
+        }
+
+        &--lg {
+            font: var(--dt-text-code-lg);
+        }
+    }
 }
 }

package/lib/build/less/components/empty-state.less

@@ -16,9 +16,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  inline-size: 100%;
   padding: var(--dt-size-600);
   text-align: center;
+  inline-size: 100%;
+  margin-inline: auto;
 
   &__icon {
     color: var(--dt-color-foreground-muted);
@@ -30,7 +31,7 @@
   }
 
   &__content {
-     padding: var(--dt-size-600) 0;
+    padding: var(--dt-size-600) 0;
   }
 
   &__content--sm {
@@ -38,21 +39,22 @@
   }
 
   &__header-text {
-     text-wrap: balance;
+    text-wrap: balance;
+    max-inline-size: 52ch;
   }
 
   &__body-text {
     color: var(--dt-color-foreground-secondary);
     text-wrap: balance;
+    margin-inline: auto;
+    max-inline-size: 52ch;
   }
 
   &--size-sm {
-    inline-size: var(--dt-size-50-percent);
     padding: var(--dt-size-500);
   }
 
   &--size-md {
-    inline-size: var(--dt-size-70-percent);
     padding: var(--dt-size-500);
   }
 }

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

@@ -70,24 +70,47 @@ fieldset {
   display: flex;
   box-sizing: border-box;
   color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
+  font-size: var(--dt-font-size-150);
   font-family: inherit;
-  line-height: var(--dt-font-line-height-400);
+  line-height: var(--dt-font-line-height-300);
   fill: currentColor;
+
+  //  $$  SIZES
+  //  ----------------------------------------------------------------------------
+  &--xs,
+  &--sm {
+    font-size: var(--dt-font-size-75);
+  }
+
+  &--lg {
+    font-size: var(--dt-font-size-150);
+  }
+
+  &--xl {
+    font-size: var(--dt-font-size-200);
+  }
 }
 
 .d-label + .d-description {
   margin-block: var(--dt-size-300-negative) var(--dt-size-300);
 }
 
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-description--lg {
-  font-size: var(--dt-font-size-200);
+.d-input__label-text,
+.d-select__label-text,
+.d-input-group__legend-text {
+  display: flex;
+  flex: 1 0%;
+  align-items: baseline;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-block-end: var(--dt-size-300);
+  overflow-wrap: break-word;
 }
 
-.d-description--xl {
-  font-size: var(--dt-font-size-200);
+.d-input__label-text + .d-description,
+.d-select__label-text + .d-description,
+.d-input-group__legend-text + .d-description {
+  margin-block: var(--dt-size-300-negative) var(--dt-size-300);
 }
 
 //  ============================================================================
@@ -99,16 +122,17 @@ fieldset {
   display: flex;
   gap: var(--dt-size-300);
   align-items: flex-start;
-  margin-block-start: var(--dt-size-400);
+  margin-block-start: var(--dt-size-350);
   color: var(--validation-color-text);
   font-weight: var(--dt-font-weight-medium);
-  font-size: var(--dt-font-size-100);
+  font-size: var(--dt-font-size-125);
   font-family: inherit;
   line-height: var(--dt-font-line-height-300);
 
   // Icon Slot
   &::before {
     display: block;
+    margin-block-start: var(--dt-size-200);
     inline-size: var(--dt-size-500); // 16
     min-inline-size: var(--dt-size-500); // 16
     block-size: var(--dt-size-500); // 16

package/lib/build/less/components/keyboard-shortcut.less

@@ -19,12 +19,11 @@
   box-sizing: border-box;
   padding-inline: var(--dt-size-350);
   font: var(--dt-typography-body-sm);
-  line-height: var(--dt-font-line-height-400);
+  font-variant-numeric: tabular-nums;
   min-inline-size: 1lh;
   border: var(--dt-size-100) solid;
   border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
-  font-variant-numeric: tabular-nums;
 
   &--inverted {
     border-color: var(--dt-color-border-moderate-inverted);
@@ -61,5 +60,6 @@
       color: var(--dt-color-foreground-secondary-inverted);
     }
   }
+
 }
 }

package/lib/build/less/components/notice.less

@@ -21,7 +21,6 @@
     --notice-color-icon: var(--notice-color-text);
     --notice-color-shadow: var(--dt-color-border-subtle);
     --notice-padding: var(--dt-size-500);
-    --notice-font-size: var(--dt-font-size-200);
     --notice-line-height: var(--dt-font-line-height-300);
     --notice-border-radius: var(--dt-size-400);
     --notice-box-shadow: 0 0 0 var(--dt-size-100) var(--notice-color-shadow) inset;
@@ -29,13 +28,13 @@
     //  Base Styles
     //  ------------------------------------------------------------------------
     display: flex;
-    align-items: center;
+    align-items: start;
     box-sizing: border-box;
     inline-size: 100%;
     max-inline-size: var(--dt-size-1020);
     padding: var(--notice-padding);
     color: var(--notice-color-text);
-    font-size: var(--notice-font-size);
+    font: var(--dt-text-body-md);
     line-height: var(--notice-line-height);
     background-color: var(--notice-color-background);
     border-radius: var(--notice-border-radius);
@@ -52,6 +51,8 @@
     flex: 1 auto;
     flex-direction: column;
     margin-inline-end: var(--dt-size-500);
+    gap: var(--dt-size-300);
+    align-self: center;
 }
 
 //  $$  ACTIONS
@@ -61,6 +62,11 @@
     flex: 0 auto;
     gap: var(--dt-size-400);
     align-items: center;
+    align-self: start;
+
+    .d-banner & {
+        align-self: inherit;
+    }
 
     .d-btn {
         color: var(--notice-color-text);
@@ -72,8 +78,13 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-inline-end: var(--dt-size-450);
     color: var(--notice-color-icon);
+    margin-inline-end: var(--dt-size-450);
+    margin-block-start: var(--dt-size-200);
+
+    &--has-title {
+        margin-block-start: var(--dt-size-0);
+    }
 
     .d-banner & {
         margin-inline-end: var(--dt-size-400);
@@ -84,14 +95,15 @@
 //  $   COPY STYLES
 //  ============================================================================
 .d-notice__title {
-    font-weight: var(--dt-font-weight-bold);
-    font-size: inherit;
+    font: var(--dt-text-headline-md);
+    line-height: var(--dt-font-line-height-200);
+    text-box-trim: trim-both;
 }
 
 .d-notice__message {
-    .d-notice__title:not([hidden]) + & {
-        font-size: var(--dt-font-size-100);
-    }
+    font: var(--dt-text-body-sm);
+    text-wrap: pretty;
+    text-box-trim: trim-both;
 }
 
 //  ============================================================================

package/lib/build/less/components/scrollbar.less

@@ -1,4 +1,5 @@
-@layer dialtone.components {
+/* validate-layers: off */
+// intentionally outside @layer to win specificity over imported library overlayscrollbars.css
 .d-scrollbar {
   .os-theme-dark {
     // main color for the scrollbars handle
@@ -22,11 +23,11 @@
       opacity: var(--dt-opacity-700);
 
       &:hover {
-        opacity: var(--dt-opacity-800);
+        opacity: var(--dt-opacity-900);
       }
 
       &:active {
-        opacity: var(--dt-opacity-900);
+        opacity: var(--dt-opacity-1100);
       }
     }
   }
@@ -40,4 +41,3 @@
     display: none;
   }
 }
-}

package/lib/build/less/components/selects.less

@@ -54,7 +54,7 @@
   ._input();
 
   // select options can be styled on windows
-  & option {
+  & :where(option) {
     color: var(--dt-color-foreground-secondary);
     background-color: var(--dt-color-surface-secondary);
   }

package/lib/build/less/components/table.less

@@ -34,7 +34,7 @@
     border-spacing: 0;
 
     // Caption styles
-    .d-table__caption {
+    &__caption {
       margin-block-end: var(--dt-size-400); // 8
       color: var(--table-th-color-text);
       font-weight: var(--dt-font-weight-bold);
@@ -43,11 +43,11 @@
     }
 
     // Table Head Styles
-    thead {
+    :where(thead) {
         border-block-end: var(--dt-size-200) solid var(--table-color-border);
 
         // Column Header Styles
-        th {
+        :where(th) {
             font-size: var(--table-th-font-size);
             line-height: var(--dt-font-line-height-100);
             text-transform: uppercase;
@@ -55,38 +55,35 @@
     }
 
     // Header Styles
-    th {
+    :where(th) {
         color: var(--table-th-color-text);
         font-weight: var(--dt-font-weight-bold);
     }
 
     // Cell Styles
-    td {
+    :where(td) {
         color: var(--table-td-color-text);
     }
 
     // Header & Cell Styles
-    th,
-    td {
+    :where(th, td) {
         padding: var(--dt-size-500); // 16
         text-align: start;
         border-block-end: var(--dt-size-100) solid var(--table-color-border);
     }
 
     // Nested Table Body, First Row Styles, used internally on the Dialtone site
-    tbody + tbody tr:first-of-type {
+    :where(tbody + tbody tr:first-of-type) {
         // Header & Cell Styles
-        td,
-        th {
+        :where(td, th) {
             border-block-start: var(--dt-size-200) solid var(--table-color-border);
         }
     }
 
     // Last Table Row Styles
-    tbody tr:last-of-type {
+    :where(tbody tr:last-of-type) {
         // Header & Cell Styles
-        td,
-        th {
+        :where(td, th) {
             border-block-end-width: 0;
         }
     }
@@ -106,13 +103,13 @@
 //  ----------------------------------------------------------------------------
 .d-table--striped {
     // Row Styles
-    tr:nth-child(even) {
+    :where(tr:nth-child(even)) {
         background-color: var(--dt-color-surface-secondary-opaque);
     }
 
     &.d-table--inverted {
         // Row Styles
-        tr:nth-child(even) {
+        :where(tr:nth-child(even)) {
             background-color: oklch(from var(--dt-color-surface-primary) l c h / 0.1);
         }
     }