@dialpad/dialtone 6.17.0 → 6.19.0-beta.2

package/lib/dist/css/dialtone.css

@@ -1566,6 +1566,28 @@ legend .d-label {
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
+.d-modal--transparent {
+  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
 .d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
@@ -1590,7 +1612,9 @@ legend .d-label {
   margin-top: 1.6rem !important;
 }
 .d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;
@@ -1944,6 +1968,68 @@ legend .d-label {
   --notice--bgc: var(--yellow-400);
   --notice--fc: var(--fc-dark);
 }
+.d-popover__dialog {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: auto;
+  background-color: var(--white);
+  border-color: var(--black-100);
+  border-radius: var(--su8);
+  box-shadow: var(--bs-card);
+}
+.d-popover__dialog,
+.d-popover__dialog *,
+.d-popover__dialog *::before,
+.d-popover__dialog *::after {
+  box-sizing: border-box;
+}
+.d-popover__dialog--modal {
+  z-index: var(--zi-modal-element);
+}
+.d-popover__anchor--modal-opened * {
+  z-index: 650;
+}
+.d-popover__content {
+  overflow: auto;
+}
+.d-popover__header-footer-base {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: var(--size48);
+  padding-top: var(--su6);
+  padding-bottom: var(--su6);
+  overflow: auto;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs16);
+}
+.d-popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: var(--size48);
+  padding-top: var(--su6);
+  padding-bottom: var(--su6);
+  overflow: auto;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs16);
+  border-bottom: var(--su1) solid var(--black-075);
+}
+.d-popover__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: var(--size48);
+  padding-top: var(--su6);
+  padding-bottom: var(--su6);
+  overflow: auto;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs16);
+  border-top: var(--su1) solid var(--black-075);
+}
 .d-checkbox,
 .d-radio {
   --check-radio--color: var(--primary-color);
@@ -2634,12 +2720,18 @@ legend .d-label {
   opacity: 1;
   transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms;
 }
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--bottom,
+.d-tooltip__arrow-tippy--bottom-end,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
   top: calc(100% + var(--su12));
   transform: translateY(var(--su16));
 }
+.d-tooltip__arrow-tippy--bottom-start::after,
+.d-tooltip__arrow-tippy--bottom::after,
+.d-tooltip__arrow-tippy--bottom-end::after,
 .d-tooltip__arrow--top-left::after,
 .d-tooltip__arrow--top-center::after,
 .d-tooltip__arrow--top-right::after {
@@ -2647,12 +2739,18 @@ legend .d-label {
   border-top-width: 0;
   border-bottom-color: var(--tooltip--bgc);
 }
+.d-tooltip__arrow-tippy--top-start,
+.d-tooltip__arrow-tippy--top,
+.d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
   bottom: calc(100% + var(--su12));
   transform: translateY(var(--sun16));
 }
+.d-tooltip__arrow-tippy--top-start::after,
+.d-tooltip__arrow-tippy--top::after,
+.d-tooltip__arrow-tippy--top-end::after,
 .d-tooltip__arrow--bottom-left::after,
 .d-tooltip__arrow--bottom-center::after,
 .d-tooltip__arrow--bottom-right::after {
@@ -2660,33 +2758,49 @@ legend .d-label {
   border-top-color: var(--tooltip--bgc);
   border-bottom-width: 0;
 }
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
   left: var(--sun2);
 }
+.d-tooltip__arrow-tippy--bottom-start::after,
+.d-tooltip__arrow-tippy--top-start::after,
 .d-tooltip__arrow--top-left::after,
 .d-tooltip__arrow--bottom-left::after {
   left: var(--su16);
 }
+.d-tooltip__arrow-tippy--bottom::after,
+.d-tooltip__arrow-tippy--top::after,
 .d-tooltip__arrow--top-center::after,
 .d-tooltip__arrow--bottom-center::after {
   left: 50%;
   margin-left: var(--sun6);
 }
+.d-tooltip__arrow-tippy--bottom-end,
+.d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
   right: var(--sun2);
 }
+.d-tooltip__arrow-tippy--bottom-end::after,
+.d-tooltip__arrow-tippy--top-end::after,
 .d-tooltip__arrow--top-right::after,
 .d-tooltip__arrow--bottom-right::after {
   right: var(--su16);
 }
+.d-tooltip__arrow-tippy--left-start,
+.d-tooltip__arrow-tippy--left,
+.d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
   right: calc(100% + var(--su12));
   transform: translateX(var(--sun16));
 }
+.d-tooltip__arrow-tippy--left-start::after,
+.d-tooltip__arrow-tippy--left::after,
+.d-tooltip__arrow-tippy--left-end::after,
 .d-tooltip__arrow--right-top::after,
 .d-tooltip__arrow--right-center::after,
 .d-tooltip__arrow--right-bottom::after {
@@ -2694,12 +2808,18 @@ legend .d-label {
   border-right-width: 0;
   border-left-color: var(--tooltip--bgc);
 }
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--right,
+.d-tooltip__arrow-tippy--right-end,
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
   left: calc(100% + var(--su12));
   transform: translateX(var(--su16));
 }
+.d-tooltip__arrow-tippy--right-start::after,
+.d-tooltip__arrow-tippy--right::after,
+.d-tooltip__arrow-tippy--right-end::after,
 .d-tooltip__arrow--left-top::after,
 .d-tooltip__arrow--left-center::after,
 .d-tooltip__arrow--left-bottom::after {
@@ -2707,23 +2827,33 @@ legend .d-label {
   border-right-color: var(--tooltip--bgc);
   border-left-width: 0;
 }
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
   top: var(--sun1);
 }
+.d-tooltip__arrow-tippy--right-start::after,
+.d-tooltip__arrow-tippy--left-start::after,
 .d-tooltip__arrow--right-top::after,
 .d-tooltip__arrow--left-top::after {
   top: var(--su8);
 }
+.d-tooltip__arrow-tippy--right::after,
+.d-tooltip__arrow-tippy--left::after,
 .d-tooltip__arrow--right-center::after,
 .d-tooltip__arrow--left-center::after {
   top: 50%;
   margin-top: var(--sun6);
 }
+.d-tooltip__arrow-tippy--right-end,
+.d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
   bottom: var(--sun1);
 }
+.d-tooltip__arrow-tippy--right-end::after,
+.d-tooltip__arrow-tippy--left-end::after,
 .d-tooltip__arrow--right-bottom::after,
 .d-tooltip__arrow--left-bottom::after {
   bottom: var(--su8);
@@ -6231,7 +6361,7 @@ body.theme-dark .d\:d-bgg-to-red-700 {
   -webkit-background-clip: text !important;
   background-clip: text !important;
 }
-.d-bgc-unset {
+.d-bgclip-unset {
   background-clip: unset !important;
 }
 .d-bgp-t {
@@ -12615,27 +12745,22 @@ body.theme-dark .d\:d-bgc-red-700 {
   background-image: unset !important;
 }
 .h\:d-bgc-unset:hover {
-  background-clip: unset !important;
   background-color: unset !important;
   background-image: unset !important;
 }
 .f\:d-bgc-unset:focus {
-  background-clip: unset !important;
   background-color: unset !important;
   background-image: unset !important;
 }
 .f\:d-bgc-unset:focus-within {
-  background-clip: unset !important;
   background-color: unset !important;
   background-image: unset !important;
 }
 .fv\:d-bgc-unset.focus-visible {
-  background-clip: unset !important;
   background-color: unset !important;
   background-image: unset !important;
 }
 .fv\:d-bgc-unset:focus-visible {
-  background-clip: unset !important;
   background-color: unset !important;
   background-image: unset !important;
 }
@@ -16436,6 +16561,9 @@ body.theme-dark .d\:d-bgg-to-0 {
 .d-zi-modal {
   z-index: var(--zi-modal) !important;
 }
+.d-zi-modal-element {
+  z-index: var(--zi-modal-element) !important;
+}
 .d-zi-notification {
   z-index: var(--zi-notification) !important;
 }
@@ -19226,6 +19354,7 @@ body {
   --zi-tooltip: 400;
   --zi-drawer: 500;
   --zi-modal: 600;
+  --zi-modal-element: 650;
   --zi-notification: 700;
   --focus-ring: hsla(var(--primary-color-hsl)  /  75%);
   --focus-ring-success: hsla(var(--success-color-hsl)  /  75%);
@@ -19896,6 +20025,28 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
+.sm\:d-modal--transparent {
+  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
 .sm\:d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
@@ -19920,7 +20071,9 @@ body.theme-dark {
   margin-top: 1.6rem !important;
 }
 .sm\:d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;
@@ -21008,6 +21161,28 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
+.md\:d-modal--transparent {
+  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
 .md\:d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
@@ -21032,7 +21207,9 @@ body.theme-dark {
   margin-top: 1.6rem !important;
 }
 .md\:d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;
@@ -22120,6 +22297,28 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
+.lg\:d-modal--transparent {
+  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
 .lg\:d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
@@ -22144,7 +22343,9 @@ body.theme-dark {
   margin-top: 1.6rem !important;
 }
 .lg\:d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;
@@ -23232,6 +23433,28 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity;
 }
+.xl\:d-modal--transparent {
+  --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
 .xl\:d-modal__dialog {
   position: relative;
   z-index: var(--zi-hide);
@@ -23256,7 +23479,9 @@ body.theme-dark {
   margin-top: 1.6rem !important;
 }
 .xl\:d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;