@kubex/zinc 1.1.84 → 1.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.84",
+  "version": "1.1.85",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/flow-builder/flow-builder.scss

@@ -141,6 +141,12 @@
   // rather than the navbar's default body colour.
   --zn-active-nav-background: var(--zn-panel);
 
+  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
+  // navbar under a zn-page — over the panel the translucent white just reads
+  // as white. Pin the standard tab tint instead.
+  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
+  --navbar-page-inactive-tab-filter: none;
+
   border-right: 1px solid rgb(var(--zn-border-color));
 
   // The registry-driven steps panel fills the column below the title block.

package/src/components/theme-editor/theme-editor.component.ts

@@ -5,6 +5,7 @@ import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from '../button';
+import ZnButtonGroup from '../button-group';
 import ZnCollapsible from '../collapsible';
 import ZnIcon from '../icon';
 import ZnNavbar from '../navbar';
@@ -84,6 +85,7 @@ interface DerivedStructure {
  * @dependency zn-preview-frame
  * @dependency zn-icon
  * @dependency zn-button
+ * @dependency zn-button-group
  * @dependency zn-tabs
  * @dependency zn-navbar
  * @dependency zn-select
@@ -135,6 +137,7 @@ export default class ZnThemeEditor extends ZincElement {
     'zn-preview-frame': ZnPreviewFrame,
     'zn-icon': ZnIcon,
     'zn-button': ZnButton,
+    'zn-button-group': ZnButtonGroup,
     'zn-tabs': ZnTabs,
     'zn-navbar': ZnNavbar,
     'zn-select': ZnSelect,
@@ -822,13 +825,14 @@ export default class ZnThemeEditor extends ZincElement {
           <div class="editor__controls-inner">
             <div part="controls-header" class="editor__controls-header">
               ${this.controlsCaption ? html`<span class="editor__caption">${this.controlsCaption}</span>` : nothing}
-              <button type="button"
-                      class="editor__mode"
-                      data-mode-toggle
-                      aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
-                      @click="${this._toggleMode}">
-                <zn-icon src="${this.mode === 'dark' ? 'sun' : 'moon'}" library="lucide" size="16"></zn-icon>
-              </button>
+              <zn-button class="editor__mode"
+                         icon-button="small"
+                         icon-size="20"
+                         icon="${this.mode === 'dark' ? 'sun@lu' : 'moon@lu'}"
+                         data-mode-toggle
+                         tooltip="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
+                         aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
+                         @click="${this._toggleMode}"></zn-button>
             </div>
             <div class="editor__controls-body">
               <div
@@ -870,17 +874,17 @@ export default class ZnThemeEditor extends ZincElement {
           <div part="toolbar" class="editor__toolbar">
             ${this.previewCaption ? html`<span class="editor__caption">${this.previewCaption}</span>` : nothing}
             <div class="editor__toolbar-actions">
-              <div class="editor__devices" role="group" aria-label="Preview width">
+              <zn-button-group class="editor__devices" aria-label="Preview width">
                 ${DEVICES.map(d => html`
-                  <button type="button"
-                          class="editor__device"
-                          data-device="${d.id}"
-                          aria-label="${d.label}"
-                          aria-pressed="${this.device === d.id ? 'true' : 'false'}"
-                          @click="${() => this._setDevice(d.id)}">
-                    <zn-icon src="${d.icon}" library="lucide" size="16"></zn-icon>
-                  </button>`)}
-              </div>
+                  <zn-button class="editor__device"
+                             icon-button="small"
+                             icon-size="20"
+                             icon="${d.icon}@lu"
+                             data-device="${d.id}"
+                             aria-label="${d.label}"
+                             aria-pressed="${this.device === d.id ? 'true' : 'false'}"
+                             @click="${() => this._setDevice(d.id)}"></zn-button>`)}
+              </zn-button-group>
               ${this._sourcesSafe().length > 0 ? html`
                 <zn-select
                   class="editor__sources"

package/src/components/theme-editor/theme-editor.scss

@@ -70,6 +70,12 @@
   // rather than the navbar's default body colour (flow-builder pattern).
   --zn-active-nav-background: var(--zn-panel);
 
+  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
+  // navbar under a zn-page — over the editor's opaque panel the translucent
+  // white just reads as white. Pin the standard tab tint instead.
+  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
+  --navbar-page-inactive-tab-filter: none;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -235,44 +241,21 @@
   }
 }
 
-.editor__devices {
-  display: flex;
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.editor__device,
-.editor__mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: rgb(var(--zn-text));
-  cursor: pointer;
-}
-
-.editor__device + .editor__device {
-  border-left: 1px solid rgb(var(--zn-border-color));
-}
-
-.editor__device:hover,
-.editor__mode:hover {
-  background: rgba(var(--zn-border-color), 0.5);
-}
-
+// The device switcher is zn-button[icon-button="small"]s joined into a
+// segmented control by zn-button-group; only the active fill is styled here.
 .editor__device[aria-pressed="true"] {
-  background: rgb(var(--zn-primary));
-  color: white;
+  // The button's shadow border-color is !important, so it can only be
+  // overridden through its own custom property.
+  --zn-button-border-color: rgb(var(--zn-primary));
+
+  // !important so the fill also beats the button's shadow hover background.
+  &::part(base) {
+    background: rgb(var(--zn-primary)) !important;
+    color: white !important;
+  }
 }
 
 .editor__mode {
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: 4px;
   // Sole occupant of .editor__controls-header's right side, beside the caption.
   margin-left: auto;
 }