@dataemergencia/emergency 0.5.0 → 0.6.1

package/dist/styles.css

@@ -127,6 +127,10 @@
   transform: translateY(100%);
 }
 
+.de-emergency-emergency-panel-nA5Hwa:has(.de-emergency-emergency-panel__body--primary-nA5Hwa) {
+  grid-template-rows: 0 1fr auto;
+}
+
 .de-emergency-emergency-panel__header-nA5Hwa {
   text-align: center;
   width: 100%;
@@ -141,12 +145,6 @@
   display: flex;
 }
 
-.de-emergency-emergency-panel__header--close-only-nA5Hwa {
-  color: var(--de-emergency-text, #3d4461);
-  background: none;
-  justify-content: flex-end;
-}
-
 .de-emergency-emergency-panel__title-nA5Hwa {
   flex: 1;
   margin: 0;
@@ -178,6 +176,14 @@
   outline: 2px solid;
 }
 
+.de-emergency-emergency-panel__close-button--prompt-nA5Hwa {
+  z-index: 1;
+  color: var(--de-emergency-red, red);
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
 .de-emergency-emergency-panel__close-icon-nA5Hwa {
   width: 1.25rem;
   height: 1.25rem;
@@ -198,7 +204,12 @@
   overflow-y: auto;
 }
 
-.de-emergency-emergency-panel__body--pricing-nA5Hwa, .de-emergency-emergency-panel__body--pre-emergency-nA5Hwa {
+.de-emergency-emergency-panel__body--primary-nA5Hwa {
+  gap: 0;
+  padding: 0;
+}
+
+.de-emergency-emergency-panel__body--pricing-nA5Hwa, .de-emergency-emergency-panel__body--pre-emergency-nA5Hwa, .de-emergency-emergency-panel__body--details-nA5Hwa, .de-emergency-emergency-panel__body--history-nA5Hwa, .de-emergency-emergency-panel__body--message-detail-nA5Hwa {
   text-align: start;
   justify-content: flex-start;
   align-items: center;
@@ -222,14 +233,13 @@
 .de-emergency-emergency-panel__body-split-nA5Hwa {
   flex: 1;
   grid-template-rows: minmax(0, 1fr);
-  gap: .75rem;
   width: 100%;
   min-height: 0;
   display: grid;
 }
 
 .de-emergency-emergency-panel__body-split--with-availability-nA5Hwa {
-  grid-template-rows: .5fr auto .5fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
 .de-emergency-emergency-panel__availability-region-nA5Hwa {
@@ -240,12 +250,8 @@
   display: flex;
 }
 
-.de-emergency-emergency-panel__divider-nA5Hwa {
-  border: 0;
-  border-top: 1px solid var(--de-emergency-red, red);
-  width: 100%;
-  height: 0;
-  margin: 0;
+.de-emergency-emergency-panel__body--primary-nA5Hwa .de-emergency-emergency-panel__availability-region-nA5Hwa {
+  padding: 1.5rem .75rem;
 }
 
 .de-emergency-emergency-panel__sr-only-nA5Hwa {
@@ -271,6 +277,14 @@
   overflow-y: auto;
 }
 
+.de-emergency-emergency-panel__prompt-region--idle-nA5Hwa {
+  background: var(--de-emergency-white-soft, #f7f7f7);
+  outline: 1px solid var(--de-emergency-gray-progress-bar);
+  border-radius: 1.5rem 1.5rem 0 0;
+  padding: 3rem 0;
+  position: relative;
+}
+
 .de-emergency-emergency-availability-nA5Hwa {
   text-align: start;
   flex-direction: column;
@@ -392,6 +406,231 @@
   outline-offset: 2px;
 }
 
+.de-emergency-emergency-details-nA5Hwa, .de-emergency-emergency-history-nA5Hwa, .de-emergency-emergency-message-detail-nA5Hwa, .de-emergency-emergency-message-detail__empty-nA5Hwa {
+  flex-direction: column;
+  gap: .75rem;
+  width: 100%;
+  max-width: 24rem;
+  display: flex;
+}
+
+.de-emergency-emergency-details-nA5Hwa {
+  gap: 1.5rem;
+}
+
+.de-emergency-emergency-details__section-nA5Hwa {
+  flex-direction: column;
+  gap: .625rem;
+  display: flex;
+}
+
+.de-emergency-emergency-details__card-nA5Hwa, .de-emergency-emergency-message-detail__card-nA5Hwa {
+  background: var(--de-emergency-white, #fff);
+  border: 1px solid var(--de-emergency-yellow-dark, #b38b00);
+  border-radius: var(--de-emergency-radius);
+  overflow: hidden;
+}
+
+.de-emergency-emergency-details__card-header-nA5Hwa, .de-emergency-emergency-message-detail__card-header-nA5Hwa {
+  background: var(--de-emergency-yellow, #ffd400);
+  border-bottom: 1px solid var(--de-emergency-yellow-dark, #b38b00);
+  align-items: center;
+  padding: .5rem 1rem;
+  display: flex;
+}
+
+.de-emergency-emergency-details__card-title-nA5Hwa, .de-emergency-emergency-message-detail__card-title-nA5Hwa {
+  color: var(--de-emergency-text, #3d4461);
+  margin: 0;
+  font-size: clamp(.95rem, 3.5vw, 1.1rem);
+  font-weight: 600;
+}
+
+.de-emergency-emergency-details__card-body-nA5Hwa {
+  padding: 1rem;
+}
+
+.de-emergency-emergency-details__balance-nA5Hwa {
+  color: var(--de-emergency-text, #3d4461);
+  margin: 0;
+  font-size: .875rem;
+  line-height: 1.6;
+}
+
+.de-emergency-emergency-details__balance-nA5Hwa strong {
+  color: var(--de-emergency-primary, #007bff);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.de-emergency-emergency-details__heading-nA5Hwa, .de-emergency-emergency-history__heading-nA5Hwa {
+  flex-direction: column;
+  gap: .125rem;
+  display: flex;
+}
+
+.de-emergency-emergency-details__title-nA5Hwa, .de-emergency-emergency-history__title-nA5Hwa {
+  color: var(--de-emergency-text, #3b3f58);
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.de-emergency-emergency-details__subtitle-nA5Hwa, .de-emergency-emergency-history__subtitle-nA5Hwa {
+  color: var(--de-emergency-text-secondary, #6b7080);
+  margin: 0;
+  font-size: .75rem;
+}
+
+.de-emergency-emergency-details__list-nA5Hwa, .de-emergency-emergency-history__list-nA5Hwa {
+  flex-direction: column;
+  gap: .5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.de-emergency-emergency-details__history-button-nA5Hwa, .de-emergency-emergency-history__more-nA5Hwa, .de-emergency-emergency-message-detail__back-nA5Hwa {
+  min-height: 2.75rem;
+  color: var(--de-emergency-primary, #007bff);
+  border: 1px solid var(--de-emergency-primary, #007bff);
+  border-radius: var(--de-emergency-radius);
+  background: none;
+  justify-content: center;
+  align-items: center;
+  padding: .625rem 1rem;
+  font-size: .875rem;
+  font-weight: 700;
+  transition: background-color .125s ease-out, transform .125s ease-out;
+  display: inline-flex;
+}
+
+.de-emergency-emergency-details__history-button-nA5Hwa:hover, .de-emergency-emergency-history__more-nA5Hwa:hover, .de-emergency-emergency-message-detail__back-nA5Hwa:hover {
+  background: var(--de-emergency-blue-soft, #e6f7fe);
+}
+
+.de-emergency-emergency-details__history-button-nA5Hwa:active, .de-emergency-emergency-history__more-nA5Hwa:active, .de-emergency-emergency-message-detail__back-nA5Hwa:active {
+  transform: scale(.97);
+}
+
+.de-emergency-emergency-details__history-button-nA5Hwa:focus-visible, .de-emergency-emergency-history__more-nA5Hwa:focus-visible, .de-emergency-emergency-message-detail__back-nA5Hwa:focus-visible {
+  outline: 2px solid var(--de-emergency-text, #3d4461);
+  outline-offset: 2px;
+}
+
+.de-emergency-emergency-details__empty-nA5Hwa, .de-emergency-emergency-history__empty-nA5Hwa, .de-emergency-emergency-message-detail__empty-text-nA5Hwa {
+  color: var(--de-emergency-text-secondary, #6b7080);
+  margin: 0;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.de-emergency-emergency-alert-row__button-nA5Hwa {
+  text-align: start;
+  background: var(--de-emergency-white, #fff);
+  border: 1px solid var(--de-emergency-border, #e3e5ea);
+  border-radius: var(--de-emergency-radius);
+  flex-direction: column;
+  gap: .5rem;
+  width: 100%;
+  padding: .75rem;
+  transition: background-color .125s ease-out, border-color .125s ease-out, transform .125s ease-out;
+  display: flex;
+}
+
+.de-emergency-emergency-alert-row__button-nA5Hwa:hover {
+  background: var(--de-emergency-white-soft, #f7f7f7);
+  border-color: var(--de-emergency-blue-border, #b8e6fc);
+}
+
+.de-emergency-emergency-alert-row__button-nA5Hwa:active {
+  transform: scale(.99);
+}
+
+.de-emergency-emergency-alert-row__button-nA5Hwa:focus-visible {
+  outline: 2px solid var(--de-emergency-text, #3d4461);
+  outline-offset: 2px;
+}
+
+.de-emergency-emergency-alert-row__top-nA5Hwa {
+  justify-content: space-between;
+  align-items: center;
+  gap: .5rem;
+  display: flex;
+}
+
+.de-emergency-emergency-alert-row__time-nA5Hwa {
+  color: var(--de-emergency-text, #3d4461);
+  font-size: .8125rem;
+  font-weight: 600;
+}
+
+.de-emergency-emergency-alert-row__badge-nA5Hwa {
+  letter-spacing: .04em;
+  color: var(--de-emergency-white, #fff);
+  border-radius: 999px;
+  padding: .1875rem .625rem;
+  font-size: .6875rem;
+  font-weight: 700;
+}
+
+.de-emergency-emergency-alert-row__badge-nA5Hwa[data-kind="emergency"] {
+  background: var(--de-emergency-error, #dc3545);
+}
+
+.de-emergency-emergency-alert-row__badge-nA5Hwa[data-kind="test"] {
+  background: var(--de-emergency-blue-dark, #005f8f);
+}
+
+.de-emergency-emergency-alert-row__badge-nA5Hwa[data-kind="recharge"] {
+  background: var(--de-emergency-green, green);
+}
+
+.de-emergency-emergency-alert-row__stats-nA5Hwa {
+  flex-wrap: wrap;
+  gap: .25rem .875rem;
+  display: flex;
+}
+
+.de-emergency-emergency-alert-row__stat-nA5Hwa {
+  color: var(--de-emergency-text-secondary, #6b7080);
+  font-size: .6875rem;
+}
+
+.de-emergency-emergency-message-detail__list-nA5Hwa {
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.de-emergency-emergency-message-detail__row-nA5Hwa {
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  padding: .75rem 1rem;
+  display: flex;
+}
+
+.de-emergency-emergency-message-detail__row-nA5Hwa + .de-emergency-emergency-message-detail__row-nA5Hwa {
+  border-top: 1px solid var(--de-emergency-border, #e3e5ea);
+}
+
+.de-emergency-emergency-message-detail__label-nA5Hwa {
+  color: var(--de-emergency-text-secondary, #6b7080);
+  font-size: .8125rem;
+}
+
+.de-emergency-emergency-message-detail__value-nA5Hwa {
+  color: var(--de-emergency-text, #3b3f58);
+  text-align: end;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 600;
+}
+
 .de-emergency-emergency-pre-emergency-nA5Hwa {
   flex-direction: column;
   gap: 1.5rem;
@@ -785,6 +1024,10 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
   padding: 1rem;
 }
 
+.de-emergency-emergency-panel__footer--square-nA5Hwa {
+  border-radius: 0;
+}
+
 .de-emergency-emergency-panel__footer--single-nA5Hwa .de-emergency-emergency-panel__button-nA5Hwa {
   width: min(100%, 22rem);
   min-height: 4.875rem;
@@ -1143,8 +1386,8 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
   display: flex;
 
   & svg {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 3.5rem;
+    height: 3.5rem;
   }
 }
 
@@ -1298,20 +1541,39 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
   vertical-align: middle;
   border: 2px solid;
   border-radius: .25rem;
-  flex: 1 1 0;
-  min-width: 8rem;
+  justify-content: center;
+  align-items: center;
+  gap: .5rem;
   padding: .5rem;
   font-size: 1rem;
   font-weight: 400;
   transition: all .125s ease-in-out;
+  display: inline-flex;
+}
+
+.de-emergency-emergency-confirmation__button-nA5Hwa:disabled {
+  cursor: not-allowed;
+  opacity: .7;
+}
+
+.de-emergency-emergency-confirmation__spinner-nA5Hwa {
+  border: 2px solid #ffffff73;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  animation: 1s linear infinite de-emergency-de-emergency-spin-nA5Hwa;
+  display: inline-block;
 }
 
 .de-emergency-emergency-confirmation__button--cancel-nA5Hwa {
   color: var(--de-emergency-text, #3d4461);
   border-color: #0000;
+  flex-grow: 1;
 }
 
-.de-emergency-emergency-confirmation__button--cancel-nA5Hwa:hover {
+.de-emergency-emergency-confirmation__button--cancel-nA5Hwa:hover:not(:disabled) {
   background: var(--de-emergency-background, #f5f5f5);
 }
 
@@ -1319,15 +1581,17 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
   color: var(--de-emergency-on-red, #fff);
   background: var(--de-emergency-information, #3fabf3);
   border-color: var(--de-emergency-information, #3fabf3);
+  flex-grow: 3;
 }
 
 .de-emergency-emergency-confirmation__button--danger-nA5Hwa {
   color: var(--de-emergency-on-red, #fff);
   background: var(--de-emergency-red, red);
   border-color: var(--de-emergency-red, red);
+  flex-grow: 10;
 }
 
-.de-emergency-emergency-confirmation__button--danger-nA5Hwa:hover {
+.de-emergency-emergency-confirmation__button--danger-nA5Hwa:hover:not(:disabled) {
   background: var(--de-emergency-red-pressed, #e33327);
   border-color: var(--de-emergency-red-pressed, #e33327);
 }
@@ -1556,10 +1820,23 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
     margin: .5rem;
     padding: 1.5rem;
   }
+
+  .de-emergency-emergency-alert-row__top-nA5Hwa {
+    flex-wrap: wrap;
+  }
+
+  .de-emergency-emergency-message-detail__row-nA5Hwa {
+    flex-direction: column;
+    gap: .125rem;
+  }
+
+  .de-emergency-emergency-message-detail__value-nA5Hwa {
+    text-align: start;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .de-emergency-emergency-panel-nA5Hwa, .de-emergency-emergency-panel__button-nA5Hwa, .de-emergency-emergency-panel__close-button-nA5Hwa, .de-emergency-emergency-status-panel__refresh-btn-nA5Hwa, .de-emergency-emergency-status__abort-btn-nA5Hwa, .de-emergency-emergency-availability__recharge-nA5Hwa, .de-emergency-emergency-availability__details-nA5Hwa, .de-emergency-emergency-pricing__package-nA5Hwa, .de-emergency-emergency-pricing__select-nA5Hwa, .de-emergency-emergency-pre-emergency__input-nA5Hwa {
+  .de-emergency-emergency-panel-nA5Hwa, .de-emergency-emergency-panel__button-nA5Hwa, .de-emergency-emergency-panel__close-button-nA5Hwa, .de-emergency-emergency-status-panel__refresh-btn-nA5Hwa, .de-emergency-emergency-status__abort-btn-nA5Hwa, .de-emergency-emergency-availability__recharge-nA5Hwa, .de-emergency-emergency-availability__details-nA5Hwa, .de-emergency-emergency-pricing__package-nA5Hwa, .de-emergency-emergency-pricing__select-nA5Hwa, .de-emergency-emergency-pre-emergency__input-nA5Hwa, .de-emergency-emergency-details__history-button-nA5Hwa, .de-emergency-emergency-history__more-nA5Hwa, .de-emergency-emergency-message-detail__back-nA5Hwa, .de-emergency-emergency-alert-row__button-nA5Hwa {
     transition: none;
   }
 
@@ -1567,7 +1844,7 @@ p.de-emergency-emergency-pricing__package-footnote-nA5Hwa {
     animation: none;
   }
 
-  .de-emergency-emergency-status__spinner-nA5Hwa {
+  .de-emergency-emergency-status__spinner-nA5Hwa, .de-emergency-emergency-confirmation__spinner-nA5Hwa {
     animation-duration: 3s;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataemergencia/emergency",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Framework-agnostic emergency client for DataEmergencia, with a mountable React panel and an IIFE build.",
   "license": "MIT",
   "type": "module",