@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc02

package/dist/css/main.css

@@ -1200,6 +1200,43 @@ label {
   font-size: inherit;
 }
 
+/* ========================================
+   Reset and Base Styles
+   ======================================== */
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-primary-bg);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #e1e5e9;
+  border-radius: 3px;
+  border: 1px solid var(--pa-primary-bg);
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: #007bff;
+  border-color: rgba(0, 123, 255, 0.12);
+}
+*::-webkit-scrollbar-thumb:active {
+  background: rgba(0, 123, 255, 0.12);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-primary-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+}
+
 /* ========================================
    Layout V2 - Based on Testbench Structure
    ======================================== */
@@ -3473,8 +3510,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .pa-card__header {
-  padding: 0.8rem 1.6rem;
-  min-height: 5rem;
+  padding: 0.8rem 1rem;
+  min-height: 4rem;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom: 1px solid var(--pa-border-color);
@@ -3530,9 +3567,10 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-text-primary);
   font-size: 1.6rem;
   font-weight: 600;
+  line-height: 1;
 }
 .pa-card__body {
-  padding: 1.6rem 1.6rem 1.6rem 1.6rem;
+  padding: 1.6rem 1rem;
   flex: 1;
 }
 .pa-card__body > :first-child {
@@ -3542,7 +3580,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 0;
 }
 .pa-card__footer {
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   border-top: 1px solid var(--pa-border-color);
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
@@ -3633,7 +3671,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   background: var(--pa-card-tabs-bg);
 }
 .pa-card__tab {
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   border: none;
   background: none;
   color: var(--pa-text-secondary);
@@ -3913,7 +3951,7 @@ a.pa-card p {
 .pa-tabs__container--bordered {
   border: 1px solid var(--pa-border-color);
   border-radius: 8px;
-  padding: 1.6rem;
+  padding: 1.6rem 1rem;
   background-color: var(--pa-card-bg);
 }
 .pa-tabs__container--bordered .pa-tabs {
@@ -3936,7 +3974,7 @@ a.pa-card p {
 .pa-tabs__vertical-layout--bordered {
   border: 1px solid var(--pa-border-color);
   border-radius: 8px;
-  padding: 1.6rem;
+  padding: 1.6rem 1rem;
   background-color: var(--pa-card-bg);
 }
 .pa-tabs__vertical-layout--bordered .pa-tabs--vertical {
@@ -4073,7 +4111,7 @@ a.pa-card p {
   font-size: 3.2rem;
   font-weight: 700;
   color: var(--pa-text-primary);
-  line-height: 1;
+  line-height: 1.1;
   margin-bottom: 0.8rem;
 }
 .pa-stat--hero .pa-stat__change {
@@ -4110,7 +4148,7 @@ a.pa-card p {
 .pa-stat--square .pa-stat__number {
   font-size: clamp(4.8rem, 8vw, 7.2rem);
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.1;
   color: inherit;
   z-index: 2px;
   position: relative;
@@ -4122,7 +4160,7 @@ a.pa-card p {
 .pa-stat--square .pa-stat__symbol {
   font-size: clamp(6.4rem, 10vw, 9.6rem);
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.1;
   opacity: 0.12;
   color: inherit;
   position: absolute;
@@ -4312,7 +4350,7 @@ a.pa-card p {
   display: flex;
   align-items: center;
   gap: 1.2rem;
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   border-bottom: 1px solid var(--pa-border-color);
 }
 .pa-list__item:last-child {
@@ -4576,17 +4614,17 @@ a.pa-card p {
   color: #007bff;
 }
 .pa-composite-badge--primary .pa-composite-badge__label:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--primary .pa-composite-badge__button {
   background-color: #007bff;
   color: #ffffff;
 }
 .pa-composite-badge--primary .pa-composite-badge__button:hover {
-  background-color: #0056b3;
+  background-color: rgb(51, 149.4, 255);
 }
 .pa-composite-badge--primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--secondary .pa-composite-badge__icon {
   background-color: #6c757d;
@@ -4607,7 +4645,7 @@ a.pa-card p {
   background-color: #545b62;
 }
 .pa-composite-badge--secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--success .pa-composite-badge__icon {
   background-color: #28a745;
@@ -4625,10 +4663,10 @@ a.pa-card p {
   color: #ffffff;
 }
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: #1e7e34;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 .pa-composite-badge--success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--danger .pa-composite-badge__icon {
   background-color: #dc3545;
@@ -4646,10 +4684,10 @@ a.pa-card p {
   color: #ffffff;
 }
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: #c82333;
+  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
 }
 .pa-composite-badge--danger .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--warning .pa-composite-badge__icon {
   background-color: #ffc107;
@@ -4667,10 +4705,10 @@ a.pa-card p {
   color: #212529;
 }
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: #e0a800;
+  background-color: rgb(211, 158.25, 0);
 }
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--info .pa-composite-badge__icon {
   background-color: #17a2b8;
@@ -4688,31 +4726,31 @@ a.pa-card p {
   color: #ffffff;
 }
 .pa-composite-badge--info .pa-composite-badge__button:hover {
-  background-color: #117a8b;
+  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 .pa-composite-badge--info .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--light .pa-composite-badge__icon {
   background-color: #f8f9fa;
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--light .pa-composite-badge__label {
   background-color: #ffffff;
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--light .pa-composite-badge__label:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 .pa-composite-badge--light .pa-composite-badge__button {
   background-color: #f8f9fa;
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--light .pa-composite-badge__button:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 .pa-composite-badge--light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--dark .pa-composite-badge__icon {
   background-color: #343a40;
@@ -4733,7 +4771,7 @@ a.pa-card p {
   background-color: #1d2124;
 }
 .pa-composite-badge--dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--primary .pa-composite-badge__icon {
   background-color: #007bff;
@@ -4756,7 +4794,7 @@ a.pa-card p {
 }
 .pa-composite-badge--light .pa-composite-badge__icon {
   background-color: #f8f9fa;
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--dark .pa-composite-badge__icon {
   background-color: #343a40;
@@ -4805,7 +4843,7 @@ a.pa-card p {
 }
 .pa-composite-badge--label-light .pa-composite-badge__label {
   background-color: rgb(253.95, 254.1, 254.25);
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--label-light .pa-composite-badge__label:hover {
   background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
@@ -4821,7 +4859,7 @@ a.pa-card p {
   background-color: #007bff;
 }
 .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
-  background-color: #0056b3;
+  background-color: rgb(51, 149.4, 255);
 }
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
@@ -4839,7 +4877,7 @@ a.pa-card p {
   background-color: #28a745;
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: #1e7e34;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
@@ -4849,7 +4887,7 @@ a.pa-card p {
   color: #212529;
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: #e0a800;
+  background-color: rgb(211, 158.25, 0);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
@@ -4858,17 +4896,17 @@ a.pa-card p {
   background-color: #17a2b8;
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
-  background-color: #117a8b;
+  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button {
   background-color: #f8f9fa;
-  color: #495057;
+  color: #2c3e50;
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
@@ -6080,7 +6118,7 @@ a.pa-card p {
    ======================================== */
 .pa-alert {
   position: relative;
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   margin-bottom: 1.6rem;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -6165,11 +6203,11 @@ a.pa-card p {
   background-color: transparent;
 }
 .pa-alert--sm {
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   font-size: 1.4rem;
 }
 .pa-alert--lg {
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   font-size: 1.6rem;
 }
 .pa-alert--dismissible {
@@ -6203,7 +6241,7 @@ a.pa-card p {
   top: 0;
   right: 0;
   z-index: 2px;
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1rem;
   background: none;
   border: none;
   font-size: 2rem;
@@ -7132,7 +7170,7 @@ web-daterangepicker {
   /* Colors */
   --drp-accent-color: #007bff;
   --drp-primary-bg: #007bff;
-  --drp-primary-bg-hover: #0056b3;
+  --drp-primary-bg-hover: rgb(51, 149.4, 255);
   --drp-text-primary: var(--pa-text-primary);
   --drp-text-secondary: var(--pa-text-secondary);
   --drp-border-color: #e1e5e9;
@@ -7230,13 +7268,13 @@ web-daterangepicker {
   --drp-header-font-size: 1.6rem;
   --drp-header-font-weight: 600;
   --drp-header-text-color: var(--pa-text-primary);
-  --drp-header-bg-hover: rgba(0, 123, 255, 0.1);
+  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-header-bg-active: rgba(0, 123, 255, 0.05);
   /* ===== NAVIGATION ===== */
   --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
   --drp-nav-text-color: var(--pa-text-primary);
   --drp-nav-border-color: #e1e5e9;
-  --drp-nav-bg-hover: rgba(0, 123, 255, 0.1);
+  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
   --drp-nav-border-hover: #007bff;
   /* ===== WEEKDAY HEADER ===== */
@@ -7250,7 +7288,7 @@ web-daterangepicker {
   --drp-day-border-radius: 2px;
   /* Day states */
   --drp-day-text-color: var(--pa-text-primary);
-  --drp-day-bg-hover: rgba(0, 123, 255, 0.1);
+  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-day-border-hover: transparent;
   /* Today indicator */
   --drp-day-today-border: #007bff;
@@ -7311,7 +7349,7 @@ web-daterangepicker {
   --drp-button-cancel-border: #e1e5e9;
   /* Apply button */
   --drp-button-apply-bg: #007bff;
-  --drp-button-apply-bg-hover: #0056b3;
+  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
   --drp-button-apply-color: #ffffff;
   --drp-button-apply-border: #007bff;
   /* Button sizing */
@@ -7322,7 +7360,7 @@ web-daterangepicker {
   /* ===== UNIFIED NAVIGATION ===== */
   /* Range selectors in unified nav */
   --drp-unified-range-text-color: var(--pa-text-primary);
-  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.1);
+  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
   /* Month/Year display */
   --drp-unified-month-color: var(--pa-text-primary);
@@ -7332,7 +7370,7 @@ web-daterangepicker {
   --drp-rolling-bg: var(--pa-card-bg);
   --drp-rolling-border: #e1e5e9;
   --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.1);
+  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
   --drp-rolling-item-selected-bg: #007bff;
   --drp-rolling-item-selected-text: #ffffff;
   --drp-rolling-font-size: 1.4rem;
@@ -9146,7 +9184,7 @@ code {
   display: flex;
   align-items: center;
   gap: 1.2rem;
-  padding: 1.2rem 1.6rem;
+  padding: 0.8rem 1.6rem;
   color: var(--pa-text-primary);
   text-decoration: none;
   border-radius: 4px;
@@ -9162,7 +9200,7 @@ code {
   outline-offset: 2px;
 }
 .pa-profile-panel__nav-icon {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   width: 2.4rem;
   text-align: center;
 }
@@ -9172,50 +9210,102 @@ code {
   gap: 1.2rem;
   margin-top: auto;
 }
-
-@media (max-width: 768px) {
-  .pa-profile-panel__content {
-    width: 85vw;
-    max-width: 40rem;
-  }
-  .pa-header__profile-name {
-    display: none;
-  }
+.pa-profile-panel__tabs {
+  padding: 0 2.4rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-header-bg);
 }
-/* Webkit browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+.pa-profile-panel__tabs .pa-tabs {
+  border-bottom: none;
+  margin-bottom: 0;
 }
-
-*::-webkit-scrollbar-track {
-  background: var(--pa-primary-bg);
+.pa-profile-panel__tabs .pa-tabs__item {
+  color: var(--pa-header-text-secondary);
+  border-bottom-color: transparent;
+}
+.pa-profile-panel__tabs .pa-tabs__item:hover {
+  color: var(--pa-header-text);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.pa-profile-panel__tabs .pa-tabs__item--active {
+  color: var(--pa-header-text);
+  border-bottom-color: var(--pa-accent);
+}
+.pa-profile-panel__favorites {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+.pa-profile-panel__favorites ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pa-profile-panel__favorites li {
+  margin-bottom: 0.8rem;
+}
+.pa-profile-panel__favorite-item {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 0.8rem 1.6rem;
+  color: var(--pa-text-primary);
+  text-decoration: none;
   border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.1s ease-out, color 0.1s ease-out;
+  font-weight: 500;
 }
-
-*::-webkit-scrollbar-thumb {
-  background: #e1e5e9;
+.pa-profile-panel__favorite-item:hover {
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
+}
+.pa-profile-panel__favorite-item:focus {
+  outline: 2px solid var(--pa-accent);
+  outline-offset: 2px;
+}
+.pa-profile-panel__favorite-icon {
+  font-size: 1.6rem;
+  width: 2.4rem;
+  text-align: center;
+}
+.pa-profile-panel__favorite-label {
+  flex: 1;
+}
+.pa-profile-panel__favorite-remove {
+  opacity: 0;
+  margin-left: auto;
+  background: none;
+  border: none;
+  padding: 0.8rem;
+  color: var(--pa-text-secondary);
+  cursor: pointer;
   border-radius: 4px;
-  border: 1px solid var(--pa-primary-bg);
+  font-size: 1.4rem;
+  line-height: 1;
+  transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
 }
-*::-webkit-scrollbar-thumb:hover {
-  background: #007bff;
-  border-color: rgba(0, 123, 255, 0.1);
+.pa-profile-panel__favorite-remove:hover {
+  color: var(--pa-danger);
+  background-color: var(--pa-danger-bg-light);
 }
-*::-webkit-scrollbar-thumb:active {
-  background: rgba(0, 123, 255, 0.1);
+.pa-profile-panel__favorite-item:hover .pa-profile-panel__favorite-remove {
+  opacity: 1;
 }
-
-*::-webkit-scrollbar-corner {
-  background: var(--pa-primary-bg);
+.pa-profile-panel__favorites-add {
+  margin-top: auto;
+  padding-top: 1.2rem;
 }
 
-/* Firefox */
-* {
-  scrollbar-width: auto;
-  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+@media (max-width: 768px) {
+  .pa-profile-panel__content {
+    width: 85vw;
+    max-width: 40rem;
+  }
+  .pa-header__profile-name {
+    display: none;
+  }
 }
-
 /* ========================================
    Reset and Base Styles
    ======================================== */
@@ -10832,7 +10922,7 @@ code {
   transition: color 0.1s ease-out;
 }
 .pa-notifications__mark-read:hover {
-  color: rgba(0, 123, 255, 0.1);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-notifications__list {
@@ -10939,7 +11029,7 @@ code {
   transition: color 0.1s ease-out;
 }
 .pa-notifications__footer a:hover {
-  color: rgba(0, 123, 255, 0.1);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 @media (max-width: 768px) {
@@ -11120,7 +11210,7 @@ code {
   box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
 }
 .pa-settings-panel__toggle:hover {
-  background: rgba(0, 123, 255, 0.1);
+  background: rgba(0, 123, 255, 0.12);
   width: 45px;
   right: 325px;
 }
@@ -11196,7 +11286,7 @@ code {
   right: 0;
 }
 .pa-settings-panel--open .pa-settings-panel__toggle {
-  background: rgba(0, 123, 255, 0.1);
+  background: rgba(0, 123, 255, 0.12);
   transform: rotate(180deg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.0.0-rc01",
+  "version": "1.0.0-rc02",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {