@kubex/zinc 1.1.185 → 2.0.0

package/src/components/dialog/dialog.component.ts

@@ -3,7 +3,8 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
 import {idSelector} from "../../utilities/query";
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property, query} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
+import {registerCosmicBorder} from "../../internal/cosmic-border";
 import {unlockBodyScrolling} from "../../internal/scroll";
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from "../button";
@@ -11,14 +12,14 @@ import ZnButton from "../button";
 import styles from './dialog.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary A modal that appears above the page for a decision that blocks the flow.
  * @documentation https://zinc.style/components/dialog
  * @status experimental
  * @since 1.0
  *
  * @dependency zn-button
  *
- * @event zn-show - Emitted when the dialog is opens.
+ * @event zn-show - Emitted when the dialog opens.
  * @event zn-close - Emitted when the dialog is closed.
  * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to
  * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
@@ -29,7 +30,7 @@ import styles from './dialog.scss';
  * @slot label - The dialog's label. Alternatively you can use the `label` attribute.
  * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied
  * to the icon depending on the dialog variant.
- * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.
+ * @slot announcement-intro - Optional intro text to display below the icon, when using the variant `announcement`.
  * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
  * @slot footer - The dialog's footer. This is typically used for buttons representing various options.
  * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.
@@ -39,14 +40,23 @@ import styles from './dialog.scss';
  * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
  * @csspart title - The dialog's title.
  * @csspart close-button - The dialog's close button.
- * @csspart close-button__base - The close buttons exported `base` part.
+ * @csspart close-button__base - The close button's exported `base` part.
  * @csspart body - The dialog's body.
  * @csspart footer - The dialog's footer.
  *
- * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.
+ * @cssproperty --width - The preferred width of a `size="custom"` dialog. The dialog shrinks to fit smaller screens.
  * @cssproperty --header-spacing - The amount of padding to use for the header.
  * @cssproperty --body-spacing - The amount of padding to use for the body.
  * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ * @cssproperty --zn-dialog-width-small - Theme token: the width of `size="small"`.
+ * @cssproperty --zn-dialog-width-medium - Theme token: the width of `size="medium"`.
+ * @cssproperty --zn-dialog-width-large - Theme token: the width of `size="large"`.
+ * @cssproperty --zn-dialog-border-radius - Theme token: the dialog's corner radius.
+ * @cssproperty --zn-dialog-backdrop - Theme token: the backdrop behind the dialog.
+ * @cssproperty --zn-dialog-body-color - Theme token: the body text colour.
+ * @cssproperty --zn-dialog-icon-background - Theme token: the fill behind a default or warning header icon.
+ * @cssproperty --zn-dialog-close-color - Theme token: the close button's icon colour.
+ * @cssproperty --zn-dialog-close-icon-size - Theme token: the close button's icon size, read when the dialog opens.
  */
 export default class ZnDialog extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -92,6 +102,9 @@ export default class ZnDialog extends ZincElement {
    */
   @property({type: String, reflect: true}) trigger: string;
 
+  /** Read from `--zn-dialog-close-icon-size` on open, as zn-icon takes its size as an attribute. */
+  @state() private closeIconSize = 24;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.open) {
@@ -111,18 +124,7 @@ export default class ZnDialog extends ZincElement {
         trigger.addEventListener('click', () => this.show());
       }
     }
-    if (window.CSS.registerProperty) {
-      try {
-        window.CSS.registerProperty({
-          inherits: false,
-          initialValue: '0deg',
-          name: '--rotate',
-          syntax: '<angle>',
-        });
-      } catch (e) {
-        // do nothing
-      }
-    }
+    registerCosmicBorder();
   }
 
   disconnectedCallback() {
@@ -153,6 +155,19 @@ export default class ZnDialog extends ZincElement {
     this.hide();
   }
 
+  // Escape on a native modal dialog closes it directly, bypassing zn-request-close
+  private handleCancel = (event: Event) => {
+    event.preventDefault();
+    this.requestClose('keyboard');
+  };
+
+  // The browser can refuse to cancel a repeated Escape, closing the dialog anyway
+  private handleNativeClose = () => {
+    if (this.open) {
+      this.hide();
+    }
+  };
+
   private addOpenListeners() {
     if ('CloseWatcher' in window) {
       this.closeWatcher?.destroy();
@@ -167,6 +182,8 @@ export default class ZnDialog extends ZincElement {
 
   /** Shows the dialog. */
   show() {
+    const closeIconSize = parseFloat(getComputedStyle(this).getPropertyValue('--zn-dialog-close-icon-size'));
+    this.closeIconSize = closeIconSize > 0 ? closeIconSize : 24;
     this.emit('zn-show');
     this.addOpenListeners();
     this.open = true;
@@ -207,6 +224,8 @@ export default class ZnDialog extends ZincElement {
     return html`
       <dialog
         part="base"
+        @cancel=${this.handleCancel}
+        @close=${this.handleNativeClose}
         role="alertdialog"
         aria-modal="true"
         aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
@@ -246,7 +265,7 @@ export default class ZnDialog extends ZincElement {
                   exportparts="base:close-button__base"
                   class="dialog__close"
                   icon="x@lu"
-                  icon-size="24"
+                  icon-size="${this.closeIconSize}"
                   icon-button="small"
                   plain
                   @click="${() => this.requestClose('close-button')}"

package/src/components/dialog/dialog.scss

@@ -2,9 +2,9 @@
 
 :host {
   --width: 30rem;
-  --header-spacing: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium);
-  --body-spacing: var(--zn-spacing-x-small) var(--zn-spacing-large);
-  --footer-spacing: var(--zn-spacing-large);
+  --header-spacing: var(--zn-dialog-header-spacing, var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-medium));
+  --body-spacing: var(--zn-dialog-body-spacing, var(--zn-spacing-x-small) var(--zn-spacing-large));
+  --footer-spacing: var(--zn-dialog-footer-spacing, var(--zn-spacing-large));
   --icon-background-color: var(--zn-color-primary-200);
   --icon-color: var(--zn-color-primary-600);
   --caption-color: var(--zn-color-primary-600);
@@ -17,7 +17,7 @@
   flex: 1 1 auto;
   flex-direction: column;
   min-height: 0;
-  border-radius: var(--zn-border-radius);
+  border-radius: var(--zn-dialog-border-radius, var(--zn-border-radius));
   background-color: var(--zn-panel-background-color);
   margin: 2px;
   overflow: hidden;
@@ -28,6 +28,10 @@
 }
 
 .dialog {
+  // Back to the theme's sizes: a dialog inherits from wherever it is placed, e.g. a chip that shrinks its buttons
+  --zn-button-height: var(--zn-density-control-height, 36px);
+  --zn-button-icon-width: var(--zn-density-control-height, 40px);
+
   flex-direction: column;
   z-index: 2;
   width: calc(var(--width) + 1px);
@@ -35,7 +39,7 @@
   max-width: calc(100% - var(--zn-spacing-2x-large));
   max-height: calc(100% - 20vh);
   background-color: var(--zn-panel-background-color);
-  border-radius: var(--zn-border-radius);
+  border-radius: var(--zn-dialog-border-radius, var(--zn-border-radius));
   box-shadow: var(--zn-shadow-x-large);
   padding: 0;
   margin: 10vh auto;
@@ -44,6 +48,12 @@
     display: flex;
   }
 
+  // The fallback is the browser's own dialog backdrop.
+  &::backdrop {
+    background: var(--zn-dialog-backdrop, rgba(0, 0, 0, 0.1));
+    backdrop-filter: var(--zn-overlay-backdrop-filter, none);
+  }
+
   &__header {
     flex: 0 0 auto;
     display: flex;
@@ -77,6 +87,16 @@
     }
   }
 
+  &__close::part(base) {
+    width: var(--zn-dialog-close-size, var(--zn-button-height, 36px));
+    min-width: var(--zn-dialog-close-size, var(--zn-button-height, 36px));
+    height: var(--zn-dialog-close-size, var(--zn-button-height, 36px));
+    min-height: var(--zn-dialog-close-size, var(--zn-button-height, 36px));
+    max-height: var(--zn-dialog-close-size, var(--zn-button-height, 36px));
+    padding: var(--zn-dialog-close-padding, 6px);
+    color: var(--zn-dialog-close-color, rgb(var(--zn-text)));
+  }
+
   &__label {
     overflow: hidden;
     word-break: break-word;
@@ -90,17 +110,24 @@
     padding: var(--body-spacing);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    color: var(--zn-color-text-default);
-    font-size: var(--zn-font-size-medium);
+    color: var(--zn-dialog-body-color, var(--zn-color-text-default));
+    font-size: var(--zn-dialog-body-font-size, var(--zn-font-size-medium));
     font-weight: var(--zn-font-weight-normal);
     letter-spacing: var(--zn-tracking-normal);
-    line-height: var(--zn-line-height-dense);
+    line-height: var(--zn-dialog-body-line-height, var(--zn-line-height-dense));
+
+    // Safari opens the dialog by focusing this tabindex="-1" body, and it isn't a control worth a ring
+    &:focus {
+      outline: none;
+    }
   }
 
   &__footer {
     flex: 0 0 auto;
     text-align: right;
     padding: var(--footer-spacing);
+    border-top: var(--zn-dialog-footer-divider, none);
+    background: var(--zn-dialog-footer-background, transparent);
 
     ::slotted(zn-button:not(:first-of-type)) {
       margin-inline-start: var(--zn-spacing-x-small);
@@ -111,10 +138,11 @@
   &--default &__title,
   &--warning &__title {
     color: rgb(var(--zn-text-panel-title));
-    font-size: var(--zn-font-size-x-large);
-    font-weight: var(--zn-font-weight-semibold);
+    font-family: var(--zn-dialog-title-font-family, inherit);
+    font-size: var(--zn-dialog-title-font-size, var(--zn-font-size-x-large));
+    font-weight: var(--zn-dialog-title-font-weight, var(--zn-font-weight-semibold));
     letter-spacing: var(--zn-letter-spacing-normal);
-    line-height: var(--zn-line-height-dense);
+    line-height: var(--zn-dialog-title-line-height, var(--zn-line-height-dense));
     padding: var(--header-spacing);
   }
 
@@ -124,11 +152,12 @@
     flex-direction: column;
     justify-content: center;
     align-content: center;
-    color: var(--caption-color);
-    font-size: var(--zn-font-size-x-large);
-    font-weight: var(--zn-font-weight-semibold);
+    color: var(--zn-dialog-announcement-title-color, var(--caption-color));
+    font-family: var(--zn-dialog-announcement-title-font-family, inherit);
+    font-size: var(--zn-dialog-announcement-title-font-size, var(--zn-font-size-x-large));
+    font-weight: var(--zn-dialog-announcement-title-font-weight, var(--zn-font-weight-semibold));
     letter-spacing: var(--zn-letter-spacing-normal);
-    line-height: var(--zn-line-height-dense);
+    line-height: var(--zn-dialog-announcement-title-line-height, var(--zn-line-height-dense));
     padding: var(--header-spacing);
     margin: 0;
   }
@@ -136,19 +165,20 @@
   &--default &__title ::slotted(zn-icon),
   &--warning &__title ::slotted(zn-icon) {
     border-radius: var(--zn-border-radius-pill);
-    padding: var(--zn-spacing-2x-small);
-    margin-right: var(--zn-spacing-small);
+    padding: var(--zn-dialog-icon-padding, var(--zn-spacing-2x-small));
+    margin-right: var(--zn-dialog-icon-gap, var(--zn-spacing-small));
   }
 
   &--announcement &__title ::slotted(zn-icon) {
-    --icon-size: var(--zn-font-size-3x-large);
-    border-radius: var(--zn-border-radius-pill);
-    padding: var(--zn-spacing-medium);
-    margin-bottom: var(--zn-spacing-medium);
+    --icon-size: var(--zn-dialog-announcement-icon-size, var(--zn-font-size-3x-large));
+    border-radius: var(--zn-dialog-announcement-icon-radius, var(--zn-border-radius-pill));
+    padding: var(--zn-dialog-announcement-icon-padding, var(--zn-spacing-medium));
+    margin-bottom: var(--zn-dialog-announcement-icon-gap, var(--zn-spacing-medium));
+    background-color: var(--icon-background-color);
   }
 
   &__title ::slotted(zn-icon) {
-    background-color: var(--icon-background-color);
+    background-color: var(--zn-dialog-icon-background, var(--icon-background-color));
     color: var(--icon-color);
   }
 
@@ -158,10 +188,12 @@
   }
 
   &--announcement &__title ::slotted([slot='announcement-intro']) {
-    color: var(--zn-color-neutral-800);
-    font-size: var(--zn-font-size-large);
+    color: var(--zn-dialog-announcement-intro-color, var(--zn-color-neutral-800));
+    font-size: var(--zn-dialog-announcement-intro-font-size, var(--zn-font-size-large));
     font-weight: var(--zn-font-weight-semibold);
-    padding: var(--zn-spacing-medium) 0;
+    letter-spacing: var(--zn-dialog-announcement-intro-letter-spacing, normal);
+    text-transform: var(--zn-dialog-announcement-intro-transform, none);
+    padding: var(--zn-dialog-announcement-intro-spacing, var(--zn-spacing-medium) 0);
   }
 
   &--announcement &__header-actions {
@@ -169,7 +201,7 @@
   }
 
   &--announcement &__body {
-    padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large);
+    padding: var(--zn-dialog-announcement-body-spacing, var(--zn-spacing-x-small) var(--zn-spacing-2x-large));
   }
 
   &--announcement &__title,
@@ -179,27 +211,28 @@
   }
 
   &--announcement &__footer ::slotted([slot='footer-text']) {
-    color: var(--zn-color-neutral-700);
-    font-size: var(--zn-font-size-small);
+    color: var(--zn-dialog-announcement-footer-text-color, var(--zn-color-neutral-700));
+    font-size: var(--zn-dialog-announcement-footer-text-font-size, var(--zn-font-size-small));
     font-weight: var(--zn-font-weight-normal);
+    padding: var(--zn-dialog-announcement-footer-text-spacing, var(--zn-spacing-large));
   }
 
   /** Sizes */
   &--small {
-    --width: 25rem;
+    --width: var(--zn-dialog-width-small, 25rem);
 
     .dialog__body {
-      color: rgb(var(--zn-text));
+      color: var(--zn-dialog-body-color, rgb(var(--zn-text)));
       padding: var(--body-spacing);
     }
   }
 
   &--medium {
-    --width: 30rem;
+    --width: var(--zn-dialog-width-medium, 30rem);
   }
 
   &--large {
-    --width: 37.5rem;
+    --width: var(--zn-dialog-width-large, 37.5rem);
   }
 
   /** Modifiers **/
@@ -208,10 +241,6 @@
   //  padding: var(--zn-spacing-x-small) var(--zn-spacing-large) var(--zn-spacing-3x-large);
   //}
 
-  &--announcement &__footer ::slotted([slot='footer-text']) {
-    padding: var(--zn-spacing-large);
-  }
-
   &__footer ::slotted(zn-button:not(:first-of-type)) {
     margin-inline-start: var(--zn-spacing-x-small);
   }

package/src/components/dialog/dialog.test.ts

@@ -7,4 +7,18 @@ describe('<zn-dialog>', () => {
 
     expect(el).to.exist;
   });
+
+  it('draws the footer divider and radius from the dialog tokens', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-dialog label="Refund" style="--zn-dialog-footer-divider: 1px solid rgb(1, 2, 3); --zn-dialog-border-radius: 9px">
+        <p>Body</p>
+        <button slot="footer">OK</button>
+      </zn-dialog>`);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+    const footer = el.shadowRoot!.querySelector('.dialog__footer')!;
+    const dialog = el.shadowRoot!.querySelector('.dialog')!;
+
+    expect(getComputedStyle(footer).borderTopColor).to.equal('rgb(1, 2, 3)');
+    expect(getComputedStyle(dialog).borderTopLeftRadius).to.equal('9px');
+  });
 });

package/src/components/diff/diff.component.ts

@@ -0,0 +1,55 @@
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './diff.scss';
+
+/**
+ * @summary A side-by-side comparison of two versions of something, one column each, built from `zn-diff-row`s.
+ * @documentation https://zinc.style/components/diff
+ * @status experimental
+ * @since 1.1
+ *
+ * @property {string} beforeCaption - The left column's heading, such as the older version.
+ * @property {string} beforeDescription - A line under the left heading.
+ * @property {string} afterCaption - The right column's heading, such as the newer version.
+ * @property {string} afterDescription - A line under the right heading.
+ *
+ * @slot - The `zn-diff-row`s.
+ * @slot before - Inline content after the left heading, such as a status badge.
+ * @slot after - Inline content after the right heading, such as a status badge.
+ *
+ * @csspart base - The table.
+ * @csspart head - The sticky row of column headings.
+ *
+ * @cssproperty --zn-diff-head-background - The heading row's background.
+ * @cssproperty --zn-diff-sticky-top - How far from the top of its scroll container the heading row sticks.
+ */
+export default class ZnDiff extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({ attribute: 'before-caption' }) beforeCaption = '';
+  @property({ attribute: 'before-description' }) beforeDescription = '';
+  @property({ attribute: 'after-caption' }) afterCaption = '';
+  @property({ attribute: 'after-description' }) afterDescription = '';
+
+  render() {
+    return html`
+      <div class="diff" part="base" role="table">
+        <div class="diff__head" part="head" role="row">
+          <div class="diff__column" role="columnheader">
+            <span class="diff__caption">${this.beforeCaption}<slot name="before"></slot></span>
+            ${this.beforeDescription ? html`<span class="diff__description">${this.beforeDescription}</span>` : ''}
+          </div>
+          <div class="diff__column" role="columnheader">
+            <span class="diff__caption">${this.afterCaption}<slot name="after"></slot></span>
+            ${this.afterDescription ? html`<span class="diff__description">${this.afterDescription}</span>` : ''}
+          </div>
+        </div>
+        <div role="rowgroup">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/diff/diff.scss

@@ -0,0 +1,46 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.diff__head {
+  position: sticky;
+  top: var(--zn-diff-sticky-top, 0);
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+  background: var(--zn-diff-head-background, rgb(var(--zn-panel)));
+}
+
+.diff__column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+
+  & + & {
+    border-inline-start: 1px solid rgb(var(--zn-border-color));
+  }
+}
+
+.diff__caption {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  font-size: var(--zn-font-size-small);
+  font-weight: var(--zn-font-weight-semibold);
+  color: rgb(var(--zn-text-heading));
+}
+
+.diff__description {
+  font-size: var(--zn-font-size-x-small);
+  color: rgb(var(--zn-color-muted-text));
+}
+
+::slotted(:last-child) {
+  --zn-diff-row-border: 0;
+}

package/src/components/diff/diff.test.ts

@@ -0,0 +1,15 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-diff>', () => {
+  it('renders both column headings', async () => {
+    const el = await fixture(html`
+      <zn-diff before-caption="Version 2" after-caption="Version 3" after-description="Live"></zn-diff>`);
+
+    const headings = el.shadowRoot!.querySelectorAll('[role="columnheader"]');
+    expect(headings).to.have.length(2);
+    expect(headings[0].textContent).to.contain('Version 2');
+    expect(headings[1].textContent).to.contain('Version 3');
+    expect(headings[1].textContent).to.contain('Live');
+  });
+});

package/src/components/diff/index.ts

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

package/src/components/diff-row/diff-row.component.ts

@@ -0,0 +1,75 @@
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnBadge from '../badge';
+
+import styles from './diff-row.scss';
+
+const changeLabels = { changed: 'Changed', added: 'Added', removed: 'Removed' } as const;
+
+/**
+ * @summary One aligned row of a `zn-diff`: the same item in both versions, tinted by how it changed.
+ * @documentation https://zinc.style/components/diff-row
+ * @status experimental
+ * @since 1.1
+ *
+ * @dependency zn-badge
+ *
+ * @property {string} caption - The item's name, shown in both columns.
+ * @property {string} change - How the item changed: `changed`, `added` or `removed`. Unchanged when empty.
+ * @property {boolean} heading - When true, the row is a heading spanning both columns, such as a section name.
+ * @property {string} beforePlaceholder - Shown in the left column when the item was added.
+ * @property {string} afterPlaceholder - Shown in the right column when the item was removed.
+ *
+ * @slot before - The item's details in the older version.
+ * @slot after - The item's details in the newer version.
+ *
+ * @csspart row - The row.
+ * @csspart before - The left cell.
+ * @csspart after - The right cell.
+ *
+ * @cssproperty --zn-diff-row-border - The line below the row.
+ */
+export default class ZnDiffRow extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-badge': ZnBadge,
+  };
+
+  @property() caption = '';
+  @property({ reflect: true }) change: '' | 'changed' | 'added' | 'removed' = '';
+  @property({ type: Boolean, reflect: true }) heading = false;
+  @property({ attribute: 'before-placeholder' }) beforePlaceholder = 'Not in this version';
+  @property({ attribute: 'after-placeholder' }) afterPlaceholder = 'Not in this version';
+
+  private renderCell(side: 'before' | 'after') {
+    const absent = side === 'before' ? this.change === 'added' : this.change === 'removed';
+    if (absent) {
+      return html`
+        <div class="row__cell row__cell--absent" part="${side}" role="cell">
+          ${side === 'before' ? this.beforePlaceholder : this.afterPlaceholder}
+        </div>`;
+    }
+    const label = this.change ? changeLabels[this.change] : '';
+    const badgeType = this.change === 'added' ? 'success' : this.change === 'removed' ? 'danger' : 'info';
+    return html`
+      <div class="row__cell" part="${side}" role="cell">
+        <span class="row__caption">
+          ${this.caption}
+          ${side === 'after' && label ? html`<zn-badge type="${badgeType}">${label}</zn-badge>` : ''}
+        </span>
+        <span class="row__details"><slot name="${side}"></slot></span>
+      </div>`;
+  }
+
+  render() {
+    if (this.heading) {
+      return html`<div class="row row--heading" part="row" role="row"><span role="rowheader">${this.caption}</span></div>`;
+    }
+    return html`
+      <div class="row" part="row" role="row">
+        ${this.renderCell('before')}
+        ${this.renderCell('after')}
+      </div>`;
+  }
+}

package/src/components/diff-row/diff-row.scss

@@ -0,0 +1,70 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  border-bottom: var(--zn-diff-row-border, 1px solid rgb(var(--zn-border-color)));
+}
+
+.row--heading {
+  display: block;
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium) var(--zn-spacing-x-small);
+  background: rgba(var(--zn-color-text), 0.02);
+  font-size: var(--zn-font-size-x-small);
+  font-weight: var(--zn-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgb(var(--zn-color-muted-text));
+}
+
+.row__cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  font-size: var(--zn-font-size-small);
+  line-height: 1.45;
+
+  & + & {
+    border-inline-start: 1px solid rgb(var(--zn-border-color));
+  }
+}
+
+.row__caption {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  font-weight: var(--zn-font-weight-semibold);
+  color: rgb(var(--zn-text-heading));
+}
+
+.row__details {
+  color: rgb(var(--zn-color-muted-text));
+  overflow-wrap: anywhere;
+}
+
+// The absent side of an added or removed item: hatched so it reads as empty rather than blank.
+.row__cell--absent {
+  justify-content: center;
+  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--zn-border-color), 0.25) 6px 12px);
+  font-size: var(--zn-font-size-x-small);
+  color: rgb(var(--zn-color-muted-text));
+}
+
+:host([change="changed"]) .row__cell {
+  background-color: var(--zn-color-info-bg);
+}
+
+:host([change="added"]) .row__cell:not(.row__cell--absent) {
+  background-color: var(--zn-color-success-bg);
+}
+
+:host([change="removed"]) .row__cell:not(.row__cell--absent) {
+  background-color: var(--zn-color-danger-bg);
+}