@zolomedia/bifrost-client 1.7.78 → 1.7.80

package/L2_Handling/display/outputs/table_renderer.js

@@ -218,7 +218,7 @@ export class TableRenderer {
     // Render caption as a description line UNDER the title (not a full-width row
     // inside the table). Reads like a subtitle: what the table shows / source / date.
     if (caption) {
-      const captionElement = createElement('p', ['zMuted', 'zMb-3']);
+      const captionElement = createElement('p', ['zText-muted', 'zmb-3']);
       captionElement.style.fontSize = '0.875rem';
       captionElement.textContent = this._decodeUnicodeEscapes(caption);
       wrapper.appendChild(captionElement);
@@ -323,7 +323,7 @@ export class TableRenderer {
 
     // Apply zTheme styling
     setAttributes(titleElement, {
-      class: 'zMb-3 zText-dark',
+      class: 'zmb-3 zText-dark',
       style: `font-weight: ${TYPOGRAPHY.FONT_WEIGHTS.MEDIUM};`
     });
 
@@ -574,7 +574,7 @@ export class TableRenderer {
     const jumpContainer = createDiv();
     jumpContainer.classList.add(
       'zD-flex',
-      'zAlign-items-center',
+      'zFlex-items-center',
       getGapClass(2)
     );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolomedia/bifrost-client",
-  "version": "1.7.78",
+  "version": "1.7.80",
   "description": "Browser client for zBifrost — the WebSocket bridge that turns JSON events from a zOS server into live DOM. Thin bootstrap + server-controlled core.",
   "homepage": "https://github.com/ZoloAi/zbifrost-client#readme",
   "repository": {

package/zSys/theme/zbase.css

@@ -1052,6 +1052,10 @@ zNavBar .zNav-link.active {
 }
 
 .zText-muted    { opacity: 0.6; }
+.zText-dark     { color: #f9fafb; }
+.zBorder        { border: 1px solid rgba(255, 255, 255, 0.12); }
+.zShadow-sm     { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
+.zBg-white      { background: rgba(255, 255, 255, 0.04); }
 .zText-center   { text-align: center !important; }
 .zText-start    { text-align: left !important; }
 .zText-end      { text-align: right !important; }
@@ -1114,6 +1118,12 @@ zNavBar .zNav-link.active {
   opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none;
 }
 
+/* Generic disabled — covers outline/plain buttons (e.g. paging First/Prev at edge)
+ * so a disabled control always reads as muted and never out-ranks an active one. */
+.zBtn:disabled, .zBtn[disabled] {
+  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
+}
+
 /* SSOT fills — keyed to --color-* (same tokens/hexes as .zText-*), so a button
  * matches a heading of the same color name. Dark text on the light hues
  * (primary/success/warning/info), white on the deep ones (secondary/danger). */
@@ -1124,6 +1134,47 @@ zNavBar .zNav-link.active {
 .zBtn-warning   { background: var(--color-warning,   #FFB347); color: #3a2400; }
 .zBtn-info      { background: var(--color-info,       #5CA9FF); color: #07243d; }
 
+/* Size + outline + group variants — emitted by the renderer (e.g. the zTable
+ * paging control bar). Outline buttons keep the base box model and only swap the
+ * skin (transparent fill, token-tinted text/border). */
+.zBtn-sm { padding: 0.32rem 0.7rem; font-size: 0.82rem; border-radius: 7px; }
+.zBtn-lg { padding: 0.8rem 1.8rem;  font-size: 1.05rem; border-radius: 11px; }
+
+.zBtn-outline-primary,
+.zBtn-outline-secondary,
+.zBtn-outline-success,
+.zBtn-outline-warning,
+.zBtn-outline-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 1.4;
+  background: transparent;
+  border-color: currentColor;
+  transition: background 0.15s ease, transform 0.08s ease;
+}
+.zBtn-outline-primary   { color: var(--color-primary,   #A2D46E); }
+.zBtn-outline-secondary { color: var(--color-secondary, #9370DB); }
+.zBtn-outline-success   { color: var(--color-success,   #52B788); }
+.zBtn-outline-warning   { color: var(--color-warning,   #FFB347); }
+.zBtn-outline-info      { color: var(--color-info,       #5CA9FF); }
+.zBtn-outline-primary:hover,
+.zBtn-outline-secondary:hover,
+.zBtn-outline-success:hover,
+.zBtn-outline-warning:hover,
+.zBtn-outline-info:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.zBtn-group { display: inline-flex; }
+.zBtn-group > .zBtn { border-radius: 0; }
+.zBtn-group > .zBtn:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
+.zBtn-group > .zBtn:last-child  { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
+.zBtn-group > .zBtn:not(:first-child) { margin-left: -1px; }
+
 /* Structural display defaults */
 .zSignal     { display: block; }
 .zCard       { position: relative; }