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

package/lib/dist/dialtone.css

@@ -2125,6 +2125,10 @@
   .d-btn__icon {
     display: flex;
   }
+  :where(.d-btn--disabled) .d-btn__icon,
+  :where(.d-btn:disabled) .d-btn__icon {
+    opacity: var(--dt-opacity-600);
+  }
   .d-btn__icon--left,
   .d-btn__icon--top {
     order: -1;
@@ -2550,6 +2554,7 @@
   }
   .d-btn-group {
     display: flex;
+    gap: var(--dt-spacing-100);
   }
   .d-btn-group--start {
     justify-content: flex-start;
@@ -4069,6 +4074,10 @@
     display: inline-flex;
     align-items: center;
   }
+  :where(.d-input__root:has(.d-input:disabled)) .d-input-icon {
+    opacity: var(--dt-opacity-700);
+    pointer-events: none;
+  }
   .d-input-icon--right:not(:empty) {
     -webkit-margin-end: var(--dt-size-400);
             margin-inline-end: var(--dt-size-400);
@@ -4082,6 +4091,72 @@
             margin-inline-start: var(--dt-size-400);
   }
 }
+@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);
+  }
+  .d-segmented-control--borderless {
+    padding: 0;
+    border: 0;
+  }
+  .d-segmented-control--spread-evenly > .d-segmented-control__item {
+    flex: 1;
+  }
+  .d-segmented-control--xs {
+    --padding-segmented-control: var(--dt-size-100);
+    --radius-segmented-control-item: var(--dt-button-size-radius-xs);
+  }
+  .d-segmented-control--sm {
+    --padding-segmented-control: var(--dt-size-200);
+    --radius-segmented-control-item: var(--dt-button-size-radius-sm);
+  }
+  .d-segmented-control--md {
+    --padding-segmented-control: var(--dt-size-200);
+    --radius-segmented-control-item: var(--dt-button-size-radius-md);
+  }
+  .d-segmented-control--lg {
+    --padding-segmented-control: var(--dt-size-300);
+    --radius-segmented-control-item: var(--dt-button-size-radius-lg);
+  }
+  .d-segmented-control--xl {
+    --padding-segmented-control: var(--dt-size-300);
+    --radius-segmented-control-item: var(--dt-button-size-radius-xl);
+  }
+  .d-segmented-control__item {
+    flex: 1 1 auto;
+    border-radius: var(--radius-segmented-control-item);
+  }
+  .d-segmented-control:where(:not(.d-segmented-control--hide-divider)) > :where(.d-segmented-control__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: '';
+  }
+  .d-segmented-control:where(:not(.d-segmented-control--vertical)) > :where(.d-segmented-control__item:not(:first-child))::before {
+    inline-size: var(--dt-size-border-100);
+    /* 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) * 0.5) * -1) - 1.5px);
+  }
+  .d-segmented-control:where(.d-segmented-control--vertical) > :where(.d-segmented-control__item:not(:first-child))::before {
+    block-size: var(--dt-size-border-100);
+    inline-size: auto;
+    /* stylelint-disable-next-line meowtec/no-px */
+    inset: calc(calc(calc(var(--padding-segmented-control) * 0.5) * -1) - 1.5px) calc(var(--radius-segmented-control-item) / 2) auto;
+  }
+  .d-segmented-control > :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;
+  }
+  .d-segmented-control__item-label {
+    flex: 0 0 auto;
+  }
+}
 @layer dialtone.components {
   .d-select {
     --select-color-border: var(--dt-inputs-color-border-default);
@@ -4475,19 +4550,6 @@
     align-items: center;
     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 {
     --tooltip-color-background: var(--dt-color-surface-contrast);
     --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
@@ -4682,6 +4744,19 @@
     inset-block-end: var(--dt-size-400);
   }
 }
+.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;
+}
 @layer dialtone.components {
   .d-card {
     display: flex;
@@ -4834,7 +4909,7 @@
     -webkit-border-before: var(--dt-size-100) solid var(--dt-color-border-default);
             border-block-start: var(--dt-size-100) solid var(--dt-color-border-default);
   }
-  .d-list-item :focus-visible {
+  .d-list-item:focus-visible {
     outline: none;
     box-shadow: var(--dt-shadow-focus);
   }
@@ -5573,7 +5648,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);
@@ -6240,6 +6314,17 @@
     inline-size: var(--dt-size-border-100);
     inset-block: 1px;
   }
+  .d-tablist--spread-grow,
+  .d-tablist--spread-equal {
+    flex-wrap: nowrap;
+  }
+  .d-tablist--spread-grow > :where(.d-tablist__item) {
+    flex: 1 1 auto;
+  }
+  .d-tablist--spread-equal > :where(.d-tablist__item) {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
   .d-tablist--inverted {
     --tab-color-text: var(--dt-action-color-foreground-inverted-default);
     --tab-color-text-hover: var(--dt-action-color-foreground-inverted-hover);
@@ -6415,17 +6500,15 @@
   }
   .d-emoji-picker__tabset-list {
     gap: var(--dt-size-0);
-    justify-content: space-between;
   }
   .d-emoji-picker__tabset-list::after {
     background-color: var(--dt-color-surface-moderate) !important;
   }
-  .d-emoji-picker__tabset-list .d-tab {
-    --tab-padding-y: var(--dt-size-400);
-    --tab-padding-x: var(--dt-size-300);
-    flex-grow: 1;
+  .d-emoji-picker__tabset-list .d-tablist__item {
+    --button-padding-y: var(--dt-size-350);
+    --button-padding-x: var(--dt-size-100);
   }
-  .d-emoji-picker__tabset-list .d-tab.d-tab--selected::after {
+  .d-emoji-picker__tabset-list .d-tablist__item.d-tab--selected::after {
     block-size: var(--dt-size-border-200);
   }
   .d-emoji-picker__skin-list {
@@ -6573,51 +6656,72 @@
     display: inline-flex;
     gap: 0;
   }
-  .d-filter-pill__primary--has-clear {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
+  .d-filter-pill--read-only {
+    --filter-pill-color-background-selected-hover: transparent;
+    --dt-action-color-background-base-active: transparent;
+  }
+  .d-filter-pill--read-only :where(.d-btn) {
+    color: var(--dt-action-color-foreground-base-default);
+  }
+  .d-filter-pill--read-only :where(.d-btn--muted) {
+    color: var(--dt-action-color-foreground-muted-default);
+    background-color: transparent;
+  }
+  .d-filter-pill--read-only * {
+    cursor: not-allowed;
   }
-  .d-filter-pill__primary--selected:not(:disabled):hover {
+  .d-filter-pill--selected:not(:disabled):hover,
+  .d-filter-pill__clear--selected:not(:disabled):hover {
     background-color: var(--filter-pill-color-background-selected-hover);
   }
-  .d-filter-pill__primary--selected:not(:disabled):active {
+  .d-filter-pill--selected:not(:disabled):active,
+  .d-filter-pill__clear--selected:not(:disabled):active {
     background-color: var(--dt-action-color-background-base-active);
   }
+  :where(.d-filter-pill:has(.d-filter-pill__clear)) .d-filter-pill__primary {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
   .d-filter-pill__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);
   }
-  .d-filter-pill__label-alpha {
-    flex: 1;
+  .d-filter-pill__label-start {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    max-inline-size: 20ch;
   }
-  .d-filter-pill__label-omega {
-    display: flex;
-    gap: var(--dt-size-300);
+  .d-filter-pill__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;
   }
-  .d-filter-pill__label-omega::before {
+  .d-filter-pill__label-end::before {
     content: "=";
+    -webkit-margin-end: var(--dt-size-300);
+            margin-inline-end: var(--dt-size-300);
+  }
+  .d-filter-pill__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;
   }
   .d-filter-pill__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;
   }
-  .d-filter-pill__clear--selected:not(:disabled):hover {
-    background-color: var(--filter-pill-color-background-selected-hover);
-  }
-  .d-filter-pill__clear--selected:not(:disabled):active {
-    background-color: var(--dt-action-color-background-base-active);
-  }
 }
 @layer dialtone.components {
   @property --d-motion-text-mask-pos {
@@ -10321,6 +10425,7 @@
   .d-vi-unset {
     visibility: unset !important;
   }
+  .sr-only,
   .d-vi-visible-sr {
     position: absolute;
     inline-size: var(--dt-size-100);
@@ -11182,6 +11287,9 @@
   .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;
   }