@keenmate/pure-admin-core 2.2.0 → 2.3.0

package/README.md

@@ -2,17 +2,16 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
+## What's New in 2.3.0
+
+- **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)
+
 ## What's New in 2.2.0
 
 - **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
-
-## What's New in 2.1.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
 
 ## Installation
 
@@ -340,6 +339,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

@@ -12798,6 +12798,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 +12837,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 +12997,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.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

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

@@ -179,6 +179,16 @@
   line-height: $line-height-base;
 }
 
+// Toast actions (buttons under a separator)
+.pa-toast__actions {
+  margin-top: $spacing-base;
+  padding-top: $spacing-base;
+  border-top: $border-width-base solid var(--pa-border-color);
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
 // Toast close button
 .pa-toast__close {
   flex-shrink: 0;
@@ -215,7 +225,7 @@
   inset-inline-start: 0; // RTL: flips to right
   height: $toast-progress-height;
   background-color: currentColor;
-  opacity: 0.3;
+  opacity: 0.6;
   transition: width linear;
 }
 
@@ -309,6 +319,11 @@
 
 // ===== FILLED TOAST VARIANTS =====
 
+// Filled toast actions: separator color + reset button colors from toast inheritance
+[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/src/scss/variables/_components.scss

@@ -397,7 +397,7 @@ $toast-padding-v: $spacing-md !default;
 $toast-padding-h: $spacing-md !default;
 $toast-icon-size: 3.2rem !default;           // 32px (was 2rem)
 $toast-close-size: 2.4rem !default;          // 24px (was 1.5rem)
-$toast-progress-height: 3px !default;
+$toast-progress-height: 5px !default;
 
 // ============================================================================
 // TOOLTIP SYSTEM