@kubex/zinc 1.1.104 → 1.1.106

package/docs/pages/components/dialog.md

@@ -378,6 +378,8 @@ You can also prevent close from specific sources by checking the `event.detail.s
 
 Add the `dialog-closer` attribute to any element inside the dialog to make it close the dialog when clicked. This is commonly used with buttons in the footer.
 
+The `modal-closer` attribute works the same way but closes the nearest containing modal of either kind — dialog or slideout — and, unlike `dialog-closer`, works from inside a nested component's shadow root. `<zn-form-actions>` uses it on its cancel button.
+
 ```html:preview
 <zn-button id="dialog-closer-trigger">Open Dialog</zn-button>
 <zn-dialog trigger="dialog-closer-trigger" label="Dialog Closer">

package/docs/pages/components/form-actions.md

@@ -0,0 +1,71 @@
+---
+meta:
+  title: Form Actions
+  description: A standard action row for the bottom of a form, built up from a lone submit button.
+layout: component
+---
+
+Drops the standard action row into a form. The default is just a primary submit button — build it up with `with-cancel` and `with-reset` as the form needs. Place it inside the form it should act on.
+
+```html:preview
+<form>
+  <zn-form-actions></zn-form-actions>
+</form>
+```
+
+## Examples
+
+### With a Cancel Button
+
+Use the `with-cancel` attribute to add a cancel button. When the form lives inside a dialog or slideout, cancelling closes it; it also emits a `zn-cancel` event for the container to handle.
+
+```html:preview
+<zn-dialog trigger="form-actions-dialog" label="New Ticket">
+  <form>
+    <zn-form-actions with-cancel></zn-form-actions>
+  </form>
+</zn-dialog>
+<zn-button id="form-actions-dialog">Open Dialog</zn-button>
+```
+
+### With a Reset Button
+
+Use the `with-reset` attribute to add a button that resets the form's fields.
+
+```html:preview
+<form>
+  <input type="text" name="example" value="Change me, then reset">
+  <zn-form-actions with-reset></zn-form-actions>
+</form>
+```
+
+### Custom Text and Icons
+
+Each button's text and icon can be overridden with `submit-text` / `submit-icon`, `cancel-text` / `cancel-icon` and `reset-text` / `reset-icon`.
+
+```html:preview
+<form>
+  <zn-form-actions with-cancel submit-text="Create Ticket" submit-icon="plus@lu" cancel-text="Discard" cancel-icon="trash-2@lu"></zn-form-actions>
+</form>
+```
+
+### Extra Actions
+
+Extra buttons placed in the default slot appear before the standard buttons.
+
+```html:preview
+<form>
+  <zn-form-actions>
+    <zn-button color="transparent">Preview</zn-button>
+  </zn-form-actions>
+</form>
+```
+
+### Targeting a Form by Id
+
+When the component can't live inside the form, point it at one with the `form` attribute.
+
+```html:preview
+<form id="standalone-form"></form>
+<zn-form-actions form="standalone-form"></zn-form-actions>
+```

package/docs/pages/components/slideout.md

@@ -248,6 +248,8 @@ You can also prevent close from specific sources by checking the `event.detail.s
 
 Add the `slideout-closer` attribute to any element inside the slideout to make it close the slideout when clicked. This is commonly used with buttons in the footer.
 
+The `modal-closer` attribute works the same way but closes the nearest containing modal of either kind — dialog or slideout — and, unlike `slideout-closer`, works from inside a nested component's shadow root. `<zn-form-actions>` uses it on its cancel button.
+
 ```html:preview
 <zn-button id="slideout-closer-trigger">Open Slideout</zn-button>
 <zn-slideout trigger="slideout-closer-trigger" label="Slideout Closer">

package/package.json

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

package/src/components/button/button.scss

@@ -57,6 +57,10 @@
   &__label--hidden {
     visibility: hidden;
   }
+
+  zn-icon {
+    --icon-color: currentColor;
+  }
 }
 
 .button.button--muted-notification {

package/src/components/dialog/dialog.component.ts

@@ -184,6 +184,20 @@ export default class ZnDialog extends ZincElement {
   private closeClickHandler = (event: MouseEvent) => {
     if (event.target instanceof HTMLElement && event.target.hasAttribute('dialog-closer')) {
       this.hide();
+      return;
+    }
+
+    // `modal-closer` works from nested shadow roots (e.g. zn-form-actions' cancel button),
+    // where retargeting hides the source from event.target. Walk outward from the click:
+    // hitting another modal first means the closer belongs to it, not this dialog.
+    for (const el of event.composedPath()) {
+      if (el === this) return;
+      if (!(el instanceof HTMLElement)) continue;
+      if (el.hasAttribute('modal-closer')) {
+        this.hide();
+        return;
+      }
+      if (el.localName === 'zn-dialog' || el.localName === 'zn-slideout') return;
     }
   }
 

package/src/components/form-actions/form-actions.component.ts

@@ -0,0 +1,96 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {idSelector} from "../../utilities/query";
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnButton from "../button";
+
+import styles from './form-actions.scss';
+
+/**
+ * @summary Standard action row for the bottom of a form. Renders a submit button by default; opt in to more
+ * with `with-cancel` and `with-reset`.
+ * @documentation https://zinc.style/components/form-actions
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ *
+ * @event zn-cancel - Emitted when the cancel button is clicked.
+ *
+ * @slot - Extra actions, placed before the buttons.
+ *
+ * @csspart cancel-button - The cancel button.
+ * @csspart reset-button - The reset button.
+ * @csspart submit-button - The submit button.
+ */
+export default class ZnFormActions extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton
+  };
+
+  /** The submit button's text. */
+  @property({attribute: 'submit-text'}) submitText = 'Save';
+
+  /** The submit button's icon. */
+  @property({attribute: 'submit-icon'}) submitIcon = 'check@lu';
+
+  /** Adds a cancel button. Closes the containing dialog or slideout, if any, and emits `zn-cancel`. */
+  @property({attribute: 'with-cancel', type: Boolean}) withCancel = false;
+
+  /** The cancel button's text. */
+  @property({attribute: 'cancel-text'}) cancelText = 'Cancel';
+
+  /** The cancel button's icon. */
+  @property({attribute: 'cancel-icon'}) cancelIcon = 'x@lu';
+
+  /** Adds a reset button that resets the form. */
+  @property({attribute: 'with-reset', type: Boolean}) withReset = false;
+
+  /** The reset button's text. */
+  @property({attribute: 'reset-text'}) resetText = 'Reset';
+
+  /** The reset button's icon. */
+  @property({attribute: 'reset-icon'}) resetIcon = 'rotate-ccw@lu';
+
+  /** The id of the form to act on. If omitted, the closest containing form is used. */
+  @property() form: string;
+
+  // The buttons live in this component's shadow root, so zn-button's own
+  // submit/reset handling can't find the form — resolve it from the host.
+  private getForm(): HTMLFormElement | null {
+    if (this.form) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      return root.querySelector<HTMLFormElement>(idSelector(this.form));
+    }
+    return this.closest('form');
+  }
+
+  private handleCancel = () => {
+    this.emit('zn-cancel');
+  };
+
+  private handleReset = () => {
+    this.getForm()?.reset();
+  };
+
+  private handleSubmit = () => {
+    this.getForm()?.requestSubmit();
+  };
+
+  render() {
+    return html`
+      <slot></slot>
+      ${this.withCancel ? html`
+        <zn-button part="cancel-button" panel-bg modal-closer icon="${this.cancelIcon}" @click="${this.handleCancel}">
+          ${this.cancelText}
+        </zn-button>` : ''}
+      ${this.withReset ? html`
+        <zn-button part="reset-button" panel-bg icon="${this.resetIcon}" @click="${this.handleReset}">
+          ${this.resetText}
+        </zn-button>` : ''}
+      <zn-button part="submit-button" color="primary" icon="${this.submitIcon}" @click="${this.handleSubmit}">
+        ${this.submitText}
+      </zn-button>`;
+  }
+}

package/src/components/form-actions/form-actions.scss

@@ -0,0 +1,9 @@
+@use "../../wc";
+
+// Keep in sync with the global .form-actions layout in scss/_global-spacing.scss.
+:host {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+}

package/src/components/form-actions/form-actions.test.ts

@@ -0,0 +1,40 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+
+// ZnButton overrides click() without dispatching a DOM event, so fire a real one.
+const clickButton = (button: HTMLElement) =>
+  button.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }));
+
+describe('<zn-form-actions>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-form-actions></zn-form-actions> `);
+
+    expect(el).to.exist;
+  });
+
+  it('should emit zn-cancel when the cancel button is clicked', async () => {
+    const el = await fixture<HTMLElement>(html` <zn-form-actions with-cancel></zn-form-actions> `);
+    const cancel = el.shadowRoot!.querySelector<HTMLElement>('[part="cancel-button"]')!;
+
+    const listener = oneEvent(el, 'zn-cancel');
+    clickButton(cancel);
+
+    expect(await listener).to.exist;
+  });
+
+  it('should close a containing dialog when the cancel button is clicked', async () => {
+    const dialog = await fixture<HTMLElement & { open: boolean }>(html`
+      <zn-dialog open label="Test">
+        <form>
+          <zn-form-actions with-cancel></zn-form-actions>
+        </form>
+      </zn-dialog>
+    `);
+    const actions = dialog.querySelector('zn-form-actions')!;
+    const cancel = actions.shadowRoot!.querySelector<HTMLElement>('[part="cancel-button"]')!;
+
+    clickButton(cancel);
+
+    expect(dialog.open).to.be.false;
+  });
+});

package/src/components/form-actions/index.ts

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

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

@@ -1,5 +1,5 @@
 import {classMap} from 'lit/directives/class-map.js';
-import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from '../../internal/default-value';
 import {FormControlController} from '../../internal/form';
 import {property, query, state} from 'lit/decorators.js';
@@ -244,6 +244,36 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     }
   }
 
+  // The [icon]/[library]/[color] hidden inputs must live in the light DOM —
+  // shadow DOM inputs are invisible to form submission.
+  private syncHiddenInputs() {
+    const fields: [string, string, boolean][] = [
+      ['icon', this.icon, true],
+      ['library', this.library, !this.noLibrary],
+      ['color', this.color, !this.noColor],
+    ];
+    for (const [key, value, enabled] of fields) {
+      const name = `${this.name}[${key}]`;
+      let input = this.querySelector<HTMLInputElement>(`input[type="hidden"][name="${name}"]`);
+      if (!this.name || !enabled) {
+        input?.remove();
+        continue;
+      }
+      if (!input) {
+        input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = name;
+        this.appendChild(input);
+      }
+      input.value = value ?? '';
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    this.syncHiddenInputs();
+  }
+
   private handleSearchInput(e: Event) {
     const input = e.target as HTMLInputElement;
     this._searchQuery = input.value.toLowerCase();
@@ -381,12 +411,6 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
           `}
         </div>
 
-        ${this.name ? html`
-          <input type="hidden" name="${this.name}[icon]" .value=${this.icon}>
-          ${!this.noLibrary ? html`<input type="hidden" name="${this.name}[library]" .value=${this.library}>` : nothing}
-          ${!this.noColor ? html`<input type="hidden" name="${this.name}[color]" .value=${this.color}>` : nothing}
-        ` : nothing}
-
         <div
           part="form-control-help-text"
           class="form-control__help-text"

package/src/components/slideout/slideout.component.ts

@@ -157,6 +157,20 @@ export default class ZnSlideout extends ZincElement {
   private closeClickHandler = (event: MouseEvent) => {
     if (event.target instanceof HTMLElement && event.target.hasAttribute('slideout-closer')) {
       this.hide();
+      return;
+    }
+
+    // `modal-closer` works from nested shadow roots (e.g. zn-form-actions' cancel button),
+    // where retargeting hides the source from event.target. Walk outward from the click:
+    // hitting another modal first means the closer belongs to it, not this slideout.
+    for (const el of event.composedPath()) {
+      if (el === this) return;
+      if (!(el instanceof HTMLElement)) continue;
+      if (el.hasAttribute('modal-closer')) {
+        void this.hide();
+        return;
+      }
+      if (el.localName === 'zn-dialog' || el.localName === 'zn-slideout') return;
     }
   }
 

package/src/components/tile/tile.scss

@@ -142,6 +142,7 @@ a {
   align-items: center;
   column-gap: var(--zn-spacing-large);
   min-width: 0;
+  flex-shrink: 0;
   overflow: hidden;
 
   ::slotted(*) {

package/src/zinc.ts

@@ -63,6 +63,7 @@ export { default as Option } from './components/option';
 export { default as Textarea } from './components/textarea';
 export { default as Checkbox } from './components/checkbox';
 export { default as Datepicker } from './components/datepicker';
+export { default as FormActions } from './components/form-actions';
 export { default as FormGroup } from './components/form-group';
 export { default as InputGroup } from './components/input-group';
 export { default as LinkedSelect } from './components/linked-select';