@kubex/zinc 1.1.63 → 1.1.64

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

@@ -0,0 +1,241 @@
+@use "../../wc";
+// Remarkd's official output styles, scoped under .remarkd-rendered.
+@use "../../../node_modules/remarkd-js/docs/assets/remarkd-output";
+
+:host {
+  display: block;
+}
+
+.remarkd-editor {
+  position: relative;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+}
+
+.remarkd-editor__toolbar {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  padding: var(--zn-spacing-x-small);
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
+
+.remarkd-editor__body {
+  padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 88px;
+  min-height: 10rem;
+}
+
+.remarkd-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.remarkd-editor__block {
+  position: relative;
+  border-radius: var(--zn-border-radius);
+}
+
+.remarkd-editor__actions {
+  position: absolute;
+  left: -80px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.remarkd-editor__block:hover .remarkd-editor__actions,
+.remarkd-editor__actions:focus-within {
+  opacity: 1;
+}
+
+.remarkd-editor__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  color: var(--zn-color-neutral-400, #9aa4b2);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.remarkd-editor__ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  pointer-events: none;
+  opacity: 0.9;
+  background: var(--zn-color-neutral-0, white);
+  border-radius: var(--zn-border-radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  max-width: 50%;
+  max-height: 160px;
+  overflow: hidden;
+}
+
+.remarkd-editor__block--dragging {
+  opacity: 0.4;
+}
+
+.remarkd-editor__block--drop-before::before,
+.remarkd-editor__block--drop-after::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(var(--zn-primary), 0.6);
+  pointer-events: none;
+}
+
+.remarkd-editor__block--drop-before::before {
+  top: -4px;
+}
+
+.remarkd-editor__block--drop-after::after {
+  bottom: -4px;
+}
+
+.remarkd-editor__rendered {
+  padding: var(--zn-spacing-x-small);
+  border-radius: var(--zn-border-radius);
+  cursor: text;
+
+  &:hover {
+    background: var(--zn-color-neutral-100);
+  }
+}
+
+// The shell keeps the block's rendered chrome while its source is edited —
+// remarkd hint classes (hint-note, hint-tip, …) apply their own styling here.
+.remarkd-editor__edit-shell {
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background: var(--zn-color-neutral-0, white);
+  padding: var(--zn-spacing-x-small);
+
+  // Hint shells keep their own left accent — only tint the other edges.
+  &:focus-within {
+    border-top-color: rgb(var(--zn-primary));
+    border-right-color: rgb(var(--zn-primary));
+    border-bottom-color: rgb(var(--zn-primary));
+  }
+
+  &:not([class*="hint-"]):focus-within {
+    border-left-color: rgb(var(--zn-primary));
+  }
+}
+
+.remarkd-editor__input {
+  display: block;
+  width: 100%;
+  resize: none;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0;
+  outline: none;
+}
+
+// Hints edit in the rendered font so they read as the same block.
+.remarkd-editor__edit-shell[class*="hint-"] .remarkd-editor__input {
+  font: inherit;
+}
+
+.remarkd-editor__edit-shell--h1 .remarkd-editor__input,
+.remarkd-editor__edit-shell--h2 .remarkd-editor__input,
+.remarkd-editor__edit-shell--h3 .remarkd-editor__input {
+  font-family: inherit;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.remarkd-editor__edit-shell--h1 .remarkd-editor__input {
+  font-size: 26px;
+}
+
+.remarkd-editor__edit-shell--h2 .remarkd-editor__input {
+  font-size: 21px;
+}
+
+.remarkd-editor__edit-shell--h3 .remarkd-editor__input {
+  font-size: 17px;
+}
+
+.remarkd-editor__edit-shell--code {
+  background: var(--rmd-code-bg, #0f1626);
+
+  .remarkd-editor__input {
+    color: var(--rmd-code-text, #f5f8ff);
+  }
+}
+
+.remarkd-editor__add {
+  padding: var(--zn-spacing-x-small);
+  min-height: 1.8em;
+  color: var(--zn-color-neutral-400, #9aa4b2);
+  cursor: text;
+}
+
+.remarkd-editor__edit-wrap {
+  position: relative;
+}
+
+.remarkd-editor__slash-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  min-width: 12rem;
+  margin-top: 4px;
+  padding: 4px;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background: var(--zn-color-neutral-0, white);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+}
+
+.remarkd-editor__slash-item {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: 6px 8px;
+  border: 0;
+  border-radius: var(--zn-border-radius);
+  background: none;
+  color: var(--zn-color-text, #222);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &--active {
+    background: var(--zn-color-neutral-100);
+  }
+}
+
+.remarkd-editor__validation {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  border: 0;
+  padding: 0;
+}

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -0,0 +1,147 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnRemarkdEditor from './remarkd-editor.component';
+
+describe('<zn-remarkd-editor>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    expect(el).to.exist;
+  });
+
+  it('should split the value into rendered remarkd blocks', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title
+
+NOTE: a note"></zn-remarkd-editor>`);
+    const blocks = el.shadowRoot!.querySelectorAll('.remarkd-editor__block');
+    expect(blocks.length).to.equal(2);
+    expect(blocks[1].innerHTML).to.contain('hint-note');
+  });
+
+  it('should keep fenced content as a single block', async () => {
+    const fenced = '```\n\ncode\n\n```';
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value=${fenced}></zn-remarkd-editor>`);
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+  });
+
+  it('should swap a block to source editing on click and commit on blur', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    expect(input).to.exist;
+    expect(input.value).to.equal('# Title');
+
+    input.value = '# Changed';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('# Changed');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__rendered')!.innerHTML).to.contain('Changed');
+  });
+
+  it('should remove a block committed as empty', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title
+
+Second"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelectorAll<HTMLElement>('.remarkd-editor__rendered')[1].click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = '';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('# Title');
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+  });
+
+  it('should render an always-visible toolbar', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__toolbar')).to.exist;
+  });
+
+  it('should open the slash menu when "/" starts an empty block', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = '/';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__slash-menu')).to.exist;
+  });
+
+  it('should start a new block on shift+enter', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="First"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', shiftKey: true, bubbles: true}));
+    await el.updateComplete;
+
+    // First block committed and rendered; a fresh draft textarea sits below it.
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+    const draft = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    expect(draft).to.exist;
+    expect(draft.value).to.equal('');
+  });
+
+  it('should open the image dialog from the toolbar', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    const buttons = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button');
+    const imageButton = buttons[buttons.length - 1];
+    imageButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    const dialog = el.shadowRoot!.querySelector('.remarkd-editor__image-dialog')!;
+    expect(dialog).to.exist;
+    // No attachment-url configured — the dialog falls back to a URL input.
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__image-url')).to.exist;
+  });
+
+  it('should toggle a checkbox in the source instead of opening the editor', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="- [ ] First
+- [x] Second"></zn-remarkd-editor>`);
+    const boxes = el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+    boxes[0].dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('- [x] First\n- [x] Second');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__input')).to.not.exist;
+  });
+
+  it('should emit zn-change when a block edit changes the value', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    let fired = false;
+    el.addEventListener('zn-change', () => {
+      fired = true;
+    });
+
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = 'Hello world';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(fired).to.be.true;
+  });
+});

package/src/components/tabs/tabs.component.ts

@@ -10,6 +10,11 @@ import ZincElement from '../../internal/zinc-element';
 
 import styles from './tabs.scss';
 
+// Every element that manages its own tabs (ZnTabs and its subclasses). Tab
+// registration must stop at these so an outer container never claims a nested
+// container's tabs.
+const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/tabs
@@ -228,7 +233,7 @@ export default class ZnTabs extends ZincElement {
       }
     }
 
-    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, '')) {
+    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, tabContainerSelector)) {
       const uri: string = uriTab.getAttribute("tab-uri")!;
       const eleTabId = this._uriToId(uri);
       if (eleTabId === tabId) {
@@ -459,11 +464,11 @@ export default class ZnTabs extends ZincElement {
   }
 
   _registerTabs = () => {
-    deepQuerySelectorAll('[tab]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[tab]', this, tabContainerSelector).forEach(ele => {
       this._addTab(ele as HTMLElement);
     });
 
-    deepQuerySelectorAll('[tab-uri]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[tab-uri]', this, tabContainerSelector).forEach(ele => {
       if (ele.getAttribute('tab-uri') === "") {
         ele.setAttribute('tab', "");
         ele.removeAttribute('tab-uri');
@@ -471,7 +476,7 @@ export default class ZnTabs extends ZincElement {
       this._addTab(ele as HTMLElement);
     });
 
-    deepQuerySelectorAll('[ref-tab-uri]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[ref-tab-uri]', this, tabContainerSelector).forEach(ele => {
       if (!ele.hasAttribute('ref-tab')) {
         ele.setAttribute('ref-tab', this._uriToId(ele.getAttribute('ref-tab-uri')!));
         ele.removeAttribute('ref-tab-uri');

package/src/components/tabs/tabs.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import type ZnTabs from './tabs.component';
 
 describe('<zn-tabs>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,44 @@ describe('<zn-tabs>', () => {
 
     expect(el).to.exist;
   });
+
+  it('does not register tabs belonging to a nested zn-page', async () => {
+    const el = await fixture<ZnTabs>(html`
+      <zn-tabs>
+        <div class="outer-home">Outer Home</div>
+        <div id="outer-second">
+          <zn-page caption="Nested Page">
+            <zn-tab caption="Overview">Overview Content</zn-tab>
+            <zn-tab caption="Details">Details Content</zn-tab>
+          </zn-page>
+        </div>
+      </zn-tabs>
+    `);
+    await aTimeout(60);
+
+    el.setActiveTab('outer-second', false, false);
+    await aTimeout(20);
+
+    // A menu selection bubbling out of the page (e.g. an ellipses action menu)
+    // makes the outer tabs re-register; it must not claim the page's nav items.
+    const page = el.querySelector('zn-page')!;
+    page.dispatchEvent(new CustomEvent('zn-menu-select', { bubbles: true, composed: true }));
+    await aTimeout(250);
+
+    const navbar = page.shadowRoot!.querySelector('zn-navbar')!;
+    const navItems = Array.from(navbar.shadowRoot!.querySelectorAll<HTMLElement>('li:not(.more)'));
+
+    navItems[1].click();
+    await aTimeout(40);
+    navItems[0].click();
+    await aTimeout(40);
+
+    const outerHome = el.querySelector('.outer-home')!;
+    const outerSecond = el.querySelector('#outer-second')!;
+    expect(outerSecond.hasAttribute('selected')).to.equal(true);
+    expect(outerHome.hasAttribute('selected')).to.equal(false);
+
+    const selectedPagePanel = page.shadowRoot!.querySelector<HTMLElement>('#content > div[selected]')!;
+    expect(selectedPagePanel.id).to.equal('');
+  });
 });

package/src/zinc.ts

@@ -101,6 +101,7 @@ export { default as TranslationGroup } from './components/translation-group';
 export { default as OptGroup } from './components/opt-group';
 export { default as PriorityList } from './components/priority-list';
 export { default as MarkdownEditor } from './components/markdown-editor';
+export { default as RemarkdEditor } from './components/remarkd-editor';
 export { default as FlowBuilder } from './components/flow-builder';
 export { default as FlowSteps } from './components/flow-builder/modules/flow-steps';
 export { default as FlowStepGroup } from './components/flow-builder/modules/flow-step-group';