@kubex/zinc 1.1.83 → 1.1.85

package/docs/pages/components/theme-editor.md

@@ -294,12 +294,14 @@ no dropdown rendered.
 ## Collapsing the controls column
 
 Set `controls-collapsed` to hide the controls column, or click the chevron
-toggle that sits on the seam between the columns. Collapsing is purely a
+toggle that straddles the seam between the columns — the same edge chevron
+the flow and page builders use for their side panels. Collapsing is purely a
 layout change — it never affects harvested values or pushes a new theme to
-the preview. Below the 768px stacked breakpoint the toggle is hidden, since
-there's no side-by-side seam to tuck into — the editor also un-collapses
-itself if it's already showing `controls-collapsed` when the layout narrows
-that far, so the controls are never stuck unreachable.
+the preview. Below the 768px stacked breakpoint the columns stack vertically
+and the chevron attaches to the horizontal seam above the preview instead;
+crossing into that breakpoint also auto-collapses the controls (once —
+re-expanding while narrow is respected), and the toggle stays available to
+bring them back.
 
 ## Standalone panel
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.83",
+  "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

@@ -1,6 +1,7 @@
 @use "../../wc";
 
 :host {
+  @include wc.scrollbars; // styles scrollbars of all descendant scroll areas (controls column), as the other builders do
   display: block;
   // Matches page-builder's --palette-col.
   --zn-theme-editor-controls-width: 343px;
@@ -65,6 +66,16 @@
 }
 
 .editor__controls {
+  // Colour the tab strip's active tab to match the controls panel surface,
+  // 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;
@@ -192,80 +203,59 @@
   flex-direction: column;
 }
 
-// A pull tab flush against the controls/main seam, rather than a dot floating
-// over it, positioned against .editor__main (not .editor__preview) so it stays
-// centred on the full-height seam rather than just the preview's portion of it.
-// Collapsed there is no seam to attach to, so it becomes a small pill.
+// Chevron straddling the controls/main seam — tuck the controls away / bring
+// them back (flow-builder pattern). Positioned against .editor__main (not
+// .editor__preview) so it stays centred on the full-height seam rather than
+// just the preview's portion of it.
 .panel-toggle {
   position: absolute;
   top: 50%;
-  left: 0;
   z-index: 6;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 44px;
+  width: 24px;
+  height: 24px;
   padding: 0;
-  border: 1px solid rgb(var(--zn-border-color));
-  border-left: 0;
-  border-radius: 0 6px 6px 0;
+  border-radius: 50%;
   color: rgb(var(--zn-color-muted-text));
   background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  box-shadow: 0 1px 3px rgba(var(--zn-shadow), 0.4);
   cursor: pointer;
-  transition: left 0.2s ease, color 0.12s ease, border-color 0.12s ease;
+  transition: left 0.2s ease, right 0.2s ease, color 0.12s ease, border-color 0.12s ease;
 
   &:hover {
     color: rgb(var(--zn-text));
-    background: rgba(var(--zn-border-color), 0.4);
+    border-color: rgb(var(--zn-color-border-active));
   }
 
-  &--tucked {
-    left: var(--zn-spacing-small);
-    border-left: 1px solid rgb(var(--zn-border-color));
-    border-radius: 6px;
-  }
-}
-
-.editor__devices {
-  display: flex;
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: 4px;
-  overflow: hidden;
-}
+  &--left {
+    left: -12px;
 
-.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);
+    // With the panel tucked away, sit fully inside the preview column.
+    &.panel-toggle--tucked {
+      left: 8px;
+    }
+  }
 }
 
+// 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;
 }
@@ -336,22 +326,19 @@
     padding-top: var(--zn-spacing-medium);
   }
 
-  // Stacked: the seam is horizontal, so the tab attaches to the top edge instead.
+  // Stacked: the seam is horizontal, so the chevron straddles the top edge instead.
   .panel-toggle {
-    top: 0;
-    left: 50%;
-    width: 44px;
-    height: 18px;
-    border: 1px solid rgb(var(--zn-border-color));
-    border-top: 0;
-    border-radius: 0 0 6px 6px;
+    top: -12px;
     transform: translateX(-50%);
-  }
+    transition: top 0.2s ease, color 0.12s ease, border-color 0.12s ease;
+
+    &--left {
+      left: 50%;
 
-  .panel-toggle--tucked {
-    top: var(--zn-spacing-small);
-    left: 50%;
-    border-top: 1px solid rgb(var(--zn-border-color));
-    border-radius: 6px;
+      &.panel-toggle--tucked {
+        top: 8px;
+        left: 50%;
+      }
+    }
   }
 }