@kubex/zinc 1.1.70 → 1.1.71

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

@@ -29,6 +29,14 @@ The preview always fills its column, leaving no dead space beneath it.
 it's still forwarded to the [preview frame](/components/preview-frame/), which
 uses it the same way.
 
+The preview column alone sets the editor's height — the controls never stretch
+it, however many sections are expanded, they just scroll in place. So the
+editor is as tall as its parent when that parent has a definite height, and
+`min-height` tall otherwise; either way the controls and the preview scroll
+independently while the header, toolbar and footer rows stay put. Stacked
+(under 768px) there's no second column to take the height from, so both flow
+with the page and there's only ever one scrollbar.
+
 Controls organize themselves into tabs with collapsible groups inside each:
 give each one a `group` and a `category` and the editor builds the structure
 around them, no slot names required.

package/package.json

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

package/scss/_global-spacing.scss

@@ -69,6 +69,13 @@
   margin-top: var(--zn-base-gap);
 }
 
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+}
+
 zn-form-group ~ zn-form-group {
   margin-top: var(--zn-base-gap);
   padding-top: var(--zn-base-gap);

package/src/components/button/button.scss

@@ -129,7 +129,7 @@
   }
 
 
-  background-color: rgba(var(--btn-color), .85);
+  background-color: rgba(var(--btn-color));
   border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
   color: rgba(255, 255, 255, 0.9);
 

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

@@ -819,38 +819,40 @@ export default class ZnThemeEditor extends ZincElement {
       <div part="base" class="editor ${this.controlsCollapsed ? 'editor--controls-collapsed' : ''}"
            style="min-height: ${this.minHeight}px">
         <div part="controls" class="editor__controls">
-          <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>
-          </div>
-          <div class="editor__controls-body">
-            <div
-              class="editor__fields ${this.hasSlotController.test('[default]') ? '' : 'editor__fields--sections-only'}"
-              @zn-change="${this._onControlChange}"
-              @zn-input="${this._onControlChange}"
-              @change="${this._onControlChange}"
-              @input="${this._onControlChange}">
-              <slot @slotchange="${this._onSlotChange}"></slot>
-              ${this._hasNestedGroups()
-                ? this._renderTabs(section => html`
-                    ${this._hasAssignedControls(section.name) ? html`
-                      <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>` : nothing}
-                    ${this._renderGroups(section)}`)
-                : this.sectionLayout === 'tabs'
+          <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>
+            </div>
+            <div class="editor__controls-body">
+              <div
+                class="editor__fields ${this.hasSlotController.test('[default]') ? '' : 'editor__fields--sections-only'}"
+                @zn-change="${this._onControlChange}"
+                @zn-input="${this._onControlChange}"
+                @change="${this._onControlChange}"
+                @input="${this._onControlChange}">
+                <slot @slotchange="${this._onSlotChange}"></slot>
+                ${this._hasNestedGroups()
                   ? this._renderTabs(section => html`
-                      <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
-                  : this._renderSections()}
+                      ${this._hasAssignedControls(section.name) ? html`
+                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>` : nothing}
+                      ${this._renderGroups(section)}`)
+                  : this.sectionLayout === 'tabs'
+                    ? this._renderTabs(section => html`
+                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
+                    : this._renderSections()}
+              </div>
+              ${this.hasSlotController.test('footer') ? html`
+                <div part="footer" class="editor__footer">
+                  <slot name="footer"></slot>
+                </div>` : nothing}
             </div>
-            ${this.hasSlotController.test('footer') ? html`
-              <div part="footer" class="editor__footer">
-                <slot name="footer"></slot>
-              </div>` : nothing}
           </div>
         </div>
 

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

@@ -4,6 +4,10 @@
   display: block;
   // Matches page-builder's --palette-col.
   --zn-theme-editor-controls-width: 343px;
+  // Resolves to auto when the parent height is indefinite, so the editor still
+  // grows to its content there; given a definite parent it stays inside it and
+  // the two columns scroll on their own instead.
+  height: 100%;
 }
 
 .editor {
@@ -11,6 +15,7 @@
 
   display: flex;
   align-items: stretch;
+  height: 100%;
 
   &--controls-collapsed {
     --controls-col: 0px;
@@ -38,6 +43,7 @@
 .editor__toolbar {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 44px;
   gap: var(--zn-spacing-small);
   padding: var(--zn-spacing-small) var(--zn-spacing-medium);
@@ -59,6 +65,7 @@
 }
 
 .editor__controls {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex: 0 0 var(--controls-col);
@@ -70,9 +77,21 @@
   transition: flex-basis 0.2s ease;
 }
 
+// Taken out of flow so the controls contribute no height to the row: expanding
+// a section can then never stretch the editor, it just scrolls in place. The
+// preview column alone sets the height (its own min-height, or the parent's if
+// that is definite).
+.editor__controls-inner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .editor__controls-header {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 44px;
   padding: var(--zn-spacing-small) var(--zn-spacing-medium);
 }
@@ -82,6 +101,7 @@
   flex-direction: column;
   gap: var(--zn-spacing-medium);
   flex: 1 1 auto;
+  min-height: 0;
 }
 
 .editor__main {
@@ -90,12 +110,17 @@
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
 }
 
+// The sidebar's scroll region: the header above and the footer below stay put.
 .editor__fields {
   display: flex;
   flex-direction: column;
   gap: var(--zn-spacing-medium);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 // Supports an author hand-slotting a bare zn-collapsible into the default slot.
@@ -148,16 +173,19 @@
 
 .editor__footer {
   display: flex;
+  flex: 0 0 auto;
   gap: var(--zn-spacing-small);
   padding-top: var(--zn-spacing-small);
   border-top: 1px solid rgb(var(--zn-border-color));
   margin-top: auto;
 }
 
+// The preview's scroll region: the toolbar above stays put.
 .editor__preview {
-  overflow: visible;
+  overflow: auto;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
@@ -267,8 +295,20 @@
 
 // 768 must match STACKED_QUERY in theme-editor.component.ts.
 @media (max-width: 768px) {
+  // Stacked, the two columns share one vertical axis, so they flow with the
+  // page rather than each owning a cramped scroller of its own.
+  :host {
+    height: auto;
+  }
+
   .editor {
     flex-direction: column;
+    height: auto;
+  }
+
+  .editor__fields,
+  .editor__preview {
+    overflow: visible;
   }
 
   .editor__controls {
@@ -278,6 +318,12 @@
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 
+  // Stacked there is no second column to take the height from, so the controls
+  // go back in flow and size themselves.
+  .editor__controls-inner {
+    position: static;
+  }
+
   .editor--controls-collapsed .editor__controls {
     display: none;
   }