@dialpad/dialtone 6.31.0 → 6.32.2

package/lib/dist/css/dialtone.css

@@ -1058,10 +1058,14 @@ body {
   justify-content: space-between;
 }
 .d-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.d-chip__label {
   --chip--fc: var(--fc-dark);
   --chip--bgc: var(--black-050);
   --chip--br: var(--su102);
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1072,115 +1076,250 @@ body {
   font-family: inherit;
   line-height: var(--lh4);
   background-color: var(--chip--bgc);
+  border: none;
   border-radius: var(--chip--br);
   transition-timing-function: var(--ttf-in-out);
   transition-duration: 75ms;
   transition-property: background-color;
 }
-.d-chip .d-chip-btn-holder {
+.d-chip__label:not(:only-child)::after {
   flex-shrink: 0;
   width: calc(var(--su16) + var(--su2));
   height: calc(var(--su16) + var(--su2));
+  content: '';
 }
-.d-chip .d-chip-btn-container {
-  position: absolute;
-  top: var(--su0);
-  right: var(--su0);
-  padding: var(--su2) var(--su2) var(--su2) var(--su0);
+.d-chip__label:is(a),
+.d-chip__label:is(button),
+.d-chip__label:is([role='button']),
+.d-chip__label:is([role='link']) {
+  text-decoration: none;
   cursor: pointer;
 }
-.d-chip .d-chip-btn-container .d-btn {
-  padding: calc(var(--su2) + var(--su1));
-  border-width: var(--su0);
+.d-chip__label:is(a):hover,
+.d-chip__label:is(button):hover,
+.d-chip__label:is([role='button']):hover,
+.d-chip__label:is([role='link']):hover {
+  --chip--bgc: var(--black-075);
+  text-decoration: none;
 }
-.d-chip .d-chip-btn-container:hover .d-btn {
-  --button--bgc: hsla(var(--black-800-hsl)  /  15%);
+.d-chip__label:is(a):active,
+.d-chip__label:is(button):active,
+.d-chip__label:is([role='button']):active,
+.d-chip__label:is([role='link']):active {
+  --chip--bgc: var(--black-100);
 }
-.d-chip .d-chip-btn-container:active .d-btn {
-  --button--bgc: hsla(var(--black-800-hsl)  /  25%);
+.d-chip__label:is(a).focus-visible,
+.d-chip__label:is(button).focus-visible,
+.d-chip__label:is([role='button']).focus-visible,
+.d-chip__label:is([role='link']).focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-muted);
+}
+.d-chip__label:is(a):focus-visible,
+.d-chip__label:is(button):focus-visible,
+.d-chip__label:is([role='button']):focus-visible,
+.d-chip__label:is([role='link']):focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-muted);
 }
-.d-chip .d-avatar {
+.d-chip__label .d-avatar {
   --avatar--size: var(--su24);
   margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
 }
-.d-chip .d-svg,
-.d-chip .d-btn .d-btn__icon .d-svg {
+.d-chip__label .d-svg {
   width: 1.8rem;
   height: 1.8rem;
 }
-.d-chip__icon {
-  padding-right: var(--su4);
-  line-height: 0;
-}
-.d-chip--active {
-  background-color: var(--black-100);
-}
-.d-chip--interactive {
+.d-chip__close {
+  --button--fc: var(--primary-color);
+  --button--bgc: transparent;
+  --button--bc: transparent;
+  --button--br: var(--base--corner-radius);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: calc(var(--su8) - var(--su1));
+  color: var(--button--fc);
+  font-size: var(--fs16);
+  font-family: inherit;
+  line-height: var(--lh4);
+  text-transform: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  background-color: var(--button--bgc);
+  border: 0.1rem solid var(--button--bc);
+  border-radius: var(--button--br);
+  box-shadow: var(--button--bs);
   cursor: pointer;
+  transition-timing-function: var(--ttf-in-out);
+  transition-duration: 75ms;
+  transition-property: background-color, border, box-shadow;
+  user-select: none;
+  fill: currentColor;
+  --button--fc: var(--black-800);
+  --button--br: var(--br-circle);
+  padding: calc(var(--su8) + var(--su1));
+  transition-duration: 150ms;
+  position: absolute;
+  right: var(--su2);
+  padding: calc(var(--su2) + var(--su1));
+  border-width: var(--su0);
 }
-.d-chip--interactive:hover {
-  --chip--bgc: var(--black-075);
+.d-chip__close:hover {
+  --button--fc: var(--primary-color-hover);
+  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
 }
-.d-chip--interactive.focus-visible {
+.d-chip__close:active,
+.d-chip__close.d-btn--active,
+.d-chip__close.d-btn--active:active {
+  --button--fc: var(--primary-color-hover);
+  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
+}
+.d-chip__close.focus-visible {
   outline: none;
-  box-shadow: var(--bs-focus-ring-muted);
+  box-shadow: var(--bs-focus-ring);
 }
-.d-chip--interactive:focus-visible {
+.d-chip__close:focus-visible {
   outline: none;
-  box-shadow: var(--bs-focus-ring-muted);
+  box-shadow: var(--bs-focus-ring);
+}
+.d-chip__close[disabled] {
+  color: var(--black-400);
+  background-color: var(--black-100);
+  border-color: transparent;
+  cursor: not-allowed;
+  transition: none;
+}
+.d-chip__close .d-btn__icon .d-svg {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+.d-chip__close:hover {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  3%);
+}
+.d-chip__close:active,
+.d-chip__close.d-btn--active,
+.d-chip__close.d-btn--active:active {
+  --button--fc: var(--muted-color-hover);
+  --button--bgc: hsla(var(--black-800-hsl)  /  9%);
+}
+.d-chip__close.focus-visible {
+  box-shadow: var(--bs-focus-ring-circle);
+}
+.d-chip__close:focus-visible {
+  box-shadow: var(--bs-focus-ring-circle);
+}
+.d-chip__close .d-btn__icon {
+  margin: unset;
+}
+.d-chip__close.d-btn__label {
+  display: none;
+}
+.d-chip__close.d-btn--outlined {
+  --button--bc: var(--black-700);
+}
+.d-chip__close.d-btn--xs {
+  padding: calc(var(--su8) - var(--su1));
+  --button--br: var(--br-circle);
+}
+.d-chip__close.d-btn--sm {
+  padding: var(--su8);
+  --button--br: var(--br-circle);
+}
+.d-chip__close.d-btn--lg {
+  padding: calc(var(--su12) + var(--su1));
+  --button--br: var(--br-circle);
+}
+.d-chip__close.d-btn--xl {
+  padding: calc(var(--su16) - var(--su1));
+  --button--br: var(--br-circle);
+}
+.d-chip__close::before {
+  position: absolute;
+  width: 2.6rem;
+  height: 2.8rem;
+  content: '';
+}
+.d-chip__close:hover {
+  --button--bgc: hsla(var(--black-800-hsl)  /  15%);
+}
+.d-chip__close:active {
+  --button--bgc: hsla(var(--black-800-hsl)  /  25%);
 }
-.d-chip--xs {
+.d-chip__close .d-btn__icon .d-svg {
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.d-chip__icon {
+  padding-right: var(--su4);
+  line-height: 0;
+}
+.d-chip__label--active {
+  background-color: var(--black-100);
+}
+.d-chip__label--xs {
   padding: var(--su2) var(--su6);
   font-size: var(--fs12);
 }
-.d-chip--xs .d-btn .d-btn__icon .d-svg,
-.d-chip--xs .d-svg {
+.d-chip__label--xs .d-svg {
   width: 1.4rem;
   height: 1.4rem;
 }
-.d-chip--xs .d-chip-btn-holder {
+.d-chip__label--xs::after {
+  flex-shrink: 0;
   width: var(--su12);
   height: var(--su12);
+  content: '';
 }
-.d-chip--xs .d-chip-btn-container {
-  top: calc(var(--sun1) + var(--sun2));
-  right: var(--sun2);
-  padding: var(--su4);
-}
-.d-chip--xs .d-chip-btn-container .d-btn {
-  padding: var(--su1);
-}
-.d-chip--xs .d-avatar {
+.d-chip__label--xs .d-avatar {
   --avatar--size: var(--su16);
   margin-right: var(--su4);
   margin-left: var(--sun4);
 }
-.d-chip--sm {
+.d-chip__close--xs {
+  padding: var(--su1);
+}
+.d-chip__close--xs::before {
+  width: var(--su24);
+  height: var(--su24);
+}
+.d-chip__close--xs .d-btn__icon .d-svg {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+.d-chip__label--sm {
   padding: var(--su2) var(--su8);
   font-size: var(--fs16);
 }
-.d-chip--sm .d-btn .d-btn__icon .d-svg,
-.d-chip--sm .d-svg {
+.d-chip__label--sm .d-svg {
   width: 1.6rem;
   height: 1.6rem;
 }
-.d-chip--sm .d-chip-btn-holder {
+.d-chip__label--sm::after {
+  flex-shrink: 0;
   width: calc(var(--su12) + var(--su2));
   height: calc(var(--su12) + var(--su2));
+  content: '';
 }
-.d-chip--sm .d-chip-btn-container {
-  top: var(--sun1);
-  right: var(--su0);
-  padding: var(--su2);
-}
-.d-chip--sm .d-chip-btn-container .d-btn {
-  padding: var(--su2);
-}
-.d-chip--sm .d-avatar {
+.d-chip__label--sm .d-avatar {
   --avatar--size: calc(var(--su24) - var(--su4));
   margin-right: var(--su4);
   margin-left: var(--sun6);
 }
+.d-chip__close--sm {
+  padding: var(--su2);
+}
+.d-chip__close--sm::before {
+  width: var(--su24);
+  height: var(--su24);
+}
+.d-chip__close--sm .d-btn__icon .d-svg {
+  width: 1.6rem;
+  height: 1.6rem;
+}
 fieldset {
   min-width: var(--su0);
   padding: var(--su0);
@@ -18668,73 +18807,73 @@ body.theme-dark .d\:d-bgg-to-0 {
   font-style: normal;
   font-weight: 400;
   font-family: 'Inter';
-  src: url("../../fonts/Inter-Regular.woff2") format("woff2");
+  src: url("../fonts/Inter-Regular.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 700;
   font-family: 'Inter';
-  src: url("../../fonts/Inter-Bold.woff2") format("woff2");
+  src: url("../fonts/Inter-Bold.woff2") format("woff2");
 }
 @font-face {
   font-style: italic;
   font-weight: 400;
   font-family: 'Inter';
-  src: url("../../fonts/Inter-Italic.woff2") format("woff2");
+  src: url("../fonts/Inter-Italic.woff2") format("woff2");
 }
 @font-face {
   font-style: italic;
   font-weight: 700;
   font-family: 'Inter';
-  src: url("../../fonts/Inter-BoldItalic.woff2") format("woff2");
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 400;
   font-family: 'RobotoMono';
-  src: url("../../fonts/RobotoMono-Regular.woff2") format("woff2");
+  src: url("../fonts/RobotoMono-Regular.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 700;
   font-family: 'RobotoMono';
-  src: url("../../fonts/RobotoMono-Bold.woff2") format("woff2");
+  src: url("../fonts/RobotoMono-Bold.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 400;
   font-family: 'Archivo';
-  src: url("../../fonts/Archivo-Regular.woff2") format("woff2");
+  src: url("../fonts/Archivo-Regular.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 600;
   font-family: 'Archivo';
-  src: url("../../fonts/Archivo-SemiBold.woff2") format("woff2");
+  src: url("../fonts/Archivo-SemiBold.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 700;
   font-family: 'Archivo';
-  src: url("../../fonts/Archivo-Bold.woff2") format("woff2");
+  src: url("../fonts/Archivo-Bold.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 500;
   font-family: 'ArchivoSemiExpanded';
-  src: url("../../fonts/ArchivoSemiExpanded-Medium.woff2") format("woff2");
+  src: url("../fonts/ArchivoSemiExpanded-Medium.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 600;
   font-family: 'ArchivoSemiExpanded';
-  src: url("../../fonts/ArchivoSemiExpanded-SemiBold.woff2") format("woff2");
+  src: url("../fonts/ArchivoSemiExpanded-SemiBold.woff2") format("woff2");
 }
 @font-face {
   font-style: normal;
   font-weight: 600;
   font-family: 'ArchivoExpanded';
-  src: url("../../fonts/ArchivoExpanded-SemiBold.woff2") format("woff2");
+  src: url("../fonts/ArchivoExpanded-SemiBold.woff2") format("woff2");
 }
 .d-ff-custom {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
@@ -19098,6 +19237,7 @@ body {
   color: var(--base--text-color);
   font-size: var(--base--font-size);
   font-family: var(--base--font-family);
+  font-feature-settings: var(--base--font-feature-settings);
   line-height: var(--base--line-height);
   background-color: var(--base--background-color);
   font-kerning: normal;
@@ -19612,6 +19752,7 @@ body {
   --topbar-height: var(--su64);
   --base--font-size: var(--fs16);
   --base--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --base--font-feature-settings: 'calt' 0;
   --base--line-height: var(--lh-normal);
   --base--corner-radius: 0.25em;
 }