@keenmate/pure-admin-core 1.4.0 → 1.5.0

package/README.md

@@ -194,23 +194,23 @@ Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
 - `.pa-navbar` - Fixed navbar container
 - `.pa-navbar__inner` - Inner content wrapper
 - **Three-section layout:**
-  - `.pa-header__left` - Left section (burger, brand, nav) - stays anchored left
+  - `.pa-header__start` - Start section (burger, brand, nav) - stays anchored to start
   - `.pa-header__center` - Center section (page title) - flexible
-  - `.pa-header__right` - Right section (notifications, profile) - stays anchored right
+  - `.pa-header__end` - End section (notifications, profile) - stays anchored to end
 - `.pa-header__burger` - Hamburger menu button
 - `.pa-header__brand` - Brand/logo container
 - `.pa-header__nav` - Navigation links container
-- `.pa-header__nav--left/--right` - Navigation position
+- `.pa-header__nav--start/--end` - Navigation position
 - `.pa-header__title` - Page title
 - `.pa-header__profile-btn` - Profile button
 
 ### Footer
 - `.pa-layout__footer` - Footer container (uses `min-height`, can expand)
 - **Three-section layout:**
-  - `.pa-footer__left` - Left section (copyright) - stays anchored left
+  - `.pa-footer__start` - Start section (copyright) - stays anchored to start
   - `.pa-footer__center` - Center section (optional) - flexible
-  - `.pa-footer__right` - Right section (version info, links) - stays anchored right
-  - `.pa-footer__right--vertical` - Stack items vertically with right-aligned text
+  - `.pa-footer__end` - End section (version info, links) - stays anchored to end
+  - `.pa-footer__end--vertical` - Stack items vertically
 
 ### Forms
 - `.pa-input` - Text inputs
@@ -311,7 +311,7 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-pager__info` - Page info display
 - `.pa-pager__input` - Page number input
 - `.pa-pager__text` - Text labels
-- `.pa-pager--left/center/right` - Alignment modifiers
+- `.pa-pager--start/center/end` - Alignment modifiers
 
 ### Load More
 - `.pa-load-more` - Load more container
@@ -320,7 +320,7 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-load-more__spinner` - Loading spinner
 - `.pa-load-more__text` - Button text
 - `.pa-load-more__count` - Item count display
-- `.pa-load-more--left/center/right` - Alignment modifiers
+- `.pa-load-more--start/center/end` - Alignment modifiers
 
 ### Statistics
 - `.pa-stat` - Base statistics component

package/dist/css/main.css

@@ -1332,18 +1332,10 @@
   flex-shrink: 1 !important;
 }
 
-.text-left {
-  text-align: left !important;
-}
-
 .text-center {
   text-align: center !important;
 }
 
-.text-right {
-  text-align: right !important;
-}
-
 .text-nowrap {
   white-space: nowrap !important;
 }
@@ -2790,7 +2782,7 @@ body.pa-container-2xl .pa-navbar {
   gap: 1.6rem;
 }
 
-.pa-header__left {
+.pa-header__start {
   display: flex;
   align-items: center;
   gap: 1.6rem;
@@ -2805,7 +2797,7 @@ body.pa-container-2xl .pa-navbar {
   justify-content: center;
 }
 
-.pa-header__right {
+.pa-header__end {
   display: flex;
   align-items: center;
   gap: 1.6rem;
@@ -2907,7 +2899,7 @@ body.pa-layout--sticky .pa-layout__inner {
   gap: 1.6rem;
 }
 
-.pa-footer__left {
+.pa-footer__start {
   display: flex;
   align-items: center;
   gap: 1.6rem;
@@ -2922,13 +2914,13 @@ body.pa-layout--sticky .pa-layout__inner {
   justify-content: center;
 }
 
-.pa-footer__right {
+.pa-footer__end {
   display: flex;
   align-items: center;
   gap: 1.6rem;
   flex-shrink: 0;
 }
-.pa-footer__right--vertical {
+.pa-footer__end--vertical {
   flex-direction: column;
   align-items: flex-end;
   gap: 0.4rem;
@@ -2940,22 +2932,22 @@ body.pa-layout--sticky .pa-layout__inner {
     min-height: auto;
     padding: 0.8rem 1.6rem;
   }
-  .pa-footer__left,
+  .pa-footer__start,
   .pa-footer__center,
-  .pa-footer__right {
+  .pa-footer__end {
     flex-shrink: 1;
     min-width: 0;
   }
-  .pa-footer__left {
+  .pa-footer__start {
     flex: 1 1 auto;
   }
   .pa-footer__center {
     display: none;
   }
-  .pa-footer__right {
+  .pa-footer__end {
     flex: 0 1 auto;
   }
-  .pa-footer__right--vertical {
+  .pa-footer__end--vertical {
     align-items: flex-end;
   }
 }
@@ -5340,6 +5332,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 1.6rem;
   min-width: 0;
 }
 .pa-card__header h1,
@@ -5368,9 +5361,40 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-text-color-1);
   font-size: 1.6rem;
 }
+.pa-card__header > h1,
+.pa-card__header > h2,
+.pa-card__header > h3,
+.pa-card__header > h4,
+.pa-card__header > h5,
+.pa-card__header > h6 {
+  flex-shrink: 0;
+}
+.pa-card__header > p {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--pa-text-color-2);
+  font-size: 1.4rem;
+}
+.pa-card__header .pa-card__actions,
+.pa-card__header .pa-btn-group {
+  flex-shrink: 0;
+}
 .pa-card__header .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
+  flex-shrink: 0;
+}
+.pa-card__header--wrap {
+  flex-wrap: wrap;
+}
+.pa-card__header--wrap > p {
+  white-space: normal;
+  flex-basis: 100%;
+  order: 1;
+  margin-top: 0.4rem;
 }
 .pa-card__title {
   display: flex;
@@ -5888,18 +5912,18 @@ a.pa-card p {
 .pa-tabs--scrollable .pa-tabs__scroll-btn:hover {
   background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
 }
-.pa-tabs--scrollable .pa-tabs__scroll-btn--left, .pa-tabs--scrollable .pa-tabs__scroll-btn--start {
+.pa-tabs--scrollable .pa-tabs__scroll-btn--start {
   inset-inline-start: 0;
   background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
-[dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--left, [dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--start {
+[dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--start {
   background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
-.pa-tabs--scrollable .pa-tabs__scroll-btn--right, .pa-tabs--scrollable .pa-tabs__scroll-btn--end {
+.pa-tabs--scrollable .pa-tabs__scroll-btn--end {
   inset-inline-end: 0;
   background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
-[dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--right, [dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--end {
+[dir=rtl] .pa-tabs--scrollable .pa-tabs__scroll-btn--end {
   background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
 .pa-tabs--scrollable .pa-tabs__scroll-btn--visible {
@@ -7314,16 +7338,16 @@ a.pa-card p {
 .pa-btn:has(.pa-btn__icon) .pa-btn__icon:last-child {
   margin: 0;
 }
-.pa-btn--align-left {
+.pa-btn--align-start {
   justify-content: flex-start;
 }
-.pa-btn--align-left .pa-btn__icon {
+.pa-btn--align-start .pa-btn__icon {
   padding-inline-start: 0;
 }
-.pa-btn--align-right {
+.pa-btn--align-end {
   justify-content: flex-end;
 }
-.pa-btn--align-right .pa-btn__icon {
+.pa-btn--align-end .pa-btn__icon {
   padding-inline-end: 0;
 }
 .pa-btn--align-center {
@@ -8188,7 +8212,7 @@ a.pa-card p {
   text-align: end;
 }
 
-.pa-popover--right .pa-popover__body {
+.pa-popover--end .pa-popover__body {
   text-align: end;
 }
 
@@ -10501,6 +10525,10 @@ web-multiselect {
 .pa-table-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.pa-table-card:has(.pa-detail-view) .pa-table-card__body {
+  position: relative;
+  overflow: hidden;
+}
 .pa-table-card__header {
   padding: 0.5rem 1rem;
   min-height: 4rem;
@@ -10569,6 +10597,27 @@ web-multiselect {
 .pa-table-card__body .pa-table tbody tr:last-child td {
   border-bottom: none;
 }
+.pa-table-card__body .pa-detail-view {
+  height: 100%;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table {
+  border-radius: 0;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table th:first-child,
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table td:first-child {
+  padding-inline-start: 1rem;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table th:last-child,
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table td:last-child {
+  padding-inline-end: 1rem;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main .pa-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.pa-table-card__body .pa-detail-view .pa-detail-view__main web-grid {
+  --wg-cell-padding-left: 1rem;
+  --wg-cell-padding-right: 1rem;
+}
 .pa-table-card__footer {
   padding: 1.2rem 1rem;
   border-top: 1px solid var(--pa-border-color);
@@ -10724,6 +10773,10 @@ web-multiselect {
   border-radius: 0;
   padding-inline: 0;
 }
+.pa-table-card--plain .pa-table-card__body:has(.pa-detail-view--overlay) {
+  position: relative;
+  overflow: hidden;
+}
 .pa-table-card--plain .pa-table-card__footer {
   background: transparent;
   border-top: none;
@@ -10828,13 +10881,13 @@ web-multiselect {
 .pa-pager {
   justify-content: center;
 }
-.pa-pager--left {
+.pa-pager--start {
   justify-content: flex-start;
 }
 .pa-pager--center {
   justify-content: center;
 }
-.pa-pager--right {
+.pa-pager--end {
   justify-content: flex-end;
 }
 .pa-pager__container {
@@ -10874,13 +10927,13 @@ web-multiselect {
 .pa-load-more {
   justify-content: center;
 }
-.pa-load-more--left {
+.pa-load-more--start {
   justify-content: flex-start;
 }
 .pa-load-more--center {
   justify-content: center;
 }
-.pa-load-more--right {
+.pa-load-more--end {
   justify-content: flex-end;
 }
 .pa-load-more__button {
@@ -11398,13 +11451,13 @@ code {
 .pa-pager {
   justify-content: center;
 }
-.pa-pager--left {
+.pa-pager--start {
   justify-content: flex-start;
 }
 .pa-pager--center {
   justify-content: center;
 }
-.pa-pager--right {
+.pa-pager--end {
   justify-content: flex-end;
 }
 .pa-pager__container {
@@ -11444,13 +11497,13 @@ code {
 .pa-load-more {
   justify-content: center;
 }
-.pa-load-more--left {
+.pa-load-more--start {
   justify-content: flex-start;
 }
 .pa-load-more--center {
   justify-content: center;
 }
-.pa-load-more--right {
+.pa-load-more--end {
   justify-content: flex-end;
 }
 .pa-load-more__button {
@@ -12511,60 +12564,60 @@ code {
   padding: 3.2rem 3.2rem 3.2rem calc(6.4rem + 40px);
   border-radius: 500px 0 0 500px;
 }
-.pa-timeline--alternating.pa-timeline--left::after {
+.pa-timeline--alternating.pa-timeline--start::after {
   left: 90px;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item {
   width: 100%;
   padding-left: 120px;
   padding-right: 0;
   left: 0 !important;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item::after {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item::after {
   left: 82px;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item::before {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item::before {
   left: 100px;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item .pa-timeline__date {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item .pa-timeline__date {
   right: auto;
   left: 15px;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item .pa-timeline__icon {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item .pa-timeline__icon {
   right: auto;
   left: 146px;
 }
-.pa-timeline--alternating.pa-timeline--left .pa-timeline__item .pa-timeline__content {
+.pa-timeline--alternating.pa-timeline--start .pa-timeline__item .pa-timeline__content {
   padding: 3.2rem 3.2rem 3.2rem calc(6.4rem + 40px);
   border-radius: 500px 0 0 500px;
 }
-.pa-timeline--alternating.pa-timeline--right::after {
+.pa-timeline--alternating.pa-timeline--end::after {
   right: 90px;
   left: auto;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item {
   width: 100%;
   padding-left: 0;
   padding-right: 120px;
   left: 0 !important;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item::after {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item::after {
   right: 82px;
   left: auto;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item::before {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item::before {
   right: 100px;
   left: auto;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item .pa-timeline__date {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item .pa-timeline__date {
   left: auto;
   right: 15px;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item .pa-timeline__icon {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item .pa-timeline__icon {
   left: auto;
   right: 146px;
 }
-.pa-timeline--alternating.pa-timeline--right .pa-timeline__item .pa-timeline__content {
+.pa-timeline--alternating.pa-timeline--end .pa-timeline__item .pa-timeline__content {
   padding: 3.2rem calc(6.4rem + 40px) 3.2rem 3.2rem;
   border-radius: 0 500px 500px 0;
 }
@@ -13771,14 +13824,17 @@ code {
   top: 0;
   inset-inline-end: 0;
   height: 100%;
-  z-index: 2;
+  z-index: 3501;
+}
+.pa-detail-view--overlay .pa-detail-view__panel--open {
+  max-width: 100%;
 }
 
 .pa-detail-view__overlay {
   position: absolute;
   inset: 0;
   background-color: var(--pa-detail-panel-overlay-bg);
-  z-index: 1;
+  z-index: 3500;
   opacity: 0;
   visibility: hidden;
   cursor: pointer;
@@ -14559,6 +14615,62 @@ html.font-size-xlarge {
   max-height: 50rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -14594,6 +14706,10 @@ html.font-size-xlarge {
   overflow-x: overlay;
 }
 
+.pa-scroll-lock {
+  overflow: hidden !important;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -14669,12 +14785,6 @@ html.font-size-xlarge {
 .pa-text--end {
   text-align: end;
 }
-.pa-text--left {
-  text-align: start;
-}
-.pa-text--right {
-  text-align: end;
-}
 .pa-text--caption {
   font-size: 1.2rem;
   color: var(--pa-text-color-2);
@@ -15193,11 +15303,3 @@ html.font-size-xlarge {
 .text-end {
   text-align: end;
 }
-
-.text-left {
-  text-align: start;
-}
-
-.text-right {
-  text-align: end;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {
@@ -38,7 +38,7 @@
     "components",
     "ui-kit"
   ],
-  "author": "Pure Admin",
+  "author": "KeenMate",
   "license": "MIT",
   "peerDependencies": {
     "sass": "^1.0.0"
@@ -48,12 +48,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pure-admin/core.git"
+    "url": "git+https://github.com/KeenMate/pure-admin.git",
+    "directory": "packages/core"
   },
   "bugs": {
-    "url": "https://github.com/pure-admin/core/issues"
+    "url": "https://github.com/KeenMate/pure-admin/issues"
   },
-  "homepage": "https://github.com/pure-admin/core#readme",
+  "homepage": "https://github.com/KeenMate/pure-admin#readme",
   "publishConfig": {
     "access": "public"
   }

package/snippets/buttons.html

@@ -263,14 +263,14 @@
 
 <!-- BUTTON ALIGNMENT -->
 
-<!-- Left Aligned (icon flush to left) -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-left">
+<!-- Start Aligned (icon flush to inline-start) -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-start">
   <span class="pa-btn__icon">✓</span>
   Save
 </button>
 
-<!-- Right Aligned (icon flush to right) -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-right">
+<!-- End Aligned (icon flush to inline-end) -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-end">
   Save
   <span class="pa-btn__icon">✓</span>
 </button>