@keenmate/pure-admin-core 2.2.0 → 2.3.1

package/README.md

@@ -2,17 +2,18 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.2.0
+## What's New in 2.3.1
 
-- **Theme color slots (1-9) across components** — Alerts, callouts, toasts, and buttons now support `--color-{1-9}` and `--outline-color-{1-9}` variants using the 9 custom theme color slots. Themes that define `$color-1` through `$color-9` get matching component styles automatically
-- **Filled toast variants** — New `pa-toast--filled-*` variants with full-color backgrounds, contrast text, and semi-transparent progress bars. Available for all standard colors and theme color slots
-- **Unified card actions naming** — `pa-card__tools` replaced with `pa-card__actions` across both `pa-card` and `pa-table-card`
-- **Font Tuning Tool** (`/font-test`) — Developer utility for finding the right `@font-face` descriptor values when using custom fonts
+- **Split button fixes** — RTL layout, missing toggle border, menu closing on outside click, and flex menu layout with gap for items with inline action buttons
+- **Split button dropdown icons** — New `pa-btn-split__item-icon` element for icons in menu items
+- **Button label element** — New `pa-btn__label` for proper horizontal centering of icon+text in `pa-btn--align-center` buttons
+- **Select descender fix** — Added `line-height: normal` to `.pa-select` to prevent clipping on native selects
 
-## What's New in 2.1.0
+## What's New in 2.3.0
 
-- **Unified card actions naming** — `pa-card__tools` replaced with `pa-card__actions` across both `pa-card` and `pa-table-card`. Header and footer now use the same element name, disambiguated by context
-- **Font Tuning Tool** (`/font-test`) — Developer utility for finding the right `@font-face` descriptor values (`ascent-override`, `descent-override`, `size-adjust`) when using custom fonts. Loads any Google Font, generates variants for visual comparison, and outputs a copyable CSS snippet
+- **Toast action buttons** — New `pa-toast__actions` element for action buttons inside toasts, separated by a border-top. Toast service supports `actions: [{ label, variant, onClick }]` with auto-dismiss on click
+- **Toast service improvements** — `filled`, `progressColor`, and `maxWidth` options. Container width ratchets up to the widest toast shown, preventing layout jitter when toasts dismiss
+- **Toast progress bar** — More visible: 5px height, 0.6 opacity (was 3px / 0.3)
 
 ## Installation
 
@@ -340,6 +341,10 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 ### Toasts
 - `.pa-toast` - Base toast
 - `.pa-toast--primary/success/danger/warning/info` - Variants
+- `.pa-toast--filled-primary/success/danger/warning/info` - Filled variants (full-color background)
+- `.pa-toast--color-{1-9}` / `.pa-toast--filled-color-{1-9}` - Theme color slot variants
+- `.pa-toast__actions` - Action button row with border-top separator
+- `.pa-toast__progress` - Auto-dismiss progress bar (5px, 0.6 opacity)
 - Positions (RTL-aware): `top-end`, `top-center`, `top-start`, `bottom-end`, `bottom-center`, `bottom-start`
 
 ### Tooltips & Popovers

package/dist/css/main.css

@@ -7641,6 +7641,9 @@ a.pa-card p {
   margin-inline-end: 0;
   margin-inline-start: 0.8rem;
 }
+.pa-btn__label {
+  flex: 0 1 auto;
+}
 .pa-btn:has(.pa-btn__icon) {
   text-align: start;
   display: inline-flex;
@@ -7674,6 +7677,10 @@ a.pa-card p {
 .pa-btn--align-center {
   justify-content: center;
 }
+.pa-btn--align-center .pa-btn__label {
+  flex: 1;
+  text-align: center;
+}
 .pa-btn--align-justify {
   justify-content: space-between;
 }
@@ -7766,9 +7773,6 @@ a.pa-card p {
   position: relative;
   display: inline-flex;
 }
-[dir=rtl] .pa-btn-split {
-  flex-direction: row-reverse;
-}
 .pa-btn-split .pa-btn {
   border-radius: 0;
 }
@@ -7781,7 +7785,6 @@ a.pa-card p {
   border-start-end-radius: 4px;
   border-end-end-radius: 4px;
   border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
-  border-inline-end: none;
   padding-inline: 0;
   display: inline-flex;
   align-items: center;
@@ -7813,6 +7816,8 @@ a.pa-card p {
 }
 .pa-btn-split__menu {
   display: none;
+  flex-direction: column;
+  gap: 0.4rem;
   position: fixed;
   top: 0;
   left: 0;
@@ -7825,10 +7830,12 @@ a.pa-card p {
   padding: 0.4rem 0;
 }
 .pa-btn-split__menu--open {
-  display: block;
+  display: flex;
 }
 .pa-btn-split__item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
   width: 100%;
   padding: 0.8rem 1.6rem;
   border: none;
@@ -7849,6 +7856,15 @@ a.pa-card p {
   background-color: var(--pa-btn-danger-bg);
   color: var(--pa-btn-danger-text);
 }
+.pa-btn-split__item-icon {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
 
 /* ========================================
    Loader Components
@@ -9220,6 +9236,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
   font-size: 1.4rem;
+  line-height: normal;
   background-color: var(--pa-input-bg);
   color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
@@ -12798,6 +12815,15 @@ code {
   line-height: 1.5;
 }
 
+.pa-toast__actions {
+  margin-top: 1.6rem;
+  padding-top: 1.6rem;
+  border-top: 1px solid var(--pa-border-color);
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
 .pa-toast__close {
   flex-shrink: 0;
   background: none;
@@ -12828,9 +12854,9 @@ code {
   position: absolute;
   bottom: 0;
   inset-inline-start: 0;
-  height: 3px;
+  height: 5px;
   background-color: currentColor;
-  opacity: 0.3;
+  opacity: 0.6;
   transition: width linear;
 }
 
@@ -12988,6 +13014,10 @@ code {
   color: var(--pa-color-9);
 }
 
+[class*=pa-toast--filled] .pa-toast__actions {
+  border-top-color: rgba(255, 255, 255, 0.25);
+}
+
 .pa-toast--filled-primary {
   background-color: var(--pa-btn-primary-bg);
   border-color: var(--pa-btn-primary-bg);

package/package.json

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