@keenmate/pure-admin-core 1.0.0-rc06 → 1.0.0

package/dist/css/main.css

@@ -956,6 +956,10 @@
   width: auto !important;
 }
 
+.w-1-2 {
+  width: 50% !important;
+}
+
 .w-1-3 {
   width: 33.333333% !important;
 }
@@ -964,6 +968,14 @@
   width: 66.666667% !important;
 }
 
+.w-1-4 {
+  width: 25% !important;
+}
+
+.w-3-4 {
+  width: 75% !important;
+}
+
 .mw-25 {
   min-width: 25% !important;
 }
@@ -984,6 +996,10 @@
   min-width: auto !important;
 }
 
+.mw-1-2 {
+  min-width: 50% !important;
+}
+
 .mw-1-3 {
   min-width: 33.333333% !important;
 }
@@ -992,6 +1008,14 @@
   min-width: 66.666667% !important;
 }
 
+.mw-1-4 {
+  min-width: 25% !important;
+}
+
+.mw-3-4 {
+  min-width: 75% !important;
+}
+
 .w-25-fixed {
   min-width: 25% !important;
   width: 25% !important;
@@ -1012,6 +1036,11 @@
   width: 100% !important;
 }
 
+.w-1-2-fixed {
+  min-width: 50% !important;
+  width: 50% !important;
+}
+
 .w-1-3-fixed {
   min-width: 33.333333% !important;
   width: 33.333333% !important;
@@ -1022,6 +1051,16 @@
   width: 66.666667% !important;
 }
 
+.w-1-4-fixed {
+  min-width: 25% !important;
+  width: 25% !important;
+}
+
+.w-3-4-fixed {
+  min-width: 75% !important;
+  width: 75% !important;
+}
+
 .h-25 {
   height: 25% !important;
 }
@@ -1042,6 +1081,26 @@
   height: auto !important;
 }
 
+.h-1-2 {
+  height: 50% !important;
+}
+
+.h-1-3 {
+  height: 33.333333% !important;
+}
+
+.h-2-3 {
+  height: 66.666667% !important;
+}
+
+.h-1-4 {
+  height: 25% !important;
+}
+
+.h-3-4 {
+  height: 75% !important;
+}
+
 .wr-1 {
   width: 1rem !important;
 }
@@ -1094,6 +1153,26 @@
   width: 25rem !important;
 }
 
+.wr-30 {
+  width: 30rem !important;
+}
+
+.wr-35 {
+  width: 35rem !important;
+}
+
+.wr-40 {
+  width: 40rem !important;
+}
+
+.wr-45 {
+  width: 45rem !important;
+}
+
+.wr-50 {
+  width: 50rem !important;
+}
+
 .minwr-1 {
   min-width: 1rem !important;
 }
@@ -1146,6 +1225,26 @@
   min-width: 25rem !important;
 }
 
+.minwr-30 {
+  min-width: 30rem !important;
+}
+
+.minwr-35 {
+  min-width: 35rem !important;
+}
+
+.minwr-40 {
+  min-width: 40rem !important;
+}
+
+.minwr-45 {
+  min-width: 45rem !important;
+}
+
+.minwr-50 {
+  min-width: 50rem !important;
+}
+
 .maxwr-1 {
   max-width: 1rem !important;
 }
@@ -1198,6 +1297,26 @@
   max-width: 25rem !important;
 }
 
+.maxwr-30 {
+  max-width: 30rem !important;
+}
+
+.maxwr-35 {
+  max-width: 35rem !important;
+}
+
+.maxwr-40 {
+  max-width: 40rem !important;
+}
+
+.maxwr-45 {
+  max-width: 45rem !important;
+}
+
+.maxwr-50 {
+  max-width: 50rem !important;
+}
+
 .hr-1 {
   height: 1rem !important;
 }
@@ -1250,6 +1369,26 @@
   height: 25rem !important;
 }
 
+.hr-30 {
+  height: 30rem !important;
+}
+
+.hr-35 {
+  height: 35rem !important;
+}
+
+.hr-40 {
+  height: 40rem !important;
+}
+
+.hr-45 {
+  height: 45rem !important;
+}
+
+.hr-50 {
+  height: 50rem !important;
+}
+
 .minhr-1 {
   min-height: 1rem !important;
 }
@@ -1302,6 +1441,26 @@
   min-height: 25rem !important;
 }
 
+.minhr-30 {
+  min-height: 30rem !important;
+}
+
+.minhr-35 {
+  min-height: 35rem !important;
+}
+
+.minhr-40 {
+  min-height: 40rem !important;
+}
+
+.minhr-45 {
+  min-height: 45rem !important;
+}
+
+.minhr-50 {
+  min-height: 50rem !important;
+}
+
 .maxhr-1 {
   max-height: 1rem !important;
 }
@@ -1354,6 +1513,26 @@
   max-height: 25rem !important;
 }
 
+.maxhr-30 {
+  max-height: 30rem !important;
+}
+
+.maxhr-35 {
+  max-height: 35rem !important;
+}
+
+.maxhr-40 {
+  max-height: 40rem !important;
+}
+
+.maxhr-45 {
+  max-height: 45rem !important;
+}
+
+.maxhr-50 {
+  max-height: 50rem !important;
+}
+
 .minw-5 {
   min-width: 5% !important;
 }
@@ -1522,6 +1701,10 @@
   max-width: 100% !important;
 }
 
+.maxw-1-2 {
+  max-width: 50% !important;
+}
+
 .maxw-1-3 {
   max-width: 33.333333% !important;
 }
@@ -1530,6 +1713,14 @@
   max-width: 66.666667% !important;
 }
 
+.maxw-1-4 {
+  max-width: 25% !important;
+}
+
+.maxw-3-4 {
+  max-width: 75% !important;
+}
+
 .minh-5 {
   min-height: 5% !important;
 }
@@ -1610,6 +1801,10 @@
   min-height: 100% !important;
 }
 
+.minh-1-2 {
+  min-height: 50% !important;
+}
+
 .minh-1-3 {
   min-height: 33.333333% !important;
 }
@@ -1618,6 +1813,14 @@
   min-height: 66.666667% !important;
 }
 
+.minh-1-4 {
+  min-height: 25% !important;
+}
+
+.minh-3-4 {
+  min-height: 75% !important;
+}
+
 .maxh-5 {
   max-height: 5% !important;
 }
@@ -1698,6 +1901,10 @@
   max-height: 100% !important;
 }
 
+.maxh-1-2 {
+  max-height: 50% !important;
+}
+
 .maxh-1-3 {
   max-height: 33.333333% !important;
 }
@@ -1706,6 +1913,14 @@
   max-height: 66.666667% !important;
 }
 
+.maxh-1-4 {
+  max-height: 25% !important;
+}
+
+.maxh-3-4 {
+  max-height: 75% !important;
+}
+
 .position-static {
   position: static !important;
 }
@@ -2015,16 +2230,15 @@ label {
 }
 
 *::-webkit-scrollbar-thumb {
-  background: #e1e5e9;
+  background: var(--pa-border-color);
   border-radius: 3px;
   border: 1px solid var(--pa-primary-bg);
 }
 *::-webkit-scrollbar-thumb:hover {
-  background: #007bff;
-  border-color: rgba(0, 123, 255, 0.12);
+  background: var(--pa-accent);
 }
 *::-webkit-scrollbar-thumb:active {
-  background: rgba(0, 123, 255, 0.12);
+  background: var(--pa-accent-hover);
 }
 
 *::-webkit-scrollbar-corner {
@@ -2260,6 +2474,31 @@ body.pa-layout--sticky .pa-layout__inner {
   gap: 0.4rem;
 }
 
+@media (max-width: 768px) {
+  .pa-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: 0.8rem 1.6rem;
+  }
+  .pa-footer__left,
+  .pa-footer__center,
+  .pa-footer__right {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  .pa-footer__left {
+    flex: 1 1 auto;
+  }
+  .pa-footer__center {
+    display: none;
+  }
+  .pa-footer__right {
+    flex: 0 1 auto;
+  }
+  .pa-footer__right--vertical {
+    align-items: flex-end;
+  }
+}
 /* ========================================
    Reset and Base Styles
    ======================================== */
@@ -2267,15 +2506,58 @@ body.pa-layout--sticky .pa-layout__inner {
    Sidebar Component
    Sidebar navigation with nested submenus
    ======================================== */
+:root {
+  --pa-sidebar-width: 28.8rem;
+  --pa-sidebar-min-width: 18rem;
+  --pa-sidebar-max-width: 50rem;
+}
+
+:where(.pa-layout__sidebar) {
+  width: var(--pa-sidebar-width);
+}
+
 .pa-layout__sidebar {
-  width: 28.8rem;
   background-color: var(--pa-sidebar-bg);
   border-right: 1px solid var(--pa-border-color);
   flex-shrink: 0;
+  position: relative;
+}
+
+.pa-sidebar-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+}
+.pa-sidebar-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background-color: transparent;
+  transition: background-color 0.1s ease-out;
+}
+.pa-sidebar-resize:hover::after, .pa-sidebar-resize--active::after {
+  background-color: var(--pa-accent);
+}
+
+body.pa-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+}
+body.pa-sidebar-resizing * {
+  cursor: ew-resize !important;
 }
 
 body.pa-layout--sticky .pa-layout__sidebar {
   overflow-y: auto;
+  overflow-y: overlay;
   overflow-x: visible;
 }
 
@@ -4333,6 +4615,144 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding-bottom: 0;
 }
 
+@media (max-width: 768px) {
+  .pa-col-5 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-10 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-15 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-20 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-25 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-30 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-35 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-40 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-45 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-50 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-55 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-60 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-65 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-70 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-75 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-80 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-85 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-90 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-95 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-2 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-3 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-2-3 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-3-4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-5 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-2-5 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-3-5 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-4-5 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-6 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-5-6 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-1-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-5-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-7-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .pa-col-11-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
 /* ========================================
    Reset and Base Styles
    ======================================== */
@@ -7703,10 +8123,11 @@ a.pa-card p {
 .pa-input-group__prepend, .pa-input-group__append {
   display: flex;
   align-items: center;
-  padding: 0.8rem 0.8rem;
+  height: 3.5rem;
+  line-height: 3.5rem;
+  padding: 0 0.8rem;
   border: 1px solid var(--pa-border-color);
   font-size: 1.4rem;
-  line-height: 1;
   white-space: nowrap;
   border-radius: 0;
 }
@@ -7734,27 +8155,24 @@ a.pa-card p {
 .pa-input-group__append + .pa-input-group__append {
   border-left: 1px solid var(--pa-border-color);
 }
-.pa-input-group:focus-within .pa-input-group__prepend {
+.pa-input-group:has(.pa-input:focus) .pa-input-group__prepend {
   border-right: 1px solid var(--pa-input-focus-border-color);
 }
-.pa-input-group:focus-within .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
+.pa-input-group:has(.pa-input:focus) .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
   border-right: none;
 }
-.pa-input-group:focus-within .pa-input-group__append {
+.pa-input-group:has(.pa-input:focus) .pa-input-group__append {
   border-left: 1px solid var(--pa-input-focus-border-color);
 }
-.pa-input-group:focus-within .pa-input-group__append + .pa-input-group__append {
+.pa-input-group:has(.pa-input:focus) .pa-input-group__append + .pa-input-group__append {
   border-left: 1px solid var(--pa-border-color);
 }
 .pa-input-group__button {
   border-radius: 0;
-  border-color: var(--pa-border-color);
-  border-left: none;
 }
 .pa-input-group__button:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
-  border-left: 1px solid var(--pa-border-color);
 }
 .pa-input-group__button:last-child {
   border-top-right-radius: 4px;
@@ -7762,22 +8180,26 @@ a.pa-card p {
 }
 .pa-input-group--xs .pa-input-group__prepend,
 .pa-input-group--xs .pa-input-group__append {
-  padding: 0.6rem 0.8rem;
+  height: 3.1rem;
+  line-height: 3.1rem;
   font-size: 1.2rem;
 }
 .pa-input-group--sm .pa-input-group__prepend,
 .pa-input-group--sm .pa-input-group__append {
-  padding: 0.8rem 0.8rem;
+  height: 3.3rem;
+  line-height: 3.3rem;
   font-size: 1.4rem;
 }
 .pa-input-group--lg .pa-input-group__prepend,
 .pa-input-group--lg .pa-input-group__append {
-  padding: 0.8rem 0.8rem;
+  height: 3.8rem;
+  line-height: 3.8rem;
   font-size: 1.6rem;
 }
 .pa-input-group--xl .pa-input-group__prepend,
 .pa-input-group--xl .pa-input-group__append {
-  padding: 0.8rem 0.8rem;
+  height: 4.1rem;
+  line-height: 4.1rem;
   font-size: 1.8rem;
 }
 
@@ -10181,6 +10603,16 @@ code {
    Profile Panel Components
    Profile panel and header button
    ======================================== */
+:root {
+  --pa-profile-panel-width: 20vw;
+  --pa-profile-panel-max-width: 48rem;
+}
+
+:where(.pa-profile-panel__content) {
+  width: var(--pa-profile-panel-width);
+  max-width: var(--pa-profile-panel-max-width);
+}
+
 .pa-header__profile-btn {
   display: flex;
   align-items: center;
@@ -10238,8 +10670,6 @@ code {
   position: absolute;
   top: 0;
   right: 0;
-  width: 20vw;
-  max-width: 48rem;
   height: 100vh;
   background-color: var(--pa-card-bg);
   box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
@@ -12218,6 +12648,55 @@ code {
     right: -1.6rem;
   }
 }
+.pa-notifications__list--page {
+  max-height: none;
+  overflow: visible;
+}
+.pa-notifications__list--page .pa-notifications__item {
+  padding: 1.6rem 2.4rem;
+}
+.pa-notifications__list--page .pa-notifications__icon-wrapper {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.8rem;
+}
+.pa-notifications__list--page .pa-notifications__content h4 {
+  font-size: 1.4rem;
+  margin-bottom: 0.4rem;
+}
+.pa-notifications__list--page .pa-notifications__content p {
+  font-size: 1.4rem;
+  -webkit-line-clamp: 3;
+}
+.pa-notifications__list--page .pa-notifications__time {
+  font-size: 1.2rem;
+}
+
+.pa-notifications__actions {
+  display: flex;
+  gap: 0.4rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.1s ease-out;
+}
+
+.pa-notifications__item:hover .pa-notifications__actions {
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .pa-notifications__list--page .pa-notifications__item {
+    flex-wrap: wrap;
+  }
+  .pa-notifications__list--page .pa-notifications__actions {
+    opacity: 1;
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: 0.8rem;
+    padding-top: 0.8rem;
+    border-top: 1px solid var(--pa-border-color);
+  }
+}
 /* ========================================
    Reset and Base Styles
    ======================================== */
@@ -12686,6 +13165,21 @@ html.font-size-4xl {
   overflow: visible;
 }
 
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -12955,6 +13449,12 @@ html.font-size-4xl {
   font-size: 3.2rem;
 }
 
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .component-showcase {
   display: flex;
   flex-wrap: wrap;

package/package.json

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

package/snippets/layout.html

@@ -380,6 +380,52 @@
 </aside>
 
 
+<!-- ================================
+     SIDEBAR WIDTH CONTROL
+     ================================ -->
+
+<!-- Default width (28.8rem / 288px from CSS variable) -->
+<aside class="pa-layout__sidebar">
+    <!-- Nav content -->
+</aside>
+
+<!-- Resizable sidebar (opt-in, drag right edge to resize) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--resizable">
+    <!-- Nav content -->
+    <!-- Drag handle appears on right edge -->
+    <!-- Width saved to localStorage -->
+    <!-- Double-click handle to reset to default -->
+</aside>
+
+<!-- Custom fixed width using utility class (overrides default and resize) -->
+<aside class="pa-layout__sidebar wr-25">
+    <!-- Fixed 25rem (250px) width -->
+    <!-- wr-* sets exact width, blocks resize -->
+</aside>
+
+<!-- Custom minimum width using utility class (allows resize above minimum) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--resizable minwr-20">
+    <!-- Minimum 20rem (200px) width -->
+    <!-- minwr-* sets floor, resize still works above it -->
+</aside>
+
+<!--
+SIDEBAR WIDTH OPTIONS:
+1. Default: Uses CSS variable --pa-sidebar-width (28.8rem)
+2. Resizable: Add --resizable class, user can drag to resize (180-500px range)
+3. Fixed width: Add wr-* utility class (e.g., wr-20, wr-25, wr-30)
+4. Minimum width: Add minwr-* utility class (e.g., minwr-15, minwr-20)
+
+WIDTH UTILITY CLASSES (rem-based, 10px = 1rem):
+- .wr-15 to .wr-25 - Fixed width (15rem to 25rem)
+- .minwr-15 to .minwr-25 - Minimum width (allows resize above)
+- .maxwr-15 to .maxwr-25 - Maximum width (limits resize)
+
+NOTE: Fixed width (.wr-*) overrides both default and resizable width.
+      Use .minwr-* with --resizable to set a floor while allowing resize.
+-->
+
+
 <!-- ================================
      NAVBAR/HEADER (with burger menu and navigation)
      Three-section layout: Left / Center / Right
@@ -605,6 +651,14 @@ SIDEBAR MODES (modifiers on .pa-layout__sidebar):
 - Default - Sidebar scrolls with content
 - .pa-layout__sidebar--sticky - Sidebar stays fixed while content scrolls
 - .pa-layout__sidebar--icon-collapse - Sidebar collapses to icon bar instead of hiding
+- .pa-layout__sidebar--resizable - Drag right edge to resize (opt-in)
+
+SIDEBAR WIDTH CONTROL:
+- Default width: 28.8rem (288px) via CSS variable --pa-sidebar-width
+- Resizable: Add --resizable class for drag-to-resize (180-500px range)
+- Fixed width: Add .wr-* utility class (e.g., wr-25 = 250px) - overrides resize
+- Min width: Add .minwr-* utility class (e.g., minwr-20) - sets floor for resize
+- Max width: Add .maxwr-* utility class (e.g., maxwr-40) - sets ceiling for resize
 
 BURGER MENU:
 - .burger-menu - Burger menu button (same as .pa-header__burger)
@@ -636,4 +690,16 @@ JAVASCRIPT:
 - toggleSidebar() - Toggle sidebar visibility (burger menu)
 - toggleSubmenu(button) - Toggle submenu open/closed
 - Stores state in localStorage for persistence across page loads
+
+PROFILE PANEL WIDTH CONTROL:
+- Default width: 20vw via CSS variable --pa-profile-panel-width
+- Default max-width: 48rem (480px) via CSS variable --pa-profile-panel-max-width
+- Override with utility classes: Add .wr-* to .pa-profile-panel__content
+- Examples:
+  - .wr-30 = fixed 30rem (300px) width
+  - .wr-40 = fixed 40rem (400px) width
+  - .minwr-25 = minimum 25rem width
+  - .maxwr-50 = maximum 50rem width
+- Uses low specificity (:where) so utility classes can override
+- Available: wr-1 to wr-10, then 15, 20, 25, 30, 35, 40, 45, 50 (same for minwr/maxwr)
 -->

package/src/scss/core-components/_grid.scss

@@ -262,3 +262,28 @@ $grid-columns-fractions: (
   padding-bottom: 0;
 }
 
+// ============================================================================
+// AUTO-STACK ON MOBILE
+// ============================================================================
+// Base percentage/fraction columns auto-stack to 100% on mobile
+// Use explicit responsive classes (pa-col-sm-*, pa-col-md-*) to override
+@media (max-width: $mobile-breakpoint) {
+  // Stack percentage columns
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-col-#{$size} {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+  }
+
+  // Stack fraction columns
+  @each $name, $width in $grid-columns-fractions {
+    .pa-col-#{$name} {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+}
+

package/src/scss/core-components/_notifications.scss

@@ -251,3 +251,70 @@
     right: -$spacing-base; // Align to right edge of viewport
   }
 }
+
+// ====================
+// Page View Modifier
+// ====================
+// Larger variant for full-page notification list
+
+.pa-notifications__list--page {
+  max-height: none;
+  overflow: visible;
+
+  .pa-notifications__item {
+    padding: $spacing-base $spacing-lg;
+  }
+
+  .pa-notifications__icon-wrapper {
+    width: 4rem;
+    height: 4rem;
+    font-size: $font-size-lg;
+  }
+
+  .pa-notifications__content {
+    h4 {
+      font-size: $font-size-sm;
+      margin-bottom: $spacing-xs;
+    }
+
+    p {
+      font-size: $font-size-sm;
+      -webkit-line-clamp: 3;
+    }
+  }
+
+  .pa-notifications__time {
+    font-size: $font-size-xs;
+  }
+}
+
+// Action buttons (for page view)
+.pa-notifications__actions {
+  display: flex;
+  gap: $spacing-xs;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity $transition-fast $easing-snappy;
+}
+
+.pa-notifications__item:hover .pa-notifications__actions {
+  opacity: 1;
+}
+
+// Mobile: always show actions
+@media (max-width: $mobile-breakpoint) {
+  .pa-notifications__list--page {
+    .pa-notifications__item {
+      flex-wrap: wrap;
+    }
+
+    .pa-notifications__actions {
+      opacity: 1;
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: $spacing-sm;
+      padding-top: $spacing-sm;
+      border-top: $border-width-base solid var(--pa-border-color);
+    }
+  }
+}

package/src/scss/core-components/_profile.scss

@@ -4,6 +4,18 @@
    ======================================== */
 @use '../variables' as *;
 
+// CSS variable for profile panel width (allows utility class override)
+:root {
+  --pa-profile-panel-width: #{$profile-panel-width};
+  --pa-profile-panel-max-width: #{$profile-panel-max-width};
+}
+
+// Profile panel content width - :where() for low specificity (utility classes can override)
+:where(.pa-profile-panel__content) {
+  width: var(--pa-profile-panel-width);
+  max-width: var(--pa-profile-panel-max-width);
+}
+
 // ====================
 // Profile Panel & Header Button
 // ====================
@@ -73,8 +85,6 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: $profile-panel-width;
-    max-width: $profile-panel-max-width;
     height: 100vh;
     background-color: var(--pa-card-bg);
     box-shadow: $shadow-profile-panel;

package/src/scss/core-components/_scrollbars.scss

@@ -16,17 +16,16 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background: $border-color;
+  background: var(--pa-border-color);
   border-radius: $scrollbar-border-radius;
   border: $border-width-base solid var(--pa-primary-bg);
 
   &:hover {
-    background: $accent-color;
-    border-color: $accent-hover;
+    background: var(--pa-accent);
   }
 
   &:active {
-    background: $accent-hover;
+    background: var(--pa-accent-hover);
   }
 }
 

package/src/scss/core-components/_utilities.scss

@@ -122,6 +122,23 @@ html.font-size-4xl {
 .overflow-hidden { overflow: hidden; }
 .overflow-visible { overflow: visible; }
 
+// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
+// Supported in Chromium browsers; Firefox falls back to auto
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+
 // Cursor utilities
 .cursor-pointer { cursor: pointer; }
 .cursor-help { cursor: help; }
@@ -255,6 +272,13 @@ html.font-size-4xl {
 .text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
 .text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
 
+// Text truncation with ellipsis
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Component showcase styling
 .component-showcase {
   display: flex;

package/src/scss/core-components/forms/_input-groups.scss

@@ -35,10 +35,11 @@
   &__append {
     display: flex;
     align-items: center;
-    padding: $input-padding-v $input-padding-h;
+    height: #{$base-input-size-md-height}rem;
+    line-height: #{$base-input-size-md-height}rem;
+    padding: 0 $input-padding-h;
     border: $border-width-base solid var(--pa-border-color);
     font-size: $font-size-sm;
-    line-height: 1;
     white-space: nowrap;
     border-radius: 0;
   }
@@ -74,8 +75,8 @@
     border-left: $border-width-base solid var(--pa-border-color);
   }
 
-  // When input is focused, only show focus border on edges adjacent to input
-  &:focus-within {
+  // When input is focused, show focus border on adjacent prepend/append
+  &:has(.pa-input:focus) {
     // Last prepend (one before input) gets focus border
     .pa-input-group__prepend {
       border-right: $border-width-base solid var(--pa-input-focus-border-color);
@@ -99,13 +100,10 @@
 
   &__button {
     border-radius: 0;
-    border-color: var(--pa-border-color);
-    border-left: none;
 
     &:first-child {
       border-top-left-radius: $border-radius;
       border-bottom-left-radius: $border-radius;
-      border-left: $border-width-base solid var(--pa-border-color);
     }
 
     &:last-child {
@@ -118,7 +116,8 @@
   &--xs {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-xs-v $input-padding-h;
+      height: #{$base-input-size-xs-height}rem;
+      line-height: #{$base-input-size-xs-height}rem;
       font-size: $font-size-xs;
     }
   }
@@ -126,7 +125,8 @@
   &--sm {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-sm-height}rem;
+      line-height: #{$base-input-size-sm-height}rem;
       font-size: $font-size-sm;
     }
   }
@@ -134,7 +134,8 @@
   &--lg {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-lg-height}rem;
+      line-height: #{$base-input-size-lg-height}rem;
       font-size: $font-size-base;
     }
   }
@@ -142,7 +143,8 @@
   &--xl {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-xl-height}rem;
+      line-height: #{$base-input-size-xl-height}rem;
       font-size: $font-size-lg;
     }
   }

package/src/scss/core-components/layout/_layout-container.scss

@@ -133,3 +133,35 @@ body.pa-layout--sticky .pa-layout__inner {
     gap: $spacing-xs;
   }
 }
+
+// Responsive footer - stack sections on mobile
+@media (max-width: $mobile-breakpoint) {
+  .pa-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: $spacing-sm $spacing-base;
+  }
+
+  .pa-footer__left,
+  .pa-footer__center,
+  .pa-footer__right {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .pa-footer__left {
+    flex: 1 1 auto;
+  }
+
+  .pa-footer__center {
+    display: none; // Hide empty center on mobile
+  }
+
+  .pa-footer__right {
+    flex: 0 1 auto;
+
+    &--vertical {
+      align-items: flex-end;
+    }
+  }
+}

package/src/scss/core-components/layout/_sidebar.scss

@@ -4,17 +4,68 @@
    ======================================== */
 @use '../../variables' as *;
 
-// Sidebar layout element
+// CSS variable for sidebar width (allows JS resize)
+:root {
+  --pa-sidebar-width: #{$sidebar-width};
+  --pa-sidebar-min-width: 18rem;
+  --pa-sidebar-max-width: 50rem;
+}
+
+// Sidebar layout element - width in :where() for low specificity (utility classes can override)
+:where(.pa-layout__sidebar) {
+  width: var(--pa-sidebar-width);
+}
+
 .pa-layout__sidebar {
-  width: $sidebar-width;
   background-color: var(--pa-sidebar-bg);
   border-right: $border-width-base solid var(--pa-border-color);
   flex-shrink: 0;
+  position: relative;
+}
+
+// Resize handle on sidebar edge
+.pa-sidebar-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+
+  // Visual indicator on hover
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: transparent;
+    transition: background-color $transition-fast $easing-snappy;
+  }
+
+  &:hover::after,
+  &--active::after {
+    background-color: var(--pa-accent);
+  }
+}
+
+// Disable text selection during resize
+body.pa-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+
+  * {
+    cursor: ew-resize !important;
+  }
 }
 
 // Sticky mode - sidebar scrolls
 body.pa-layout--sticky .pa-layout__sidebar {
   overflow-y: auto;
+  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
   overflow-x: visible; // Allow tooltips to escape right
 }
 

package/src/scss/utilities.scss

@@ -277,9 +277,12 @@ $spacers: (
 .w-100 { width: 100% !important; }
 .w-auto { width: auto !important; }
 
-// Width utilities (fractions) - matches grid naming: pa-col-1-3, pa-col-2-3
+// Width utilities (fractions) - matches grid naming
+.w-1-2 { width: 50% !important; }
 .w-1-3 { width: 33.333333% !important; }
 .w-2-3 { width: 66.666667% !important; }
+.w-1-4 { width: 25% !important; }
+.w-3-4 { width: 75% !important; }
 
 // Min-width utilities
 .mw-25 { min-width: 25% !important; }
@@ -287,16 +290,22 @@ $spacers: (
 .mw-75 { min-width: 75% !important; }
 .mw-100 { min-width: 100% !important; }
 .mw-auto { min-width: auto !important; }
+.mw-1-2 { min-width: 50% !important; }
 .mw-1-3 { min-width: 33.333333% !important; }
 .mw-2-3 { min-width: 66.666667% !important; }
+.mw-1-4 { min-width: 25% !important; }
+.mw-3-4 { min-width: 75% !important; }
 
 // Fixed width utilities (min-width + width locked)
 .w-25-fixed { min-width: 25% !important; width: 25% !important; }
 .w-50-fixed { min-width: 50% !important; width: 50% !important; }
 .w-75-fixed { min-width: 75% !important; width: 75% !important; }
 .w-100-fixed { min-width: 100% !important; width: 100% !important; }
+.w-1-2-fixed { min-width: 50% !important; width: 50% !important; }
 .w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
 .w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
+.w-1-4-fixed { min-width: 25% !important; width: 25% !important; }
+.w-3-4-fixed { min-width: 75% !important; width: 75% !important; }
 
 // Height utilities
 .h-25 {
@@ -319,10 +328,17 @@ $spacers: (
   height: auto !important;
 }
 
+// Height utilities (fractions)
+.h-1-2 { height: 50% !important; }
+.h-1-3 { height: 33.333333% !important; }
+.h-2-3 { height: 66.666667% !important; }
+.h-1-4 { height: 25% !important; }
+.h-3-4 { height: 75% !important; }
+
 // ============================================================================
 // REM-BASED SIZING UTILITIES
 // Use 'r' suffix to distinguish from percentage-based utilities
-// Values: 1-10, 15, 20, 25 (rem)
+// Values: 1-10, 15, 20, 25, 30, 35, 40, 45, 50 (rem)
 // ============================================================================
 
 // Width (rem)
@@ -339,6 +355,11 @@ $spacers: (
 .wr-15 { width: 15rem !important; }
 .wr-20 { width: 20rem !important; }
 .wr-25 { width: 25rem !important; }
+.wr-30 { width: 30rem !important; }
+.wr-35 { width: 35rem !important; }
+.wr-40 { width: 40rem !important; }
+.wr-45 { width: 45rem !important; }
+.wr-50 { width: 50rem !important; }
 
 // Min-width (rem)
 .minwr-1 { min-width: 1rem !important; }
@@ -354,6 +375,11 @@ $spacers: (
 .minwr-15 { min-width: 15rem !important; }
 .minwr-20 { min-width: 20rem !important; }
 .minwr-25 { min-width: 25rem !important; }
+.minwr-30 { min-width: 30rem !important; }
+.minwr-35 { min-width: 35rem !important; }
+.minwr-40 { min-width: 40rem !important; }
+.minwr-45 { min-width: 45rem !important; }
+.minwr-50 { min-width: 50rem !important; }
 
 // Max-width (rem)
 .maxwr-1 { max-width: 1rem !important; }
@@ -369,6 +395,11 @@ $spacers: (
 .maxwr-15 { max-width: 15rem !important; }
 .maxwr-20 { max-width: 20rem !important; }
 .maxwr-25 { max-width: 25rem !important; }
+.maxwr-30 { max-width: 30rem !important; }
+.maxwr-35 { max-width: 35rem !important; }
+.maxwr-40 { max-width: 40rem !important; }
+.maxwr-45 { max-width: 45rem !important; }
+.maxwr-50 { max-width: 50rem !important; }
 
 // Height (rem)
 .hr-1 { height: 1rem !important; }
@@ -384,6 +415,11 @@ $spacers: (
 .hr-15 { height: 15rem !important; }
 .hr-20 { height: 20rem !important; }
 .hr-25 { height: 25rem !important; }
+.hr-30 { height: 30rem !important; }
+.hr-35 { height: 35rem !important; }
+.hr-40 { height: 40rem !important; }
+.hr-45 { height: 45rem !important; }
+.hr-50 { height: 50rem !important; }
 
 // Min-height (rem)
 .minhr-1 { min-height: 1rem !important; }
@@ -399,6 +435,11 @@ $spacers: (
 .minhr-15 { min-height: 15rem !important; }
 .minhr-20 { min-height: 20rem !important; }
 .minhr-25 { min-height: 25rem !important; }
+.minhr-30 { min-height: 30rem !important; }
+.minhr-35 { min-height: 35rem !important; }
+.minhr-40 { min-height: 40rem !important; }
+.minhr-45 { min-height: 45rem !important; }
+.minhr-50 { min-height: 50rem !important; }
 
 // Max-height (rem)
 .maxhr-1 { max-height: 1rem !important; }
@@ -414,6 +455,11 @@ $spacers: (
 .maxhr-15 { max-height: 15rem !important; }
 .maxhr-20 { max-height: 20rem !important; }
 .maxhr-25 { max-height: 25rem !important; }
+.maxhr-30 { max-height: 30rem !important; }
+.maxhr-35 { max-height: 35rem !important; }
+.maxhr-40 { max-height: 40rem !important; }
+.maxhr-45 { max-height: 45rem !important; }
+.maxhr-50 { max-height: 50rem !important; }
 
 // ============================================================================
 // PERCENTAGE-BASED MIN/MAX UTILITIES
@@ -465,8 +511,11 @@ $spacers: (
 .maxw-90 { max-width: 90% !important; }
 .maxw-95 { max-width: 95% !important; }
 .maxw-100 { max-width: 100% !important; }
+.maxw-1-2 { max-width: 50% !important; }
 .maxw-1-3 { max-width: 33.333333% !important; }
 .maxw-2-3 { max-width: 66.666667% !important; }
+.maxw-1-4 { max-width: 25% !important; }
+.maxw-3-4 { max-width: 75% !important; }
 
 // Min-height (percentage)
 .minh-5 { min-height: 5% !important; }
@@ -489,8 +538,11 @@ $spacers: (
 .minh-90 { min-height: 90% !important; }
 .minh-95 { min-height: 95% !important; }
 .minh-100 { min-height: 100% !important; }
+.minh-1-2 { min-height: 50% !important; }
 .minh-1-3 { min-height: 33.333333% !important; }
 .minh-2-3 { min-height: 66.666667% !important; }
+.minh-1-4 { min-height: 25% !important; }
+.minh-3-4 { min-height: 75% !important; }
 
 // Max-height (percentage)
 .maxh-5 { max-height: 5% !important; }
@@ -513,8 +565,11 @@ $spacers: (
 .maxh-90 { max-height: 90% !important; }
 .maxh-95 { max-height: 95% !important; }
 .maxh-100 { max-height: 100% !important; }
+.maxh-1-2 { max-height: 50% !important; }
 .maxh-1-3 { max-height: 33.333333% !important; }
 .maxh-2-3 { max-height: 66.666667% !important; }
+.maxh-1-4 { max-height: 25% !important; }
+.maxh-3-4 { max-height: 75% !important; }
 
 // Position utilities
 .position-static {