@kubex/zinc 1.1.98 → 1.1.100

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

@@ -118,6 +118,102 @@ Second"></zn-remarkd-editor>`);
     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/thumbnail-group/thumbnail-group.scss

@@ -19,7 +19,6 @@
   @include wc.text-style(h1);
 
   min-width: 0;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/src/components/tile/tile.scss

@@ -26,11 +26,11 @@
   }
 
   &--has-description#{&}--has-caption {
-    padding-block: var(--zn-spacing-small);
+    padding-block: var(--zn-base-gap);
   }
 
   &--has-image {
-    padding: var(--zn-spacing-small);
+    padding: var(--zn-base-gap);
   }
 
   &--has-href {

package/src/components/toggle/toggle.scss

@@ -31,7 +31,11 @@
   border-radius: 12px;
   align-items: center;
   background-color: rgb(var(--zn-color-tab));
-  border: 0.92px solid rgb(var(--zn-color-tab));
+  // The unchecked track needs an edge of its own. --zn-color-tab sits close to
+  // the surface behind it on dark themes, which left the switch reading as a
+  // free-floating knob with no discoverable control boundary. The checked state
+  // below repaints the border in the accent colour.
+  border: 0.92px solid rgb(var(--zn-border-color));
   margin: var(--zn-toggle-margin);
   transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
 }
@@ -46,6 +50,9 @@
 
   .switch__control {
     left: calc(100% - 20.32px - 0.92px);
+    // The knob carries the on/off state, so it takes the on-primary ink: a
+    // white knob on a light accent (neon lime, amber) is invisible.
+    background: rgb(var(--zn-color-on-primary, 255, 255, 255));
   }
 }
 

package/src/components/tooltip/tooltip.scss

@@ -35,7 +35,10 @@
   background-color: var(--arrow-color);
   text-align: start;
   white-space: normal;
-  color: white;
+  // The bubble is painted in --arrow-color, which resolves to --zn-color-text,
+  // so the ink has to be the surface colour rather than a fixed white — on any
+  // dark theme the text colour is light and white-on-light is unreadable.
+  color: rgb(var(--zn-color-base, 255, 255, 255));
   padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
   pointer-events: none;
   user-select: none;

package/src/components/translation-group/translation-group.test.ts

@@ -0,0 +1,22 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import type ZnInlineEdit from '../inline-edit/inline-edit.component';
+import type ZnTranslations from '../translations/translations.component';
+
+describe('<zn-translation-group>', () => {
+  // The group syncs its children from its own first update, which runs before theirs, so a child's
+  // pending value attribute must survive the language keys the group adds.
+  it("keeps a child's rendered value when it syncs the group language", async () => {
+    const group = await fixture(html`
+      <zn-translation-group label="Text" .languages=${{en: 'English', fr: 'French'}}>
+        <zn-translations name="heading" value='{"en":"Chat to us"}'></zn-translations>
+      </zn-translation-group>`);
+
+    const child = group.querySelector<ZnTranslations>('zn-translations')!;
+    await child.updateComplete;
+
+    expect(child.values).to.deep.equal({en: 'Chat to us'});
+    const input = child.shadowRoot!.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+    expect(input.value).to.equal('Chat to us');
+  });
+});

package/src/components/translations/translations.component.ts

@@ -150,15 +150,30 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
 
   /** Adds a language key to this component's values if not already present. Used by zn-translation-group. */
   public addLanguageKey(languageCode: string) {
-    if (!Object.prototype.hasOwnProperty.call(this.values, languageCode)) {
-      this.values = {...this.values, [languageCode]: ''};
+    const values = this.pendingValues();
+    if (!Object.prototype.hasOwnProperty.call(values, languageCode)) {
+      this.values = {...values, [languageCode]: ''};
       this.updateValue();
     }
   }
 
   /** Returns all language codes that have values. */
   public getValueLanguages(): string[] {
-    return Object.keys(this.values);
+    return Object.keys(this.pendingValues());
+  }
+
+  /**
+   * `values`, falling back to the `value` attribute it is built from while that is still pending. A parent
+   * zn-translation-group syncs its children from its own first update, which runs before theirs, so reading
+   * `values` alone would see it empty and overwrite the value the server rendered.
+   */
+  private pendingValues(): Record<string, string> {
+    if (Object.keys(this.values).length > 0) return this.values;
+    try {
+      return JSON.parse(this.value || '{}') as Record<string, string>;
+    } catch {
+      return this.values;
+    }
   }
 
   disconnectedCallback() {

package/src/form-control.scss

@@ -123,6 +123,8 @@
   margin-top: var(--zn-spacing-3x-small);
 }
 
-.form-control--checkbox-contained-wrapper {
+/* Let contained radios/checkboxes fill their grid row so cards in a row match height. */
+.form-control--checkbox-contained-wrapper,
+.form-control--radio-contained-wrapper {
   height: 100%;
 }

package/src/internal/conditional.ts

@@ -1,4 +1,4 @@
-import {deepQuerySelectorAll} from '../utilities/query';
+import {deepQuerySelectorAll, idSelector} from '../utilities/query';
 import type {ReactiveController, ReactiveControllerHost} from 'lit';
 
 export interface ConditionalHost {
@@ -26,7 +26,7 @@ export class ConditionalController implements ReactiveController {
     const ids = this.host.conditional.split(',').map(id => id.trim());
 
     ids.forEach(id => {
-      const byId = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as (Element & {
+      const byId = deepQuerySelectorAll(idSelector(id), document.documentElement, '') as (Element & {
         value: string | string[];
       })[];
       const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as (Element & {

package/src/internal/form.ts

@@ -1,4 +1,5 @@
 import {getFormNavigationController} from "./form-navigation";
+import {idSelector} from "../utilities/query";
 import {Store} from "./storage";
 import type {ReactiveController, ReactiveControllerHost} from "lit";
 import type {ZincFormControl} from "./zinc-element";
@@ -256,7 +257,7 @@ export class FormControlController implements ReactiveController {
 
         if (formId) {
           const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;
-          const form = root.querySelector(`#${formId}`);
+          const form = root.querySelector(idSelector(formId));
 
           if (form) {
             return form as HTMLFormElement;

package/src/internal/selection-card.ts

@@ -0,0 +1,19 @@
+/** Where a selection card renders its image, relative to the card's text. */
+export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
+
+/**
+ * Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
+ * inline position; `none` hides the indicator so the card itself shows the selected state.
+ */
+export type SelectionCardControlPosition =
+  | 'start'
+  | 'none'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'center-left'
+  | 'center'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';

package/src/selection-card.scss

@@ -0,0 +1,187 @@
+@use "sass:map";
+
+/*
+ * Shared presentation for "selection cards" — contained radios and checkboxes that
+ * render an image, a title, supporting text, and a repositionable indicator.
+ *
+ * The host component adds `.selection-card` (plus modifiers) to its `part="base"`
+ * element and renders `.selection-card__control`, `.selection-card__image-container`
+ * and `.selection-card__content` inside it. Everything is scoped to
+ * `:host([contained]) .selection-card` so these rules outrank the plain contained
+ * styles, and so a contained radio or checkbox without card content is untouched.
+ */
+
+$control-positions: (
+  "top-left": (block: start, inline: start),
+  "top-center": (block: start, inline: center),
+  "top-right": (block: start, inline: end),
+  "center-left": (block: center, inline: start),
+  "center": (block: center, inline: center),
+  "center-right": (block: center, inline: end),
+  "bottom-left": (block: end, inline: start),
+  "bottom-center": (block: end, inline: center),
+  "bottom-right": (block: end, inline: end),
+);
+
+:host([contained]) .selection-card {
+  --selection-card-padding: var(--zn-selection-card-padding, var(--zn-spacing-large));
+  --selection-card-gap: var(--zn-selection-card-gap, var(--zn-spacing-medium));
+  --selection-card-image-width: var(--zn-selection-card-image-width, 5rem);
+  --selection-card-image-height: var(--zn-selection-card-image-height, 5rem);
+  --selection-card-control-offset: var(--zn-selection-card-control-offset, var(--zn-spacing-medium));
+
+  /* Space an edge-positioned control needs so content never runs underneath it. */
+  --selection-card-control-gutter: calc(var(--selection-card-control-offset) + var(--toggle-size) + var(--selection-card-gap));
+
+  align-items: center;
+  align-content: center;
+  gap: var(--selection-card-gap);
+  padding: var(--selection-card-padding);
+
+  .selection-card__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-inline-start: 0;
+    line-height: var(--zn-line-height-normal);
+  }
+
+  .selection-card__title {
+    display: block;
+    font-size: var(--zn-selection-card-title-font-size, var(--zn-font-size-large));
+    font-weight: var(--zn-font-weight-semibold);
+    line-height: var(--zn-line-height-dense);
+  }
+
+  /* Images */
+  &.selection-card--has-image {
+    min-height: var(--zn-selection-card-min-height, 9rem);
+
+    /* Beside an image the text keeps a readable column, and wraps below it when there isn't room. */
+    flex-wrap: wrap;
+
+    .selection-card__content {
+      flex-basis: var(--zn-selection-card-content-min-width, 8rem);
+    }
+  }
+
+  .selection-card__image-container {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ::slotted(*) {
+      display: block;
+      max-width: 100%;
+      max-height: var(--selection-card-image-height);
+    }
+  }
+
+  .selection-card__image {
+    display: block;
+    width: var(--selection-card-image-width);
+    max-width: 100%;
+    height: var(--selection-card-image-height);
+    object-fit: contain;
+  }
+
+  /* The image renders before the content, so only trailing positions need reordering. */
+  &.selection-card--image-right,
+  &.selection-card--image-bottom {
+    .selection-card__image-container {
+      order: 2;
+    }
+
+    .selection-card__content {
+      order: 1;
+    }
+  }
+
+  &.selection-card--image-top,
+  &.selection-card--image-bottom {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: center;
+
+    .selection-card__image-container {
+      align-self: center;
+    }
+
+    .selection-card__content {
+      /* The basis above is a width; in a column it would set the text block's height. */
+      flex: 0 0 auto;
+      text-align: center;
+    }
+
+    /* Centred text stays centred: mirror the gutter an edge control needs on both sides. */
+    @each $name, $position in $control-positions {
+      @if map.get($position, inline) != center {
+        &.selection-card--control-#{$name} {
+          padding-inline: var(--selection-card-control-gutter);
+        }
+      }
+    }
+  }
+
+  /* Positioned controls */
+  @each $name, $position in $control-positions {
+    $block: map.get($position, block);
+    $inline: map.get($position, inline);
+
+    &.selection-card--control-#{$name} {
+      @if $inline == start {
+        padding-inline-start: var(--selection-card-control-gutter);
+      } @else if $inline == end {
+        padding-inline-end: var(--selection-card-control-gutter);
+      } @else if $block == start {
+        padding-block-start: var(--selection-card-control-gutter);
+      } @else if $block == end {
+        padding-block-end: var(--selection-card-control-gutter);
+      }
+
+      .selection-card__control {
+        position: absolute;
+        z-index: 1;
+        transform: translate(var(--selection-card-control-shift-x, 0), var(--selection-card-control-shift-y, 0));
+
+        @if $block == center {
+          --selection-card-control-shift-y: -50%;
+
+          inset-block-start: 50%;
+        } @else {
+          inset-block-#{$block}: var(--selection-card-control-offset);
+        }
+
+        @if $inline == center {
+          --selection-card-control-shift-x: -50%;
+
+          inset-inline-start: 50%;
+        } @else {
+          inset-inline-#{$inline}: var(--selection-card-control-offset);
+        }
+      }
+    }
+  }
+
+  /* Hidden control — the card itself becomes the visible indicator. */
+  &.selection-card--control-none {
+    .selection-card__control {
+      display: none;
+    }
+
+    &:has(input:focus-visible) {
+      outline: var(--zn-focus-ring);
+      outline-offset: var(--zn-focus-ring-offset);
+    }
+  }
+}
+
+/* Contained radios and checkboxes are rounded by default; `square` opts out. */
+:host([contained]) [part~="base"] {
+  border-radius: var(--zn-selection-card-border-radius, var(--zn-border-radius));
+}
+
+:host([square]) [part~="base"] {
+  border-radius: 0;
+}

package/src/utilities/query.test.ts

@@ -1,5 +1,5 @@
 import {expect, fixture, html} from '@open-wc/testing';
-import {deepQuery} from './query';
+import {deepQuery, idSelector} from './query';
 
 describe('deepQuery', () => {
   it('returns null when no element matches', async () => {
@@ -61,3 +61,20 @@ describe('deepQuery', () => {
     expect(deepQuery('.needle', b)).to.be.null;
   });
 });
+
+describe('idSelector', () => {
+  it('escapes characters that CSS would otherwise treat as syntax', async () => {
+    const id = 'delete-enum-cloud_hosting_&_infrastructure';
+    const el = await fixture<HTMLElement>(html`<div id="${id}"></div>`);
+
+    expect(() => document.querySelector(`#${id}`)).to.throw();
+    expect(document.querySelector(idSelector(id))).to.equal(el);
+    expect(el.matches(idSelector(id))).to.be.true;
+  });
+
+  it('accepts an id that already carries a leading hash', async () => {
+    const el = await fixture<HTMLElement>(html`<div id="plain-id"></div>`);
+
+    expect(document.querySelector(idSelector('#plain-id'))).to.equal(el);
+  });
+});

package/src/utilities/query.ts

@@ -1,3 +1,11 @@
+/**
+ * Builds a valid `#id` selector. Ids can legally contain characters that CSS treats as syntax (`&`, `.`, `:`,
+ * a leading digit), so they must be escaped before being used in `querySelector`/`matches`.
+ */
+export function idSelector(id: string): string {
+  return `#${CSS.escape(id.startsWith('#') ? id.slice(1) : id)}`;
+}
+
 export function deepQuery<T extends Element = Element>(
   selector: string,
   root: Document | ShadowRoot | Element = document,

package/src/zinc.ts

@@ -117,6 +117,7 @@ export { default as SlashItem } from './components/slash-item';
 export { default as ScheduleBuilder } from './components/schedule-builder';
 export { default as Thumbnail } from './components/thumbnail';
 export { default as ThumbnailGroup } from './components/thumbnail-group';
+export { default as Background } from './components/background';
 /* plop:component */
 
 // Base Component