@dialpad/dialtone-css 8.76.0-next.1 → 8.76.0-next.2

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

@@ -319,11 +319,10 @@
 
 .d-btn__icon {
   display: flex;
-  // background-color: rgba(0,0,0,.5);
 
-  .d-icon {
-    // outline: 1px solid red;
-    // opacity: 0;
+  :where(.d-btn--disabled) & ,
+  :where(.d-btn:disabled)  & {
+    opacity: var(--dt-opacity-600);
   }
 }
 
@@ -860,6 +859,7 @@
 
 .d-btn-group {
   display: flex;
+  gap: var(--dt-spacing-100);
 
   &--start {
     justify-content: flex-start;

package/lib/build/less/components/emoji-picker.less

@@ -60,17 +60,14 @@
 
   &__tabset-list {
       gap: var(--dt-size-0);
-      justify-content: space-between;
 
       &::after {
         background-color: var(--dt-color-surface-moderate) !important;
       }
 
-      .d-tab {
-        --tab-padding-y: var(--dt-size-400);
-        --tab-padding-x: var(--dt-size-300);
-
-        flex-grow: 1;
+      .d-tablist__item {
+        --button-padding-y: var(--dt-size-350);
+        --button-padding-x: var(--dt-size-100);
 
         &.d-tab--selected {
           &::after {

package/lib/build/less/components/filter-pill.less

@@ -17,66 +17,89 @@
   display: inline-flex;
   gap: 0;
 
-  &__primary {
-    &--has-clear {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
+  &--read-only {
+    --filter-pill-color-background-selected-hover: transparent;
+    --dt-action-color-background-base-active: transparent;
+
+
+    :where(.d-btn) {
+      color: var(--dt-action-color-foreground-base-default);
+    }
+
+    :where(.d-btn--muted) {
+      color: var(--dt-action-color-foreground-muted-default);
+      background-color: transparent;
+    }
+
+    & * {
+      cursor: not-allowed;
+    }
+  }
+
+
+  &--selected:not(:disabled),
+  &__clear--selected:not(:disabled) {
+    &:hover {
+      background-color: var(--filter-pill-color-background-selected-hover);
     }
 
-    &--selected:not(:disabled) {
-      &:hover {
-        background-color: var(--filter-pill-color-background-selected-hover);
-      }
+    &:active {
+      background-color: var(--dt-action-color-background-base-active);
+    }
+  }
 
-      &:active {
-        background-color: var(--dt-action-color-background-base-active);
-      }
+  &__primary {
+    :where(.d-filter-pill:has(.d-filter-pill__clear)) & {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
   }
 
   &__label {
     display: flex;
     gap: var(--dt-size-300);
-    max-inline-size: var(--dt-size-875);
+    align-items: baseline;
     font-weight: var(--dt-font-weight-normal);
   }
 
-  &__label-alpha {
-    flex: 1;
+  &__label-start {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    max-inline-size: 20ch;
   }
 
-  &__label-omega {
-    display: flex;
-    gap: var(--dt-size-300);
+  &__label-end {
     align-items: center;
-    font-weight: var(--dt-font-weight-bold);
-    letter-spacing: var(--dt-size-50-negative);
+    overflow: hidden;
+    font-weight: var(--dt-font-weight-semi-bold);
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-variant-numeric: tabular-nums;
+    max-inline-size: 20ch;
 
     &::before {
       content: "=";
+      margin-inline-end: var(--dt-size-300);
     }
   }
 
+  &__label-end-overflow {
+    align-items: center;
+    overflow: hidden;
+    font-weight: var(--dt-font-weight-bold);
+    letter-spacing: var(--dt-size-100);
+    font-variant-numeric: tabular-nums;
+  }
+
   &__clear {
     --button-padding-x: var(--dt-size-350) !important;
+    --button-padding-y: var(--dt-size-0) !important;
 
     border-inline-start-width: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 
-    &--selected:not(:disabled) {
-      &:hover {
-        background-color: var(--filter-pill-color-background-selected-hover);
-      }
-
-      &:active {
-        background-color: var(--dt-action-color-background-base-active);
-      }
-    }
   }
 }
 }

package/lib/build/less/components/input.less

@@ -309,6 +309,11 @@
         align-items: center;
     }
 
+    :where(.d-input__root:has(.d-input:disabled)) & {
+        opacity: var(--dt-opacity-700);
+        pointer-events: none;
+    }
+
     &--right:not(:empty) {
         margin-inline-end: var(--dt-size-400);
 

package/lib/build/less/components/list-item.less

@@ -28,7 +28,7 @@
     border-block-start: var(--dt-size-100) solid var(--dt-color-border-default);
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }

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

@@ -72,7 +72,6 @@
     align-items: center;
     justify-content: flex-end;
     inline-size: 100%;
-    min-block-size: var(--dt-size-650);
     padding-block: var(--dt-size-350) var(--dt-size-350);
     overflow: auto;
     font-weight: var(--dt-font-weight-semi-bold);

package/lib/build/less/components/segmented-control.less

@@ -0,0 +1,116 @@
+//
+//  DIALTONE
+//  COMPONENTS: SEGMENTED CONTROL
+//
+//  These are the styles for segmented-control component.
+//
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+
+//  @@  BASE STYLE
+//  ----------------------------------------------------------------------------
+@layer dialtone.components {
+.d-segmented-control {
+  --padding-segmented-control: var(--dt-size-200);
+  --radius-segmented-control-item: var(--dt-button-size-radius-md);
+  --radius-segmented-control: calc(var(--radius-segmented-control-item) + var(--padding-segmented-control));
+
+  gap: var(--padding-segmented-control);
+  padding: var(--padding-segmented-control);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+  border-radius: var(--radius-segmented-control);
+
+  &--vertical {
+    // hold
+  }
+
+  &--borderless {
+    padding: 0;
+    border: 0;
+  }
+
+  &--spread-evenly {
+    > .d-segmented-control__item {
+      flex: 1;
+    }
+  }
+
+  &--xs {
+    --padding-segmented-control: var(--dt-size-100);
+    --radius-segmented-control-item: var(--dt-button-size-radius-xs);
+  }
+
+  &--sm {
+    --padding-segmented-control: var(--dt-size-200);
+    --radius-segmented-control-item: var(--dt-button-size-radius-sm);
+  }
+
+  &--md {
+    --padding-segmented-control: var(--dt-size-200);
+    --radius-segmented-control-item: var(--dt-button-size-radius-md);
+  }
+
+  &--lg {
+    --padding-segmented-control: var(--dt-size-300);
+    --radius-segmented-control-item: var(--dt-button-size-radius-lg);
+  }
+
+  &--xl {
+    --padding-segmented-control: var(--dt-size-300);
+    --radius-segmented-control-item: var(--dt-button-size-radius-xl);
+  }
+
+  &__item {
+    flex: 1 1 auto;
+    border-radius: var(--radius-segmented-control-item);
+  }
+
+  //  --  DIVIDERS
+  //  Base styles shared by both orientations
+  &:where(:not(&--hide-divider)) > :where(&__item:not(:first-child))::before {
+    position: absolute;
+    background-color: var(--dt-color-border-subtle);
+    border-radius: var(--radius-segmented-control-item);
+    opacity: var(--dt-opacity-1100);
+    content: '';
+  }
+
+  //  Horizontal divider positioning
+  &:where(:not(&--vertical)) > :where(&__item:not(:first-child))::before {
+    inline-size: var(--dt-size-border-100);
+    // top/bottom: inset by half the item's border-radius
+    // left: positioned in the gap between items — half the padding (gap) negated, minus half the divider's own width
+    /* stylelint-disable-next-line meowtec/no-px */
+    inset:
+      calc(var(--radius-segmented-control-item) / 2)
+      auto
+      calc(var(--radius-segmented-control-item) / 2)
+      calc(calc(calc(var(--padding-segmented-control) * .5) * -1) - 1.5px)
+    ;
+  }
+
+  //  Vertical divider positioning
+  &:where(&--vertical) > :where(&__item:not(:first-child))::before {
+    block-size: var(--dt-size-border-100);
+    inline-size: auto;
+    // top: positioned in the gap between items — half the padding (gap) negated, minus half the divider's own height
+    // right/left: inset by half the item's border-radius so the divider doesn't extend into rounded corners
+    /* stylelint-disable-next-line meowtec/no-px */
+    inset:
+      calc(calc(calc(var(--padding-segmented-control) * .5) * -1) - 1.5px) calc(var(--radius-segmented-control-item) / 2) auto;
+  }
+
+  //  Hide divider on/after active, hovered, or focused items (both orientations)
+  & > :where(
+    .d-segmented-control__item:is(.d-btn--active, :hover, :focus-visible),
+    :is(.d-btn--active, :hover, :focus-visible) + .d-segmented-control__item
+  )::before {
+    opacity: 0;
+  }
+
+  &__item-label {
+    flex: 0 0 auto;
+  }
+}
+}

package/lib/build/less/components/tabs.less

@@ -154,6 +154,27 @@
         }
     }
 
+    //  Spread — shared
+    &--spread-grow,
+    &--spread-equal {
+        flex-wrap: nowrap;
+    }
+
+    //  Spread grow — tabs grow proportionally to fill space
+    &--spread-grow {
+        > :where(.d-tablist__item) {
+            flex: 1 1 auto;
+        }
+    }
+
+    //  Spread equal — all tabs are the same width
+    &--spread-equal {
+        > :where(.d-tablist__item) {
+            flex: 1 1 0;
+            min-inline-size: 0;
+        }
+    }
+
     //  Inverted
     &--inverted {
         --tab-color-text: var(--dt-action-color-foreground-inverted-default);

package/lib/build/less/components/tooltip.less

@@ -38,23 +38,6 @@
   justify-content: center;
 }
 
-.tippy-box[data-reference-hidden] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.tippy-box > .tippy-svg-arrow {
-  fill: var(--dt-color-surface-contrast);
-}
-
-.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
-  fill: var(--dt-color-surface-contrast-inverted);
-}
-
-.tippy-box[data-animation='fade'][data-state='hidden'] {
-  opacity: 0;
-}
-
 .d-tooltip {
   //  --  COMPONENT CSS VARS
   //  -----------------------
@@ -288,3 +271,20 @@ inset-block-end: var(--dt-size-100-negative); // -1
 }
 }
 }
+
+.tippy-box[data-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.tippy-box > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast);
+}
+
+.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast-inverted);
+}
+
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}

package/lib/build/less/dialtone.less

@@ -39,6 +39,7 @@
 @import 'components/description-list';
 @import 'components/empty-state';
 @import 'components/input';
+@import 'components/segmented-control';
 @import 'components/selects';
 @import 'components/image-viewer';
 @import 'components/forms';

package/lib/build/less/utilities/layout.less

@@ -114,6 +114,7 @@
 .d-vi-hidden { visibility: hidden !important; }
 .d-vi-unset { visibility: unset !important; }
 
+.sr-only,
 .d-vi-visible-sr {
   position: absolute;
   inline-size: var(--dt-size-100);

package/lib/build/less/utilities/typography.less

@@ -256,6 +256,7 @@ ul {
 .d-fs-350 { font-size: var(--dt-font-size-350) !important; }
 .d-fs-400 { font-size: var(--dt-font-size-400) !important; }
 .d-fs-500 { font-size: var(--dt-font-size-500) !important; }
+.d-fs-inherit { font-size: inherit !important; }
 
 .d-fs-100-mobile { font-size: var(--dt-font-size-100-mobile) !important; }
 .d-fs-200-mobile { font-size: var(--dt-font-size-200-mobile) !important; }