@dialpad/dialtone 9.142.2 → 9.144.0

package/dist/css/dialtone.css

@@ -1019,6 +1019,7 @@ template {
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
   --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
+  --avatar-presence-mask-size: calc(var(--dt-size-450) + var(--dt-size-50));
   position: relative;
   display: flex;
   color: var(--avatar-color-text);
@@ -1084,21 +1085,21 @@ template {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--avatar-size-shape);
-  height: var(--avatar-size-shape);
+  inline-size: var(--avatar-size-shape);
+  block-size: var(--avatar-size-shape);
   overflow: hidden;
   background-color: var(--avatar-color-background);
   border-radius: var(--dt-size-radius-pill);
 }
 .d-avatar__image {
-  width: var(--avatar-size-image);
-  height: var(--avatar-size-image);
+  inline-size: var(--avatar-size-image);
+  block-size: var(--avatar-size-image);
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: var(--dt-size-radius-pill);
 }
 .d-avatar--image-loaded {
-  background-color: transparent;
+  background-color: var(--dt-color-neutral-transparent);
   background-image: unset;
 }
 .d-avatar__initials {
@@ -1141,15 +1142,16 @@ template {
   background-color: var(--dt-color-surface-strong);
   border-radius: var(--dt-size-radius-pill);
   box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
+  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
 }
 .d-recipe-leftbar-row--selected .d-avatar__count,
 .d-recipe-leftbar-row__primary:hover .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-avatar--clickable {
-  --avatar-color-border: transparent;
+  --avatar-color-border: var(--dt-color-neutral-transparent);
   padding: 0;
-  background-color: transparent;
+  background-color: var(--dt-color-neutral-transparent);
   border: var(--dt-size-border-100) solid var(--avatar-color-border);
   border-radius: var(--dt-size-radius-circle);
   cursor: pointer;
@@ -1172,18 +1174,18 @@ template {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dt-size-100-percent);
-  height: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
+  block-size: var(--dt-size-100-percent);
   background-color: var(--dt-color-surface-contrast-opaque);
   border-radius: var(--dt-size-radius-circle);
   opacity: var(--dt-opacity-900);
 }
 .d-avatar__overlay-icon {
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   color: var(--dt-color-foreground-primary-inverted);
 }
 .d-avatar__overlay-text {
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   color: var(--dt-color-foreground-primary-inverted);
   font-weight: var(--dt-font-weight-bold);
   font-size: var(--dt-font-size-200);
@@ -1193,35 +1195,120 @@ template {
   --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
   --avatar-presence-position-right: var(--dt-space-300-negative);
   --avatar-presence-position-bottom: var(--dt-space-300-negative);
+  --avatar-presence-mask-offset-x: var(--dt-space-200);
+  --avatar-presence-mask-offset-y: var(--dt-space-200);
 }
 .d-avatar--sm {
   --avatar-size-shape: var(--dt-size-550);
   --avatar-size-text: var(--dt-font-size-100);
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
+  --avatar-presence-mask-offset-x: var(--dt-space-300);
+  --avatar-presence-mask-offset-y: var(--dt-space-300);
 }
 .d-avatar--md {
   --avatar-size-shape: var(--dt-size-600);
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-presence-position-right: var(--dt-space-100-negative);
   --avatar-presence-position-bottom: var(--dt-space-100-negative);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-350) - var(--dt-space-100));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-350) - var(--dt-space-100));
 }
 .d-avatar--lg {
   --avatar-size-shape: var(--dt-size-650);
   --avatar-size-text: var(--dt-font-size-300);
   --avatar-presence-position-right: var(--dt-space-100);
   --avatar-presence-position-bottom: var(--dt-space-100);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-400) - var(--dt-space-100));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-400) - var(--dt-space-100));
 }
 .d-avatar--xl {
   --avatar-size-shape: var(--dt-size-700);
   --avatar-size-text: var(--dt-font-size-400);
   --avatar-presence-position-right: var(--dt-space-300);
   --avatar-presence-position-bottom: var(--dt-space-300);
+  --avatar-presence-mask-offset-x: calc(var(--dt-space-450) - var(--dt-space-200));
+  --avatar-presence-mask-offset-y: calc(var(--dt-space-450) - var(--dt-space-200));
+}
+.d-avatar--presence > .d-avatar__canvas,
+.d-avatar--presence > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+}
+.d-avatar--presence.d-avatar--clickable {
+  border-color: var(--dt-color-neutral-transparent);
+}
+.d-avatar--presence.d-avatar--clickable::before {
+  position: absolute;
+  background-color: var(--dt-color-neutral-transparent);
+  border: var(--dt-size-border-100) solid var(--avatar-color-border);
+  border-radius: var(--dt-size-radius-circle);
+  content: "";
+  inset: calc(var(--dt-space-100) * -1);
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+}
+.d-avatar--presence > .d-presence {
+  --presence-color-border-base: var(--dt-color-neutral-transparent);
+}
+.d-recipe-leftbar-row--selected .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row:hover .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row:focus-within .d-avatar--presence .d-presence,
+.d-recipe-leftbar-row__primary:hover .d-avatar--presence .d-presence {
+  --presence-color-border-base: var(--dt-color-neutral-transparent);
 }
 .d-avatar--group {
   --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-550);
+  --avatar-count-mask-size: calc(var(--dt-size-500) + var(--dt-size-200) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-radius: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-x: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-outer-circle-y: calc(var(--dt-size-400) + var(--dt-size-100));
+  --avatar-count-mask-offset-x: var(--dt-space-100);
+  --avatar-count-mask-offset-y: var(--dt-space-100);
+  --avatar-count-mask-svg-w: calc(var(--dt-size-625) - var(--dt-size-200));
+  --avatar-count-mask-svg-h: calc(var(--dt-size-500) + var(--dt-size-200));
+  --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
+}
+.d-avatar--group.d-avatar--clickable {
+  border: none !important;
+}
+.d-avatar--group > .d-avatar__canvas,
+.d-avatar--group > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+          mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
+  will-change: transform;
+}
+.d-avatar--group-digits-2 {
+  --avatar-count-mask-offset-x: var(--dt-space-300);
+  --avatar-count-mask-offset-y: var(--dt-space-400);
+}
+.d-avatar--group-digits-2 > .d-avatar__canvas,
+.d-avatar--group-digits-2 > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+  -webkit-mask-composite: subtract;
+  mask-composite: subtract;
+  will-change: transform;
+}
+.d-avatar--group-digits-2 > .d-avatar__count {
+  inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
+}
+.d-avatar--group-digits-3 {
+  --avatar-count-mask-offset-x: var(--dt-space-300-negative);
+  --avatar-count-mask-offset-y: var(--dt-space-400);
+}
+.d-avatar--group-digits-3 > .d-avatar__canvas,
+.d-avatar--group-digits-3 > .d-avatar__overlay {
+  -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+          mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
+  -webkit-mask-composite: subtract;
+  mask-composite: subtract;
+  will-change: transform;
+}
+.d-avatar--group-digits-3 > .d-avatar__count {
+  inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
 }
 .d-badge {
   --badge-color-text: var(--dt-badge-color-foreground-default);
@@ -8341,6 +8428,47 @@ ul {
 .d-to-unset {
   text-overflow: unset !important;
 }
+[class*="d-lc-"] {
+  --lc-lines: initial;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: var(--lc-lines) !important;
+}
+.d-lc-1 {
+  --lc-lines: 1;
+}
+.d-lc-2 {
+  --lc-lines: 2;
+}
+.d-lc-3 {
+  --lc-lines: 3;
+}
+.d-lc-4 {
+  --lc-lines: 4;
+}
+.d-lc-5 {
+  --lc-lines: 5;
+}
+.d-lc-6 {
+  --lc-lines: 6;
+}
+.d-lc-7 {
+  --lc-lines: 7;
+}
+.d-lc-8 {
+  --lc-lines: 8;
+}
+.d-lc-9 {
+  --lc-lines: 9;
+}
+.d-lc-none,
+.d-lc-unset {
+  display: initial !important;
+  overflow: initial !important;
+  -webkit-box-orient: initial !important;
+  -webkit-line-clamp: initial !important;
+}
 .d-ow-normal {
   overflow-wrap: normal !important;
 }