@kubex/zinc 1.1.184 → 2.0.0

package/src/components/tabs/tabs.scss

@@ -5,9 +5,10 @@
   display: contents;
 }
 
-//::slotted(zn-sp) {
-//  --zn-sp-padding: 0 !important
-//}
+// Content loaded from a tab's uri sits inline in the tab: the tabs' own padding already spaces it
+#content > [data-self-uri] > zn-sp {
+  --zn-sp-padding: 0;
+}
 
 #mid, #content {
   flex: 1;
@@ -26,8 +27,12 @@
   max-height: 100%;
   width: 100%;
 
-  zn-header::part(base) {
-    //border-bottom-width: 0 !important;
+  zn-header {
+    padding: var(--zn-panel-header-padding, var(--zn-base-gap));
+  }
+
+  zn-header::part(content) {
+    padding: 0;
   }
 }
 
@@ -39,10 +44,34 @@ h1, h2 {
 
 
 #mid {
-  container-type: inline-size;
   flex-direction: row;
 }
 
+:host([gap]) #mid {
+  gap: var(--zn-gap, var(--zn-spacing-medium));
+  align-items: flex-start;
+
+  // The side card keeps its own width; the content takes the rest.
+  > ::slotted([slot="left"]),
+  > ::slotted([slot="right"]) {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+// The container for the side-card stacking below and for queries from the tab content: #mid is
+// the same width, and every nested container costs Safari a full layout per restyle beneath it.
+.tabs {
+  container: zn-tabs / inline-size;
+}
+
+@container zn-tabs (max-width: 900px) {
+  :host([gap]) #mid {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 #content {
   flex: 1;
   max-height: 100%;
@@ -60,8 +89,19 @@ h1, h2 {
 }
 
 :host([no-scroll]) {
+  // Clipped rather than hidden so focus rings on fields flush with the edge still show
+  .tabs, #mid, #content {
+    overflow: clip;
+    overflow-clip-margin: var(--zn-focus-ring-outset);
+  }
+
+  // Unlike hidden, clip keeps a flex item's minimum size at its content's, so #mid would grow past the tabs
+  #mid {
+    min-height: 0;
+    min-width: 0;
+  }
+
   #content {
-    overflow: hidden;
 
     > div {
       max-height: 100%;
@@ -132,6 +172,7 @@ h1, h2 {
   }
 
   h2 {
+    font-family: var(--zn-text-h1-font-family, inherit);
     font-weight: var(--zn-font-weight-bold);
     flex-grow: 1;
     font-size: var(--zn-font-size-medium);

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

@@ -10,6 +10,79 @@ describe('<zn-tabs>', () => {
     expect(el).to.exist;
   });
 
+  describe('panel entrance', () => {
+    const renderTabs = () => fixture<ZnTabs>(html`
+      <zn-tabs active="first">
+        <zn-navbar slot="top">
+          <li tab="first">First</li>
+          <li tab="second">Second</li>
+        </zn-navbar>
+        <div id="first">First panel</div>
+        <div id="second">Second panel</div>
+      </zn-tabs>
+    `);
+    const fading = (el: Element) => el.getAnimations().filter(a => a.playState === 'running').length;
+
+    it('fades in a panel the pointer switched to', async () => {
+      const el = await renderTabs();
+      await el.updateComplete;
+
+      const second = el.querySelector<HTMLElement>('li[tab="second"]')!;
+      second.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true, composed: true}));
+      second.click();
+      await aTimeout(40);
+
+      expect(fading(el.querySelector('#second')!)).to.equal(1);
+    });
+
+    it('stays still on first render and on keyboard switches', async () => {
+      // As if a click had just opened the page holding these tabs
+      document.body.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true}));
+      const el = await fixture<ZnTabs>(html`
+        <zn-tabs>
+          <zn-navbar slot="top">
+            <li tab="first">First</li>
+            <li tab="second">Second</li>
+          </zn-navbar>
+          <div id="first">First panel</div>
+          <div id="second">Second panel</div>
+        </zn-tabs>
+      `);
+      await el.updateComplete;
+      expect(fading(el.querySelector('#first')!)).to.equal(0);
+
+      el.querySelector<HTMLElement>('li[tab="second"]')!.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+      await aTimeout(40);
+
+      expect(el.querySelector('#second')!.hasAttribute('selected')).to.be.true;
+      expect(fading(el.querySelector('#second')!)).to.equal(0);
+    });
+  });
+
+  it('preloads a uri tab only once the pointer rests on it', async () => {
+    const el = await fixture<ZnTabs>(html`
+      <zn-tabs>
+        <zn-navbar slot="top">
+          <li tab-uri="/default">Default</li>
+          <li tab-uri="/passed-over">Passed</li>
+          <li tab-uri="/rested-on">Rested</li>
+        </zn-navbar>
+      </zn-tabs>
+    `);
+    await el.updateComplete;
+    const [, passed, rested] = Array.from(el.querySelectorAll<HTMLElement>('li[tab-uri]'));
+    expect(passed.hasAttribute('tab') || rested.hasAttribute('tab')).to.be.false;
+
+    passed.dispatchEvent(new MouseEvent('mouseenter'));
+    await aTimeout(50);
+    passed.dispatchEvent(new MouseEvent('mouseleave'));
+    rested.dispatchEvent(new MouseEvent('mouseenter'));
+    await aTimeout(250);
+
+    expect(passed.hasAttribute('tab')).to.be.false;
+    expect(rested.hasAttribute('tab')).to.be.true;
+  });
+
   it('does not register tabs belonging to a nested zn-page', async () => {
     const el = await fixture<ZnTabs>(html`
       <zn-tabs>
@@ -112,6 +185,47 @@ describe('<zn-tabs>', () => {
 
       expect(wrapper.scrollTop).to.equal(0);
     });
+
+    it('scrolls nested enclosing scrollers only as far as the tabs need', async () => {
+      const outer = await fixture<HTMLElement>(html`
+        <div style="height: 300px; overflow: auto;">
+          <div style="height: 2000px;">Above the inner scroller</div>
+          <div style="height: 300px; overflow: auto;">
+            <zn-tabs active="first">${panels}</zn-tabs>
+          </div>
+          <div style="height: 2000px;">Below the inner scroller</div>
+        </div>
+      `);
+      const inner = outer.children[1] as HTMLElement;
+      const el = inner.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      inner.scrollTop = 500;
+      outer.scrollTop = 2100;
+
+      await openSecondTab(el);
+
+      expect(inner.scrollTop).to.equal(0);
+      expect(outer.scrollTop).to.equal(2000);
+    });
+
+    it('leaves an enclosing scroller alone while the tabs are still in view', async () => {
+      const wrapper = await fixture<HTMLElement>(html`
+        <div style="height: 200px; overflow: auto;">
+          <div style="height: 100px;">Above the tabs</div>
+          <zn-tabs active="first">${panels}</zn-tabs>
+        </div>
+      `);
+      const el = wrapper.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      wrapper.scrollTop = 60;
+      expect(wrapper.scrollTop, 'the enclosing scroller never scrolled').to.equal(60);
+
+      await openSecondTab(el);
+
+      expect(wrapper.scrollTop).to.equal(60);
+    });
   });
 
   describe('selection persistence', () => {
@@ -158,6 +272,61 @@ describe('<zn-tabs>', () => {
       expect(restored.getAttribute('active')).to.equal('second');
     });
 
+    it('opens a tab added since the page was last shown, with select-added', async () => {
+      const render = (withThird: boolean) => fixture<ZnTabs>(html`
+        <zn-tabs store-key=${storeKey} active="first" select-added>
+          <zn-navbar slot="top">
+            <li tab="first">First</li>
+            <li tab="second">Second</li>
+            ${withThird ? html`<li tab="third">Third</li>` : null}
+          </zn-navbar>
+          <div id="first">First panel</div>
+          <div id="second">Second panel</div>
+          ${withThird ? html`<div id="third">Third panel</div>` : null}
+        </zn-tabs>
+      `);
+
+      const el = await render(false);
+      await aTimeout(40);
+      el.querySelector('zn-navbar')!.querySelectorAll<HTMLElement>('li')[1].click();
+      await aTimeout(40);
+      el.remove();
+
+      returnWithHistory();
+      const same = await render(false);
+      await aTimeout(40);
+      expect(same.getAttribute('active')).to.equal('second');
+      same.remove();
+
+      returnWithHistory();
+      const added = await render(true);
+      await aTimeout(40);
+      expect(added.getAttribute('active')).to.equal('third');
+      expect(added.querySelector('#third')!.hasAttribute('selected')).to.equal(true);
+    });
+
+    it('starts from the default tab when the restored tab no longer exists', async () => {
+      const el = await renderTabs();
+      await aTimeout(40);
+      el.querySelector('zn-navbar')!.querySelectorAll<HTMLElement>('li')[1].click();
+      await aTimeout(40);
+      el.remove();
+
+      returnWithHistory();
+      const restored = await fixture<ZnTabs>(html`
+        <zn-tabs store-key=${storeKey} active="first">
+          <zn-navbar slot="top">
+            <li tab="first">First</li>
+          </zn-navbar>
+          <div id="first">First panel</div>
+        </zn-tabs>
+      `);
+      await aTimeout(40);
+
+      expect(restored.getAttribute('active')).to.equal('first');
+      expect(restored.querySelector('#first')!.hasAttribute('selected')).to.equal(true);
+    });
+
     it('starts from the default tab when navigating to the location', async () => {
       const first = await renderTabs();
       await aTimeout(40);

package/src/components/textarea/textarea.component.ts

@@ -8,6 +8,7 @@ import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {revealBottom} from '../../internal/scroll';
 import {watch} from '../../internal/watch';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 import ZnSlashItem from "../slash-item";
@@ -64,10 +65,16 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly resizeObserver = new ResizeController(this, {
     target: null,
-    callback: () => this.setTextareaHeight(),
+    callback: () => {
+      this.setTextareaHeight();
+      // The native resize grip doesn't scroll, so a textarea at the bottom of a scroller would grow out of sight
+      if (this.pointerHeld) revealBottom(this.input);
+    },
   });
+  private pointerHeld = false;
   /** Ensures we only attempt to derive the initial value from light DOM content once */
   private _didInitFromContent = false;
+  private escapeSwallowed = false;
 
   private readonly slashController = new SlashMenuController(this, {
     menu: () => this.mountSlashMenu(),
@@ -139,6 +146,9 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** Makes the textarea a required field. */
   @property({type: Boolean, reflect: true}) required = false;
 
+  /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
+  @property({attribute: 'label-note'}) labelNote = '';
+
   /** The minimum length of input that will be considered valid. */
   @property({type: Number}) minlength: number;
 
@@ -377,12 +387,22 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
     // The slash menu claims its own keys before this handler runs; Escape closes it, not the field
     if (this.slashController.open) return;
 
+    // The first Escape stays in the field so it doesn't also dismiss a containing popup; a repeat bubbles
     if (event.key === 'Escape') {
-      this.input.blur();
-      event.stopPropagation();
+      if (!this.escapeSwallowed) {
+        this.escapeSwallowed = true;
+        event.stopPropagation();
+      }
+      return;
     }
+    this.escapeSwallowed = false;
   }
 
+  private handlePointerDown = () => {
+    this.pointerHeld = true;
+    window.addEventListener('pointerup', () => this.pointerHeld = false, {once: true});
+  };
+
   private setTextareaHeight() {
     if (this.resize === 'auto') {
       this.input.style.height = 'auto';
@@ -536,6 +556,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
                 <zn-icon library="fa" src="info"></zn-icon>
               </zn-tooltip>`
             : ''}
+          ${this.labelNote ? html`<span class="form-control__label-note">${this.labelNote}</span>` : ''}
         </label>
         ${hasContextNote
           ? html`<span class="form-control__label-context-note"><slot
@@ -585,6 +606,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
               aria-describedby="help-text"
               @change=${this.handleChange}
               @input=${this.handleInput}
+              @pointerdown=${this.handlePointerDown}
               @invalid=${this.handleInvalid}
               @keydown=${this.handleKeyDown}
               @focus=${this.handleFocus}

package/src/components/textarea/textarea.scss

@@ -31,6 +31,7 @@
 .textarea--standard {
   background-color: var(--zn-input-background-color);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  box-shadow: var(--zn-input-shadow, none);
 }
 
 .textarea--standard:hover:not(.textarea--disabled) {
@@ -53,6 +54,15 @@
   color: var(--zn-input-color-focus);
 }
 
+/* Invalid, once the user has interacted */
+:host([data-user-invalid]) .textarea--standard:not(.textarea--disabled) {
+  border-color: var(--zn-input-border-color-invalid);
+}
+
+:host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color-invalid);
+}
+
 .textarea--standard.textarea--disabled {
   background-color: var(--zn-input-background-color-disabled);
   border-color: var(--zn-input-border-color-disabled);

package/src/components/textarea/textarea.test.ts

@@ -54,7 +54,7 @@ describe('<zn-textarea>', () => {
   });
 
   describe('Escape key', () => {
-    it('blurs the inner textarea and stops propagation when focused', async () => {
+    it('keeps focus and swallows only the first Escape', async () => {
       const wrapper = await fixture<HTMLDivElement>(html`
         <div>
           <zn-textarea></zn-textarea>
@@ -72,16 +72,20 @@ describe('<zn-textarea>', () => {
       await el.updateComplete;
       expect(el.shadowRoot!.activeElement).to.equal(el.input);
 
-      el.input.dispatchEvent(new KeyboardEvent('keydown', {
+      const pressEscape = () => el.input.dispatchEvent(new KeyboardEvent('keydown', {
         key: 'Escape',
         bubbles: true,
         composed: true,
         cancelable: true
       }));
-      await el.updateComplete;
 
-      expect(el.shadowRoot!.activeElement, 'inner textarea should be blurred').to.not.equal(el.input);
+      pressEscape();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement, 'inner textarea should keep focus').to.equal(el.input);
       expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
+
+      pressEscape();
+      expect(wrapperEscapes, 'wrapper should see Escape on press 2').to.equal(1);
     });
   });
 

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

@@ -70,12 +70,6 @@
   // rather than the navbar's default body colour (flow-builder pattern).
   --zn-active-nav-background: var(--zn-panel);
 
-  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
-  // navbar under a zn-page — over the editor's opaque panel the translucent
-  // white just reads as white. Pin the standard tab tint instead.
-  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
-  --navbar-page-inactive-tab-filter: none;
-
   position: relative;
   display: flex;
   flex-direction: column;

package/src/components/tile/tile.component.ts

@@ -5,6 +5,7 @@ import {html, literal} from "lit/static-html.js";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import ZnIcon from '../icon';
 
 import styles from './tile.scss';
 
@@ -14,7 +15,7 @@ import styles from './tile.scss';
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @dependency zn-icon
  *
  * @event zn-event-name - Emitted as an example.
  *
@@ -22,11 +23,17 @@ import styles from './tile.scss';
  * @slot example - An example slot.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart icon - The tinted square around the icon.
  *
  * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-tile-hover-caption-color - The caption color while a linked tile is hovered.
+ * @cssproperty --zn-tile-hover-caption-decoration - The caption text decoration while a linked tile is hovered.
  */
 export default class ZnTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-icon': ZnIcon,
+  };
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description', 'properties', 'actions', 'image');
 
@@ -34,6 +41,12 @@ export default class ZnTile extends ZincElement {
 
   @property({attribute: 'description'}) description: string;
 
+  /** Shows the icon in a tinted square before the caption. */
+  @property() icon: string;
+
+  /** The tint of the icon square: `success`, `warning`, `danger`, `info`, `ai` or `neutral`. */
+  @property({attribute: 'icon-color'}) iconColor: 'success' | 'warning' | 'danger' | 'info' | 'ai' | 'neutral' = 'neutral';
+
   @property({attribute: 'href'}) href: string;
 
   @property({attribute: 'data-target'}) dataTarget: string;
@@ -63,6 +76,13 @@ export default class ZnTile extends ZincElement {
     return this.href || this.dataUri;
   }
 
+  // An <a> without href, as data-uri renders, is neither focusable nor activated by Enter on its own
+  private _handleLinkKeyDown(e: KeyboardEvent) {
+    if (this.href || !this.dataUri || e.key !== 'Enter' || e.target !== e.currentTarget) return;
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).click();
+  }
+
   private _handleActionsClick(e: MouseEvent) {
     if (!this._isLink()) return;
 
@@ -90,6 +110,7 @@ export default class ZnTile extends ZincElement {
     const hasProperties = this.hasSlotController.test('properties');
     const hasActions = this.hasSlotController.test('actions');
     const hasImage = this.hasSlotController.test('image');
+    const hasIcon = !!this.icon;
 
     return html`
       <div
@@ -106,19 +127,28 @@ export default class ZnTile extends ZincElement {
           'tile--has-properties': hasProperties,
           'tile--has-actions': hasActions,
           'tile--has-image': hasImage,
+          'tile--has-icon': hasIcon,
         })}">
         <${tag}
           href="${ifDefined(this.href)}"
           data-uri="${ifDefined(this.dataUri)}"
           gaid="${ifDefined(this.gaid)}"
           data-target="${ifDefined(this.dataTarget)}"
+          draggable="${ifDefined(isLink ? 'false' : undefined)}"
+          role="${ifDefined(this.dataUri && !this.href ? 'link' : undefined)}"
+          tabindex="${ifDefined(this.dataUri && !this.href ? '0' : undefined)}"
+          @keydown="${this._handleLinkKeyDown}"
           class="tile__link">
-          ${!hasCaption && !hasDescription && !hasProperties && !hasActions ? html`
+          ${!hasCaption && !hasDescription && !hasProperties && !hasActions && !hasIcon ? html`
             <slot></slot>
           ` : html`
             <div class="tile__left">
               ${hasImage ? html`
                 <slot name="image" part="image" class="tile__image"></slot>` : html``}
+              ${hasIcon ? html`
+                <span part="icon" class="tile__icon tile__icon--${this.iconColor}">
+                  <zn-icon src="${this.icon}" size="18"></zn-icon>
+                </span>` : html``}
               <div class="tile__content">
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>

package/src/components/tile/tile.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 48px;
+  min-height: var(--zn-tile-min-height, 48px);
   column-gap: var(--zn-spacing-large);
 
   font-size: var(--zn-text-table-content-font-size);
@@ -18,15 +18,16 @@
   color: var(--zn-text-table-content-color);
 
   &--has-image,
+  &--has-icon,
   &--has-caption,
   &--has-description,
   &--has-properties,
   &--has-actions {
-    padding-inline: var(--zn-base-gap);
+    padding-inline: var(--zn-tile-padding-inline, var(--zn-base-gap));
   }
 
   &--has-description#{&}--has-caption {
-    padding-block: var(--zn-base-gap);
+    padding-block: var(--zn-tile-padding-block, var(--zn-base-gap));
   }
 
   &--has-image {
@@ -37,7 +38,12 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--zn-color-neutral-100);
+      background-color: var(--zn-tile-hover-background, var(--zn-color-neutral-100));
+
+      .tile__caption {
+        --tile-caption-hover-color: var(--zn-tile-hover-caption-color);
+        text-decoration: var(--zn-tile-hover-caption-decoration, none);
+      }
     }
   }
 
@@ -73,6 +79,11 @@ a {
   flex: 1;
   column-gap: var(--zn-spacing-small);
   min-width: 0;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 .tile__left {
@@ -88,6 +99,25 @@ a {
   flex-shrink: 0;
 }
 
+.tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--zn-border-radius-medium, var(--zn-border-radius));
+  color: var(--zn-color-neutral-fg);
+  background: var(--zn-color-neutral-bg);
+
+  @each $tone in success, warning, danger, info, ai {
+    &--#{$tone} {
+      color: var(--zn-color-#{$tone}-fg);
+      background: var(--zn-color-#{$tone}-bg);
+    }
+  }
+}
+
 .tile__content {
   display: flex;
   flex-direction: column;
@@ -104,7 +134,8 @@ a {
 .tile__caption {
   margin: 0;
   font-weight: 600;
-  color: rgb(var(--zn-text-heading));
+  // Unset outside a linked tile's hover, so each caption falls back to its resting colour
+  color: var(--tile-caption-hover-color, rgb(var(--zn-text-heading)));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -112,7 +143,7 @@ a {
 
 .tile--plain .tile__caption {
   font-weight: var(--zn-text-table-content-font-weight);
-  color: var(--zn-text-table-content-color);
+  color: var(--tile-caption-hover-color, var(--zn-text-table-content-color));
 }
 
 .tile__description {
@@ -134,6 +165,8 @@ slot.tile__description {
 }
 
 .tile__right {
+  // Keeps actions clickable when a host such as zn-priority-list disables pointer events on the tile
+  pointer-events: auto;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -179,7 +212,7 @@ slot.tile__description {
   grid-template-columns: subgrid;
   align-items: center;
   justify-items: end;
-  min-height: 48px;
+  min-height: var(--zn-tile-min-height, 48px);
 }
 
 :host([grouped]) .tile__link,

package/src/components/tile/tile.test.ts

@@ -20,6 +20,16 @@ describe('<zn-tile>', () => {
     expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
   });
 
+  it('draws the icon in a tinted square', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile caption="Second chance" icon="tag@lu" icon-color="success"
+               style="--zn-color-success-bg: rgb(1, 2, 3)"></zn-tile>`);
+
+    const square = el.shadowRoot!.querySelector<HTMLElement>('.tile__icon')!;
+    expect(square.querySelector('zn-icon')).to.exist;
+    expect(getComputedStyle(square).backgroundColor).to.equal('rgb(1, 2, 3)');
+  });
+
   it('should render its content as a link when href is set', async () => {
     const el = await fixture<ZnTile>(html`
       <zn-tile href="/users/leslie" caption="Leslie Alexander"></zn-tile>`);