@kubex/zinc 1.1.97 → 1.1.99

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

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnButton from '../button';
 import type ZnRemarkdEditor from './remarkd-editor.component';
 import type ZnSlashMenu from '../slash-menu';
 
@@ -79,6 +80,140 @@ Second"></zn-remarkd-editor>`);
     expect(el.shadowRoot!.querySelector('.remarkd-editor__toolbar')).to.exist;
   });
 
+  /** Every icon-only button needs a name of its own — it has no text for a screen reader to read. */
+  async function expectNamedIconButtons(el: ZnRemarkdEditor, root: ParentNode = el.shadowRoot!) {
+    const iconOnly = [...root.querySelectorAll<ZnButton>('zn-button')].filter(b => !b.textContent!.trim());
+    expect(iconOnly.length).to.be.greaterThan(0);
+
+    for (const button of iconOnly) {
+      await button.updateComplete;
+      const name = button.shadowRoot!.querySelector('button')!.getAttribute('aria-label');
+      expect(name, `the ${button.getAttribute('icon')} button has no accessible name`)
+        .to.be.a('string').and.not.empty;
+    }
+  }
+
+  it('should give every toolbar icon button an accessible name', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor allow-raw include-url="/includes"></zn-remarkd-editor>`);
+    const toolbar = el.shadowRoot!.querySelector('.remarkd-editor__toolbar')!;
+    expect(toolbar.querySelectorAll('zn-button').length).to.be.greaterThan(1);
+    await expectNamedIconButtons(el, toolbar);
+    // color-contrast is a pre-existing failure on the placeholder's shared
+    // --zn-color-neutral-400 token, unrelated to the buttons under test.
+    await expect(el).to.be.accessible({ignoredRules: ['color-contrast']});
+  });
+
+  it('should give every block action icon button an accessible name', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);
+    await expectNamedIconButtons(el, el.shadowRoot!.querySelector('.remarkd-editor__block')!);
+  });
+
+  it('should give every image control icon button an accessible name', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="image::photo.png[Alt,640,480]"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+    await expectNamedIconButtons(el, el.shadowRoot!.querySelector('.remarkd-editor__image-controls')!);
+  });
+
+  /** A document tall enough to overflow the editor's max height. */
+  const longValue = Array.from({length: 60}, (_, i) => `Paragraph ${i}`).join('\n\n');
+
+  it('should not grow taller than the viewport', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value=${longValue}></zn-remarkd-editor>`);
+    expect(el.getBoundingClientRect().height).to.be.at.most(window.innerHeight + 1);
+  });
+
+  /** Adds a block below the middle block via its gutter button. */
+  async function addBlockMidDocument(el: ZnRemarkdEditor) {
+    const blocks = el.shadowRoot!.querySelectorAll('.remarkd-editor__block');
+    blocks[Math.floor(blocks.length / 2)].querySelector('.remarkd-editor__actions zn-button')!
+      .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__input'), 'no block opened');
+  }
+
+  it('should centre a newly added block in its own body', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value=${longValue}></zn-remarkd-editor>`);
+    const body = el.shadowRoot!.querySelector('.remarkd-editor__body')!;
+    await addBlockMidDocument(el);
+
+    const bodyBox = body.getBoundingClientRect();
+    const inputBox = el.shadowRoot!.querySelector('.remarkd-editor__input')!.getBoundingClientRect();
+    expect(body.scrollTop, 'the body never scrolled').to.be.greaterThan(0);
+    expect(Math.abs((inputBox.top - bodyBox.top) - (bodyBox.bottom - inputBox.bottom)),
+      'the new block is not centred').to.be.lessThan(60);
+  });
+
+  it('should not scroll an enclosing panel when a block is added', async () => {
+    // An `overflow: hidden` panel has no scrollbar but is still scrollable in code, so
+    // scrollIntoView() or a plain focus() would shift it with no way to scroll back.
+    const panel = await fixture<HTMLDivElement>(html`
+      <div style="height: 200px; overflow: hidden">
+        <zn-remarkd-editor value=${longValue}></zn-remarkd-editor>
+        <div style="height: 900px"></div>
+      </div>`);
+    const el = panel.querySelector<ZnRemarkdEditor>('zn-remarkd-editor')!;
+    await el.updateComplete;
+    const body = el.shadowRoot!.querySelector('.remarkd-editor__body')!;
+    await addBlockMidDocument(el);
+
+    expect(body.scrollTop, 'the editor body should still scroll').to.be.greaterThan(0);
+    expect(panel.scrollTop, 'the enclosing panel was scrolled').to.equal(0);
+  });
+
+  it('should not scroll an enclosing scroller when an image block is added', async () => {
+    const panel = await fixture<HTMLDivElement>(html`
+      <div style="height: 200px; overflow: auto">
+        <zn-remarkd-editor value=${longValue}></zn-remarkd-editor>
+        <div style="height: 900px"></div>
+      </div>`);
+    const el = panel.querySelector<ZnRemarkdEditor>('zn-remarkd-editor')!;
+    await el.updateComplete;
+    const body = el.shadowRoot!.querySelector('.remarkd-editor__body')!;
+    expect(panel.scrollHeight - panel.clientHeight, 'the panel needs room to scroll')
+      .to.be.greaterThan(0);
+
+    // A 1x1 gif: an image block whose height only lands once it loads.
+    const src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    el.value = `${longValue}\n\nimage::${src}[pixel]`;
+    await el.updateComplete;
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__block img'), 'no image block');
+
+    expect(panel.scrollTop, 'the enclosing scroller was scrolled').to.equal(0);
+    expect(body.scrollTop, 'the body should be scrollable').to.be.at.least(0);
+  });
+
+  it('should keep scrolling while a drag is held at the edge', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value=${longValue}></zn-remarkd-editor>`);
+    const body = el.shadowRoot!.querySelector('.remarkd-editor__body')!;
+    const handle = el.shadowRoot!.querySelectorAll('.remarkd-editor__block')[1]
+      .querySelector('.remarkd-editor__drag-handle')!;
+    const from = handle.getBoundingClientRect();
+    const drag = (type: string, clientY: number, target: EventTarget, buttons = 1) =>
+      target.dispatchEvent(new PointerEvent(type, {
+        bubbles: true, composed: true, cancelable: true,
+        clientX: Math.round(from.left + 5), clientY, button: 0, buttons,
+      }));
+
+    drag('pointerdown', Math.round(from.top + 5), handle);
+    drag('pointermove', Math.round(from.top + 20), document);
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__ghost'), 'the drag never started').to.exist;
+
+    // Park the pointer in the bottom edge zone — the frame loop scrolls without further moves.
+    drag('pointermove', Math.round(body.getBoundingClientRect().bottom - 20), document);
+    await waitUntil(() => body.scrollTop > 0, 'a drag held at the edge never scrolled');
+
+    drag('pointercancel', 0, document, 0);
+    const settled = body.scrollTop;
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(body.scrollTop, 'scrolling continued after the drag ended').to.equal(settled);
+  });
+
   it('should open zn-slash-menu with the block types when "/" starts an empty block', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);

package/src/components/scroll-container/scroll-container.component.ts

@@ -21,11 +21,14 @@ import styles from './scroll-container.scss';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-scroll-container-height - The height and maximum height of the scroll container.
  */
 export default class ZnScrollContainer extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
+  /** The height and maximum height of the scroll container. */
+  @property({type: String}) height = '';
+
   @property({attribute: 'start-scrolled', type: Boolean, reflect: true}) startScrolled: boolean = false;
 
   @query('.scroll-container')
@@ -44,6 +47,17 @@ export default class ZnScrollContainer extends ZincElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('height')) {
+      if (this.height) {
+        this.style.setProperty('--zn-scroll-container-height-property', this.height);
+      } else {
+        this.style.removeProperty('--zn-scroll-container-height-property');
+      }
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._footerHeightFrame !== null) {

package/src/components/scroll-container/scroll-container.scss

@@ -2,8 +2,10 @@
 
 :host {
   @include wc.scrollbars;
-  
-  display: contents;
+
+  display: block;
+  height: var(--zn-scroll-container-height-property, var(--zn-scroll-container-height, 100%));
+  max-height: var(--zn-scroll-container-height-property, var(--zn-scroll-container-height, 100%));
   --zn-scroll-footer-height: 0px;
   --zn-scroll-header-height: 0px;
 }

package/src/components/scroll-container/scroll-container.test.ts

@@ -7,4 +7,17 @@ describe('<zn-scroll-container>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should render as a block-level container', async () => {
+    const el = await fixture(html` <zn-scroll-container></zn-scroll-container> `);
+
+    expect(getComputedStyle(el).display).to.equal('block');
+  });
+
+  it('should apply height as the height and maximum height', async () => {
+    const el = await fixture(html` <zn-scroll-container height="240px"></zn-scroll-container> `);
+
+    expect(getComputedStyle(el).height).to.equal('240px');
+    expect(getComputedStyle(el).maxHeight).to.equal('240px');
+  });
 });

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

@@ -4,6 +4,7 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {LocalizeController} from "../../utilities/localize";
 import {property, query} from 'lit/decorators.js';
 import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
+import {idSelector} from "../../utilities/query";
 import {unlockBodyScrolling} from "../../internal/scroll";
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from "../button";
@@ -83,7 +84,7 @@ export default class ZnSlideout extends ZincElement {
     this.shadowRoot?.addEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentNode?.querySelector('#' + this.trigger);
+      const trigger = this.parentNode?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.addEventListener('click', () => this.show());
       }
@@ -98,7 +99,7 @@ export default class ZnSlideout extends ZincElement {
     this.removeEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentElement?.querySelector('#' + this.trigger);
+      const trigger = this.parentElement?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.removeEventListener('click', () => this.show());
       }

package/src/components/split-pane/split-pane.scss

@@ -24,9 +24,20 @@
   container-type: inline-size;
   position: relative;
 
-  #primary-pane, #secondary-pane {
-    flex-grow: 1;
-    flex-shrink: 1;
+  // Panes are sized from --initial-size, never from their content. Without an
+  // explicit flex-basis, a wide unbreakable child (long token in a <pre>, wide
+  // table) becomes the flex base size and the resizer stops having any effect.
+  #primary-pane {
+    flex: 0 1 var(--initial-size, 50%);
+    min-width: 0;
+    min-height: 0;
+  }
+
+  #secondary-pane {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
   }
 
   slot {
@@ -116,6 +127,7 @@
     }
 
     #primary-pane, #secondary-pane {
+      flex: 1 1 100%;
       max-width: 100% !important;
       width: 100%;
       padding-top: 40px;
@@ -131,12 +143,8 @@
   }
 
   #primary-pane {
-    max-width: var(--max-panel-size, var(--initial-size, 50%));
-  }
-
-  #secondary-pane {
-    max-width: calc(100% - var(--initial-size, 0));
-    width: 100%;
+    max-width: var(--max-panel-size, none);
+    overflow: hidden;
   }
 
   #resizer {
@@ -199,6 +207,7 @@
   }
 
   #secondary-pane {
+    flex: 1 1 100%;
     height: 100%;
     max-height: 100% !important;
     max-width: 100% !important;
@@ -208,6 +217,7 @@
 
 :host([hide="secondary"]) {
   #primary-pane {
+    flex: 1 1 100%;
     height: 100%;
     max-height: 100% !important;
     max-width: 100% !important;
@@ -258,12 +268,8 @@
   }
 
   #primary-pane {
-    max-height: var(--initial-size, 50%);
-  }
-
-  #secondary-pane {
-    height: 100%;
-    max-height: calc(100% - var(--initial-size, 0));
+    max-height: var(--max-panel-size, none);
+    overflow: hidden;
   }
 
   #resizer {

package/src/components/thumbnail/index.ts

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