@kubex/zinc 1.1.39 → 1.1.41

package/src/components/style/style.test.ts

@@ -7,4 +7,75 @@ describe('<zn-style>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('border', () => {
+    it('border="t" applies only zn-bt', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border="t"></zn-style>`);
+      expect(el.classList.contains('zn-bt')).to.be.true;
+      expect(el.classList.contains('zn-bb')).to.be.false;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+      expect(el.classList.contains('zn-border')).to.be.false;
+    });
+
+    it('border="tb" applies zn-bt and zn-bb', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border="tb"></zn-style>`);
+      expect(el.classList.contains('zn-bt')).to.be.true;
+      expect(el.classList.contains('zn-bb')).to.be.true;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+    });
+
+    it('border (attribute present but empty) applies zn-border (all four sides)', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border></zn-style>`);
+      expect(el.classList.contains('zn-border')).to.be.true;
+    });
+
+    it('no border attribute applies no border classes', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style></zn-style>`);
+      expect(el.classList.contains('zn-border')).to.be.false;
+      expect(el.classList.contains('zn-bt')).to.be.false;
+      expect(el.classList.contains('zn-bb')).to.be.false;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+    });
+  });
+
+  describe('size', () => {
+    it('size="s" applies zn-size-s', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="s"></zn-style>`);
+      expect(el.classList.contains('zn-size-s')).to.be.true;
+    });
+
+    it('size="xs" applies zn-size-xs', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="xs"></zn-style>`);
+      expect(el.classList.contains('zn-size-xs')).to.be.true;
+    });
+
+    it('size="xl" applies zn-size-xl', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="xl"></zn-style>`);
+      expect(el.classList.contains('zn-size-xl')).to.be.true;
+    });
+
+    it('size="m" applies no size class', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="m"></zn-style>`);
+      expect(el.classList.contains('zn-size-m')).to.be.false;
+      expect(el.classList.contains('zn-size-xs')).to.be.false;
+      expect(el.classList.contains('zn-size-s')).to.be.false;
+      expect(el.classList.contains('zn-size-l')).to.be.false;
+      expect(el.classList.contains('zn-size-xl')).to.be.false;
+    });
+  });
+
+  describe('muted', () => {
+    it('applies zn-muted class when present', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style muted></zn-style>`);
+      expect(el.classList.contains('zn-muted')).to.be.true;
+    });
+
+    it('does not apply zn-muted when absent', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style></zn-style>`);
+      expect(el.classList.contains('zn-muted')).to.be.false;
+    });
+  });
 });

package/src/utilities/query.test.ts

@@ -0,0 +1,63 @@
+import {expect, fixture, html} from '@open-wc/testing';
+import {deepQuery} from './query';
+
+describe('deepQuery', () => {
+  it('returns null when no element matches', async () => {
+    await fixture(html`<div></div>`);
+    expect(deepQuery('.does-not-exist')).to.be.null;
+  });
+
+  it('finds an element in the light DOM of document', async () => {
+    const el = await fixture<HTMLElement>(html`<div class="needle"></div>`);
+    expect(deepQuery('.needle')).to.equal(el);
+  });
+
+  it('finds an element nested inside a shadow root', async () => {
+    const host = await fixture<HTMLElement>(html`<div></div>`);
+    const shadow = host.attachShadow({mode: 'open'});
+    const needle = document.createElement('span');
+    needle.className = 'needle';
+    shadow.appendChild(needle);
+
+    expect(deepQuery('.needle')).to.equal(needle);
+  });
+
+  it('finds an element across two nested shadow roots', async () => {
+    const outer = await fixture<HTMLElement>(html`<div></div>`);
+    const outerShadow = outer.attachShadow({mode: 'open'});
+
+    const inner = document.createElement('div');
+    outerShadow.appendChild(inner);
+    const innerShadow = inner.attachShadow({mode: 'open'});
+
+    const needle = document.createElement('span');
+    needle.className = 'needle';
+    innerShadow.appendChild(needle);
+
+    expect(deepQuery('.needle')).to.equal(needle);
+  });
+
+  it('returns the first match in document order', async () => {
+    const root = await fixture<HTMLElement>(html`
+      <div>
+        <span class="needle" data-which="light"></span>
+      </div>
+    `);
+    const shadow = root.attachShadow({mode: 'open'});
+    const inShadow = document.createElement('span');
+    inShadow.className = 'needle';
+    inShadow.setAttribute('data-which', 'shadow');
+    shadow.appendChild(inShadow);
+
+    const hit = deepQuery<HTMLElement>('.needle');
+    expect(hit?.getAttribute('data-which')).to.equal('light');
+  });
+
+  it('accepts a custom root', async () => {
+    const a = await fixture<HTMLElement>(html`<div><span class="needle"></span></div>`);
+    const b = await fixture<HTMLElement>(html`<div></div>`);
+
+    expect(deepQuery('.needle', a)).to.exist;
+    expect(deepQuery('.needle', b)).to.be.null;
+  });
+});

package/src/utilities/query.ts

@@ -1,3 +1,30 @@
+export function deepQuery<T extends Element = Element>(
+  selector: string,
+  root: Document | ShadowRoot | Element = document,
+): T | null {
+  const direct = root.querySelector<T>(selector);
+  if (direct) return direct;
+  for (const el of root.querySelectorAll<Element>('*')) {
+    if (el.shadowRoot) {
+      const hit = deepQuery<T>(selector, el.shadowRoot);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+export function deepQueryAll<T extends Element = Element>(
+  selector: string,
+  root: Document | ShadowRoot | Element = document,
+  out: T[] = [],
+): T[] {
+  out.push(...root.querySelectorAll<T>(selector));
+  for (const el of root.querySelectorAll<Element>('*')) {
+    if (el.shadowRoot) deepQueryAll<T>(selector, el.shadowRoot, out);
+  }
+  return out;
+}
+
 export function deepQuerySelectorAll(selector: string, element: Element, stopSelector: string): Element[] {
   const arr: Element[] = [];