@kubex/zinc 1.1.112 → 1.1.114

package/package.json

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

package/scss/shared/_form-elements.scss

@@ -23,7 +23,7 @@ select {
   width: 100%;
   border-radius: 5px;
   border-style: solid;
-  border-width: 1px !important;
+  border-width: 1px;
   border-color: rgb(var(--zn-border-color));
   background-color: rgb(var(--zn-input-bg));
   outline: none;

package/scss/shared/layout.scss

@@ -254,27 +254,27 @@
 
 .zn-border {
   border-style: solid;
-  border-width: 1px !important;
+  border-width: 1px;
 }
 
 .zn-bt {
   border-top-style: solid;
-  border-top-width: 1px !important;
+  border-top-width: 1px;
 }
 
 .zn-bb {
   border-bottom-style: solid;
-  border-bottom-width: 1px !important;
+  border-bottom-width: 1px;
 }
 
 .zn-bl {
   border-left-style: solid;
-  border-left-width: 1px !important;
+  border-left-width: 1px;
 }
 
 .zn-br {
   border-right-style: solid;
-  border-right-width: 1px !important;
+  border-right-width: 1px;
 }
 
 .unifi-action {

package/src/components/priority-list/priority-list.component.ts

@@ -297,15 +297,16 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
 
     const form = this.getForm();
     if (form) {
-      const submitter = document.createElement('button');
+      // Submitting through the controller announces the form before it is
+      // submitted, which is what lets a host intercept the submit: a submit
+      // event raised on a form inside a shadow root never reaches the document,
+      // so submitting it directly navigates the page instead.
+      const submitter = document.createElement('input');
       submitter.type = 'submit';
-      submitter.hidden = true;
       if (this.formAction) {
         submitter.setAttribute('formaction', this.formAction);
       }
-      form.appendChild(submitter);
-      form.requestSubmit(submitter);
-      submitter.remove();
+      this.formControlController.submit(submitter);
     } else if (this.formAction) {
       // No parent form — create a temporary one to submit the priority data
       const tempForm = document.createElement('form');
@@ -324,7 +325,9 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
       });
 
       document.body.appendChild(tempForm);
-      tempForm.submit();
+      // requestSubmit raises a cancellable submit event, so a host can handle
+      // the submission rather than the browser navigating to formaction.
+      tempForm.requestSubmit();
       tempForm.remove();
     }
   }

package/src/components/priority-list/priority-list.test.ts

@@ -179,4 +179,38 @@ describe('<zn-priority-list>', () => {
     expect(item.getAttribute('draggable')).to.equal('false');
     expect(item.getAttribute('tabindex')).to.equal('-1');
   });
+
+  it('should announce its form before submitting a reorder, so a host can intercept it', async () => {
+    const form = await fixture(html`
+      <form action="/save" method="post">
+        <zn-priority-list name="sections" formaction="/save">
+          <div value="a">A</div>
+          <div value="b">B</div>
+        </zn-priority-list>
+      </form>
+    `) as HTMLFormElement;
+
+    const el = form.querySelector('zn-priority-list') as any;
+    await el.updateComplete;
+
+    const announced: Element[] = [];
+    const onRegister = (e: Event) => announced.push((e as CustomEvent).detail.element);
+    document.addEventListener('zn-register-element', onRegister);
+
+    let submitter: HTMLElement | null = null;
+    form.addEventListener('submit', (e: SubmitEvent) => {
+      submitter = e.submitter;
+      e.preventDefault();
+    });
+
+    const item = el.shadowRoot.querySelector('.priority-list__item');
+    item.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    document.removeEventListener('zn-register-element', onRegister);
+
+    expect(announced).to.include(form);
+    expect(submitter).to.exist;
+    expect(submitter!.getAttribute('formaction')).to.equal('/save');
+  });
 });

package/src/wc.scss

@@ -13,13 +13,16 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-transform: none;
+}
 
-  *, *::before, *::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: rgb(var(--zn-border-color));
-  }
+// Must stay at zero specificity: shadow roots that re-adopt the global sheet
+// (zn-tabs, zn-data-table, editor toolbar) load it before this one, so a `:host *`
+// reset would win the tie and strip borders off every global class.
+*, *::before, *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: rgb(var(--zn-border-color));
 }
 
 [hidden] {