@kubex/zinc 1.1.28 → 1.1.29

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

@@ -34,6 +34,19 @@
   &.resizing * {
     cursor: nwse-resize !important;
   }
+
+  // While a stray branch is live, everything is either a target (a node) or a cancel.
+  &.linking {
+    cursor: crosshair;
+  }
+
+  // While dragging a step, emphasise every "+" so the drop targets are obvious.
+  &.step-dragging .add-point {
+    color: rgb(var(--zn-panel));
+    background: rgb(var(--zn-color-primary));
+    border-style: solid;
+    box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 22%, transparent);
+  }
 }
 
 .connections {
@@ -48,22 +61,22 @@
     fill: none;
     stroke: rgb(var(--zn-color-primary));
     stroke-width: 2;
-  }
 
-  .wire--stub {
-    stroke: rgb(var(--zn-color-border-active));
-    stroke-dasharray: 4 4;
-  }
+    &--stub {
+      stroke: rgb(var(--zn-color-border-active));
+      stroke-dasharray: 4 4;
+    }
 
-  // The stray branch following the cursor while picking a node to attach to.
-  .wire--preview {
-    stroke-dasharray: 6 4;
-  }
+    // The stray branch following the cursor while picking a node to attach to.
+    &--preview {
+      stroke-dasharray: 6 4;
+    }
 
-  // A wire that loops back to an earlier step — solid amber, so return paths
-  // stand out from the forward flow.
-  .wire--loop {
-    stroke: rgb(var(--zn-color-warning));
+    // A wire that loops back to an earlier step — solid amber, so return paths
+    // stand out from the forward flow.
+    &--loop {
+      stroke: rgb(var(--zn-color-warning));
+    }
   }
 
   marker path {
@@ -75,11 +88,6 @@
   }
 }
 
-// While a stray branch is live, everything is either a target (a node) or a cancel.
-.viewport.linking {
-  cursor: crosshair;
-}
-
 .add-point {
   position: absolute;
   top: 0;
@@ -118,14 +126,6 @@
   }
 }
 
-// While dragging a step, emphasise every "+" so the drop targets are obvious.
-.viewport.step-dragging .add-point {
-  color: rgb(var(--zn-panel));
-  background: rgb(var(--zn-color-primary));
-  border-style: solid;
-  box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 22%, transparent);
-}
-
 .layer {
   position: absolute;
   top: 0;
@@ -144,36 +144,6 @@
 // Branch names rendered as a clickable pill on their branch; the wire drops
 // into the pill's top and continues from its bottom. Clicking opens the editor;
 // hovering slides out a delete button to the right.
-.branch-pill-wrap {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: stretch;
-
-  // Invisible bridge so the cursor can travel from the pill to the delete
-  // button without the hover (and the button) disappearing.
-  &::after {
-    content: '';
-    position: absolute;
-    left: 100%;
-    top: 0;
-    width: 40px;
-    height: 100%;
-  }
-
-  // The reveal is slightly delayed so pills that shift under a stationary
-  // cursor (e.g. re-spreading after a sibling branch is deleted) don't flash
-  // their delete button; hiding stays immediate.
-  &:hover .branch-pill-delete {
-    opacity: 1;
-    transform: translate(0, -50%);
-    pointer-events: auto;
-    transition-delay: 0.15s;
-  }
-}
-
 .branch-pill {
   display: flex;
   align-items: center;
@@ -226,34 +196,87 @@
       background: color-mix(in srgb, rgb(var(--zn-color-warning)) 18%, rgb(var(--zn-panel)));
     }
   }
-}
 
-// Slides out from behind the pill on hover; deletes the branch and its wire.
-// Sits above the wrap's ::after hover bridge, which would otherwise swallow
-// clicks (and the pointer cursor).
-.branch-pill-delete {
-  position: absolute;
-  z-index: 1;
-  left: calc(100% + 8px);
-  top: 50%;
-  transform: translate(-10px, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: rgb(var(--zn-color-error));
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  &-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: stretch;
+
+    // Invisible bridge so the cursor can travel from the pill to the delete
+    // button without the hover (and the button) disappearing.
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 0;
+      width: 40px;
+      height: 100%;
+    }
 
-  &:hover {
-    filter: brightness(1.1);
+    // The reveal is slightly delayed so pills that shift under a stationary
+    // cursor (e.g. re-spreading after a sibling branch is deleted) don't flash
+    // their delete button; hiding stays immediate.
+    &:hover .branch-pill-delete {
+      opacity: 1;
+      transform: translate(0, -50%);
+      pointer-events: auto;
+      transition-delay: 0.15s;
+    }
+  }
+
+  // An orphaned branch's output port, on the pill's bottom edge — click to
+  // start a stray branch continuing from the pill, just like a node's port.
+  &-port {
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 50%);
+    width: 11px;
+    height: 11px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background: rgb(var(--zn-panel));
+    border: 2px solid rgb(var(--zn-color-primary));
+    cursor: pointer;
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+
+    &:hover {
+      transform: translate(-50%, 50%) scale(1.35);
+      box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 20%, transparent);
+    }
+  }
+
+  // Slides out from behind the pill on hover; deletes the branch and its wire.
+  // Sits above the wrap's ::after hover bridge, which would otherwise swallow
+  // clicks (and the pointer cursor).
+  &-delete {
+    position: absolute;
+    z-index: 1;
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translate(-10px, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: rgb(var(--zn-color-error));
+    color: white;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+
+    &:hover {
+      filter: brightness(1.1);
+    }
   }
 }
 
@@ -318,6 +341,33 @@
   }
 }
 
+// Delete drop-zone, bottom-right while a node or step is being dragged.
+.bin {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  color: rgb(var(--zn-color-muted-text));
+  background: rgb(var(--zn-panel));
+  border: 1px dashed rgb(var(--zn-color-border-active));
+  box-shadow: 0 1px 3px rgba(var(--zn-shadow), 0.4);
+  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
+
+  &--over {
+    color: rgb(var(--zn-panel));
+    background: rgb(var(--zn-color-error));
+    border-style: solid;
+    border-color: rgb(var(--zn-color-error));
+    transform: scale(1.12);
+  }
+}
+
 .note {
   position: absolute;
   display: flex;
@@ -326,46 +376,46 @@
   border: 1px solid #fde68a;
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-}
 
-.note__resize {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 16px;
-  height: 16px;
-  cursor: nwse-resize;
-  // Visual corner grip.
-  background: linear-gradient(135deg, transparent 0 50%, #d9c64a 50% 60%, transparent 60% 70%, #d9c64a 70% 80%, transparent 80%);
-}
+  &__resize {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 16px;
+    height: 16px;
+    cursor: nwse-resize;
+    // Visual corner grip.
+    background: linear-gradient(135deg, transparent 0 50%, #d9c64a 50% 60%, transparent 60% 70%, #d9c64a 70% 80%, transparent 80%);
+  }
 
-.note__bar {
-  display: flex;
-  justify-content: flex-end;
-  height: 20px;
-  cursor: grab;
-}
+  &__bar {
+    display: flex;
+    justify-content: flex-end;
+    height: 20px;
+    cursor: grab;
+  }
 
-.note__close {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  font-size: 14px;
-  line-height: 1;
-  color: #92400e;
-  background: transparent;
-  cursor: pointer;
-}
+  &__close {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    color: #92400e;
+    background: transparent;
+    cursor: pointer;
+  }
 
-.note__text {
-  flex: 1;
-  margin: 0;
-  padding: 0 10px 10px;
-  resize: none;
-  border: none;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  font-size: 0.8125rem;
-  color: #713f12;
+  &__text {
+    flex: 1;
+    margin: 0;
+    padding: 0 10px 10px;
+    resize: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    font-size: 0.8125rem;
+    color: #713f12;
+  }
 }

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

@@ -118,11 +118,6 @@ zn-menu-item.danger {
   }
 }
 
-// Anchored at the card edge, at its horizontal position (set inline as left:%).
-.port-wrap {
-  position: absolute;
-}
-
 .port {
   position: absolute;
   left: 0;
@@ -135,46 +130,51 @@ zn-menu-item.danger {
   border: 2px solid var(--node-accent);
   box-sizing: border-box;
   pointer-events: none;
-}
-
-// Input ports ease in and out of the snap highlight with the same timing as
-// the output ports' hover effect.
-.port--in {
-  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
-}
 
-// The snapped arrow lands on the input — light the port up while targeted.
-:host([link-target]) .port--in {
-  transform: translate(-50%, -50%) scale(1.4);
-  background: rgb(var(--zn-color-primary));
-  border-color: rgb(var(--zn-color-primary));
-  box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 25%, transparent);
-}
+  // Input ports ease in and out of the snap highlight with the same timing as
+  // the output ports' hover effect.
+  &--in {
+    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
+
+    // The snapped arrow lands on the input — light the port up while targeted.
+    :host([link-target]) & {
+      transform: translate(-50%, -50%) scale(1.4);
+      background: rgb(var(--zn-color-primary));
+      border-color: rgb(var(--zn-color-primary));
+      box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 25%, transparent);
+    }
+  }
 
-// Output ports are the branch spawn points: hover to highlight, click to start
-// a branch that follows the cursor to its target node.
-.port--out {
-  pointer-events: auto;
-  cursor: pointer;
-  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
+  // Output ports are the branch spawn points: hover to highlight, click to start
+  // a branch that follows the cursor to its target node.
+  &--out {
+    pointer-events: auto;
+    cursor: pointer;
+    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
+
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.4);
+      background: var(--node-accent);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-accent) 25%, transparent);
+    }
+  }
 
-  &:hover {
-    transform: translate(-50%, -50%) scale(1.4);
-    background: var(--node-accent);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-accent) 25%, transparent);
+  // Anchored at the card edge, at its horizontal position (set inline as left:%).
+  &-wrap {
+    position: absolute;
   }
-}
 
-// Output labels (e.g. TRUE / FALSE) sit just below the card edge, beside the
-// outgoing arrow — never overlapping the card content.
-.port-label {
-  position: absolute;
-  top: calc(var(--port-size) / 2 + 3px);
-  left: 8px;
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: rgb(var(--zn-color-muted-text));
-  white-space: nowrap;
-  pointer-events: none;
+  // Output labels (e.g. TRUE / FALSE) sit just below the card edge, beside the
+  // outgoing arrow — never overlapping the card content.
+  &-label {
+    position: absolute;
+    top: calc(var(--port-size) / 2 + 3px);
+    left: 8px;
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: rgb(var(--zn-color-muted-text));
+    white-space: nowrap;
+    pointer-events: none;
+  }
 }

package/src/components/flow-builder/modules/flow-step/flow-step.component.ts

@@ -20,7 +20,8 @@ import styles from './flow-step.scss';
  * @event flow-step-drag - Emitted on dragstart with `detail.type`, so the builder can preview the drop.
  * @event flow-step-drag-end - Emitted on dragend.
  *
- * @slot - The step's label.
+ * @slot - The step's label. May also hold `<zn-flow-filter>` declarations (never displayed)
+ *   that drive the flow builder's built-in branch conditions editor.
  *
  * @csspart base - The row.
  */

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

@@ -32,21 +32,29 @@
   display: none;
 }
 
-.item__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  color: var(--node-accent);
-  background: color-mix(in srgb, var(--node-accent) 14%, transparent);
-}
-
-.item__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.item {
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    color: var(--node-accent);
+    background: color-mix(in srgb, var(--node-accent) 14%, transparent);
+  }
+
+  &__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    // Only slotted text is the label — nested declarations (<zn-flow-filter>
+    // and friends) are data for the flow builder, never displayed.
+    ::slotted(*) {
+      display: none;
+    }
+  }
 }

package/src/components/icon-picker/icon-picker.component.ts

@@ -217,16 +217,6 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     this.openDialog();
   }
 
-  private _handleTriggerKeyDown(event: KeyboardEvent) {
-    if (this.disabled) {
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this._handleTriggerClick();
-    }
-  }
-
   render() {
     const hasLabel = !!this.label;
     const hasHelpText = !!this.helpText;
@@ -242,34 +232,27 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
         </label>
 
         <div part="form-control-input" class="form-control-input">
-          <div
+          <zn-button
             part="trigger"
-            class="icon-picker__trigger ${this.disabled ? 'icon-picker__trigger--disabled' : ''}"
-            role="button"
-            tabindex=${this.disabled ? '-1' : '0'}
-            aria-disabled=${this.disabled ? 'true' : 'false'}
-            @click=${this._handleTriggerClick}
-            @keydown=${this._handleTriggerKeyDown}>
-            ${hasIcon
-              ? html`
-                <zn-icon
-                  src=${this.icon}
-                  library=${this.library}
-                  color=${this.color || nothing}
-                  size=${24}
-                ></zn-icon>
-                <span class="icon-picker__edit-text">Click to edit</span>
-                <zn-button
-                  class="icon-picker__clear"
-                  color="transparent"
-                  icon="close"
-                  icon-size="16"
-                  @click="${this.handleClear}"
-                ></zn-button>`
-              : html`
-                <span class="icon-picker__placeholder">Set an icon</span>`
-            }
-          </div>
+            class="icon-picker__trigger"
+            panel-bg
+            icon=${hasIcon ? this.icon : nothing}
+            icon-library=${hasIcon ? this.library : nothing}
+            icon-color=${(hasIcon && this.color) || nothing}
+            icon-size="24"
+            ?disabled=${this.disabled}
+            @click=${this._handleTriggerClick}>
+            ${hasIcon ? 'Click to edit' : 'Set an icon'}
+          </zn-button>
+          ${hasIcon ? html`
+            <zn-button
+              class="icon-picker__clear"
+              color="transparent"
+              icon="close"
+              icon-size="16"
+              @click="${this.handleClear}"
+            ></zn-button>
+          ` : nothing}
         </div>
 
         ${this.name ? html`

package/src/components/icon-picker/icon-picker.scss

@@ -5,55 +5,15 @@
   display: block;
 }
 
-.icon-picker__trigger {
-  display: inline-flex;
+.form-control-input {
+  display: flex;
   align-items: center;
-  gap: var(--zn-spacing-small);
-  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
-  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
-  border-radius: var(--zn-input-border-radius-medium);
-  background-color: var(--zn-input-background-color);
-  cursor: pointer;
-  transition: var(--zn-transition-fast) border-color,
-    var(--zn-transition-fast) background-color;
-  font-family: var(--zn-input-font-family), sans-serif;
-  font-size: var(--zn-input-font-size-medium);
-  color: rgb(var(--zn-text-color));
-  user-select: none;
-  -webkit-user-select: none;
-
-  &:hover:not(.icon-picker__trigger--disabled) {
-    border-color: var(--zn-input-border-color-hover);
-  }
-
-  &:focus-visible {
-    outline: none;
-    border-color: var(--zn-input-border-color-focus);
-    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
-  }
-}
-
-.icon-picker__trigger--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.icon-picker__edit-text {
-  color: rgb(var(--zn-text-color));
-  font-size: var(--zn-font-size-medium);
-}
-
-.icon-picker__clear {
-  margin-left: auto;
-}
-
-.icon-picker__placeholder {
-  color: var(--zn-input-placeholder-color);
-  font-size: var(--zn-font-size-medium);
+  gap: var(--zn-spacing-x-small);
 }
 
 zn-dialog {
   --width: min(80vw, 900px);
+  --icon-color: rgb(var(--zn-text));
 }
 
 .icon-picker__dialog-layout {
@@ -150,7 +110,7 @@ zn-dialog {
   border: 2px solid transparent;
   border-radius: var(--zn-border-radius);
   background: transparent;
-  color: rgb(var(--zn-text-color));
+  color: var(--zn-text-color);
   cursor: pointer;
   transition: var(--zn-transition-fast) background-color,
     var(--zn-transition-fast) border-color;

package/src/components/page-builder/index.ts

@@ -0,0 +1,14 @@
+import ZnPageBuilder from './page-builder.component';
+
+export * from './page-builder.component';
+export * from './page.types';
+export * from './page-registry';
+export default ZnPageBuilder;
+
+ZnPageBuilder.define('zn-page-builder');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page-builder': ZnPageBuilder;
+  }
+}

package/src/components/page-builder/modules/page-palette-item/index.ts

@@ -0,0 +1,12 @@
+import ZnPagePaletteItem from './page-palette-item.component';
+
+export * from './page-palette-item.component';
+export default ZnPagePaletteItem;
+
+ZnPagePaletteItem.define('zn-page-palette-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page-palette-item': ZnPagePaletteItem;
+  }
+}