@kubex/zinc 1.1.98 → 1.1.100

package/src/components/checkbox/checkbox.component.ts

@@ -9,6 +9,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import type {SelectionCardControlPosition, SelectionCardImagePosition} from '../../internal/selection-card';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
@@ -24,6 +25,7 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @dependency zn-icon
  *
  * @slot - The checkbox's label.
+ * @slot image - Replaces the built-in image used by contained checkboxes.
  * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
  * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
  *
@@ -40,9 +42,22 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
  * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
  * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
+ * @csspart image-container - The wrapper around the built-in image or image slot.
+ * @csspart image - The built-in image.
+ * @csspart card-title - The title inside a selection card.
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart description - The container that wraps the checkbox's description.
  * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
+ *
+ * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+ * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+ * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
+ * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+ * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+ * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+ * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+ * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+ * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -53,7 +68,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     defaultValue: (control: ZnCheckbox) => control.defaultChecked,
     setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked)
   });
-  private readonly hasSlotController = new HasSlotController(this, 'description');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
@@ -67,6 +82,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** The current value of the checkbox, submitted as a name/value pair with form data. */
   @property() value: string;
 
+  /** Title rendered inside the card. The default slot takes precedence when provided. */
+  @property({attribute: 'card-title'}) cardTitle = '';
+
   /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
   @property({attribute: 'unchecked-value', reflect: true}) uncheckedValue: string;
 
@@ -88,6 +106,24 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** Draws a container around the checkbox. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /** URL for the image shown in a contained checkbox. */
+  @property() src = '';
+
+  /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+  @property({attribute: 'image-alt'}) imageAlt = '';
+
+  /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
+  @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
+
+  /**
+   * Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
+   * shows the selected state. Requires `contained`.
+   */
+  @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
+
   /** Removes a container around the checkbox. */
   @property({type: Boolean, reflect: true}) borderless = false;
 
@@ -244,6 +280,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   render() {
     const hasDescriptionSlot = this.hasSlotController.test('description');
     const hasDescription = this.description ? true : hasDescriptionSlot;
+    const hasImage = this.contained && (Boolean(this.src) || this.hasSlotController.test('image'));
+    const hasDefaultSlot = this.hasSlotController.test('[default]');
+    const isCard = this.contained && (hasImage || Boolean(this.cardTitle) || this.controlPosition !== 'start');
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltip = this.hasSlotController.test('label-tooltip');
     const hasLabel = this.label || hasLabelSlot;
@@ -309,7 +348,11 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--warning': effectiveColor === 'warning',
             'checkbox--transparent': effectiveColor === 'transparent',
             'checkbox--has-description': hasDescription,
-            'checkbox--has-selected-content': this.hasSlotController.test('selected-content')
+            'checkbox--has-selected-content': this.hasSlotController.test('selected-content'),
+            'selection-card': isCard,
+            'selection-card--has-image': hasImage,
+            [`selection-card--image-${this.imagePosition}`]: hasImage,
+            [`selection-card--control-${this.controlPosition}`]: isCard && this.controlPosition !== 'start'
           })}>
 
           <input
@@ -323,7 +366,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             .disabled=${this.disabled}
             .required=${this.required}
             aria-checked=${this.checked ? 'true' : 'false'}
-            aria-describedby=${hasDescription ? '' : 'description'}
+            aria-describedby=${hasDescription ? 'description' : ''}
             @click=${this.handleClick}
             @input=${this.handleInput}
             @invalid=${this.handleInvalid}
@@ -334,7 +377,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             part="control${this.checked ? ' control--checked' : ''}${this.indeterminate
               ? ' control--indeterminate'
               : ''}"
-            class="checkbox__control">
+            class="checkbox__control selection-card__control">
 
             ${this.checked && !this.indeterminate
               ? this.checkedIcon
@@ -367,8 +410,21 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               : ''}
           </span>
 
-          <div part="label" class="checkbox__label">
-            <slot></slot>
+          ${hasImage
+            ? html`
+              <span part="image-container" class="selection-card__image-container">
+                <slot name="image">
+                  ${this.src
+                    ? html`<img part="image" class="selection-card__image" src=${this.src} alt=${this.imageAlt}>`
+                    : ''}
+                </slot>
+              </span>`
+            : ''}
+
+          <div part="label" class="checkbox__label selection-card__content">
+            <span part="card-title" class="selection-card__title">
+              <slot></slot>${hasDefaultSlot ? '' : this.cardTitle}
+            </span>
             <div
               aria-hidden=${hasDescription ? 'false' : 'true'}
               class="checkbox__description"

package/src/components/checkbox/checkbox.scss

@@ -1,5 +1,6 @@
 @use "../../wc";
 @use "../../form-control";
+@use "../../selection-card";
 
 :host {
   display: block;

package/src/components/checkbox/checkbox.test.ts

@@ -7,4 +7,60 @@ describe('<zn-checkbox>', () => {
 
     expect(el).to.exist;
   });
+
+  it('renders card content and a built-in image', async () => {
+    const el = await fixture(html`
+      <zn-checkbox
+        contained
+        card-title="Payroll"
+        description="Salary and pay schedule tools."
+        src="payroll.svg"
+        image-alt="Payroll illustration">
+      </zn-checkbox>
+    `);
+
+    const image = el.shadowRoot!.querySelector('[part="image"]')!;
+    expect(image.getAttribute('src')).to.equal('payroll.svg');
+    expect(image.getAttribute('alt')).to.equal('Payroll illustration');
+    expect(el.shadowRoot!.querySelector('[part="label"]')!.textContent).to.include('Payroll');
+  });
+
+  it('renders card-title when formatting whitespace is present in the default slot', async () => {
+    const el = await fixture(html`
+      <zn-checkbox contained card-title="Benefits">
+        <zn-icon slot="image" src="featured_seasonal_and_gifts"></zn-icon>
+      </zn-checkbox>
+    `);
+
+    expect(el.shadowRoot!.querySelector('[part="card-title"]')!.textContent).to.include('Benefits');
+  });
+
+  it('positions card images and controls', async () => {
+    const el = await fixture(html`
+      <zn-checkbox contained image-position="right" control-position="top-left">
+        Benefits
+        <zn-icon slot="image" src="featured_seasonal_and_gifts"></zn-icon>
+      </zn-checkbox>
+    `);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(base).to.have.class('selection-card--image-right');
+    expect(base).to.have.class('selection-card--control-top-left');
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
+  it('leaves a plain contained checkbox without card styles', async () => {
+    const el = await fixture(html`<zn-checkbox contained description="Supporting text">Payroll</zn-checkbox>`);
+
+    expect(el.shadowRoot!.querySelector('[part="base"]')).not.to.have.class('selection-card');
+    expect(el.shadowRoot!.querySelector('[part="image-container"]')).to.be.null;
+  });
+
+  it('can hide the visual control without removing the native input', async () => {
+    const el = await fixture(html`<zn-checkbox contained control-position="none">Payroll</zn-checkbox>`);
+
+    expect(el.shadowRoot!.querySelector('input[type="checkbox"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="control"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.have.class('selection-card--control-none');
+  });
 });

package/src/components/checkbox-group/checkbox-group.component.ts

@@ -34,6 +34,8 @@ import styles from './checkbox-group.scss';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnCheckboxGroup extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -75,6 +77,15 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
   /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /**
+   * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
+   * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+   */
+  @property({type: Boolean, reflect: true}) wrap = false;
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -158,6 +169,10 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
         checkbox.size = this.size;
         checkbox.horizontal = this.horizontal;
 
+        if (this.square) {
+          checkbox.square = true;
+        }
+
         // Add class to checkboxes in a Checkbox Group so that we can style them without using :slotted
         checkbox.classList.add('groupedCheckbox');
 

package/src/components/checkbox-group/checkbox-group.scss

@@ -8,8 +8,9 @@
 
 :host([horizontal]) .form-control-input {
   display: flex;
-  column-gap: var(--zn-spacing-2x-large);
   flex-wrap: wrap;
+  column-gap: var(--zn-spacing-2x-large);
+  row-gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox[horizontal]) {
@@ -17,15 +18,16 @@
   min-width: 100px;
 }
 
-:host([contained]) .form-control-input {
+/* The label supplies the gap above the options, so a group without one starts flush. */
+:host([contained]) .form-control--has-label .form-control-input {
   margin-top: var(--zn-spacing-medium);
 }
 
 :host([horizontal][contained]) .form-control-input {
-  margin-top: var(--zn-spacing-medium);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
-  gap: var(--zn-spacing-x-small);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zn-checkbox-group-column-width, 152px)), 1fr));
+  align-items: stretch;
+  gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox) {
@@ -42,6 +44,22 @@
   height: 100%;
 }
 
+/* `wrap` swaps the equal-width grid for a flex row: cards start from their basis and wrap onto new lines. */
+:host([horizontal][contained][wrap]) .form-control-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--zn-spacing-x-small);
+}
+
+:host([wrap]) ::slotted(zn-checkbox[horizontal][contained]) {
+  flex: 1 1 var(--zn-checkbox-group-column-width, 152px);
+  min-width: 0;
+
+  /* A percentage height would resolve against every line, not the card's own. */
+  height: auto;
+}
+
 
 .form-control {
   position: relative;

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

@@ -7,4 +7,19 @@ describe('<zn-checkbox-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('propagates contained and square to its checkboxs', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-checkbox-group contained square>
+        <zn-checkbox value="one">One</zn-checkbox>
+        <zn-checkbox value="two">Two</zn-checkbox>
+      </zn-checkbox-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    el.querySelectorAll('zn-checkbox').forEach(child => {
+      expect(child).to.have.attribute('contained');
+      expect(child).to.have.attribute('square');
+    });
+  });
 });

package/src/components/confirm/confirm.component.ts

@@ -1,6 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query, state} from 'lit/decorators.js';
@@ -97,7 +97,7 @@ export default class ZnConfirm extends ZincElement {
       const trigger = this.hasSlotController.getSlot('trigger');
       trigger?.addEventListener('click', this.show);
     } else if (this.trigger) {
-      const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+      const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
       triggers.forEach((el: HTMLButtonElement) => {
         el.addEventListener('click', this.show);
       });
@@ -105,7 +105,7 @@ export default class ZnConfirm extends ZincElement {
   }
 
   updateTriggers() {
-    const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+    const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
     triggers.forEach((el: HTMLButtonElement) => {
       // if already has a click listener, remove it
       el.removeEventListener('click', this.show);

package/src/components/confirm/confirm.test.ts

@@ -7,4 +7,19 @@ describe('<zn-confirm-modal>', () => {
 
     expect(el).to.exist;
   });
+
+  it('connects a trigger whose id contains CSS syntax characters', async () => {
+    const id = 'delete-enum-cloud_hosting_&_infrastructure';
+    const el = await fixture<HTMLElement>(html`
+      <div>
+        <button id="${id}">Delete</button>
+        <zn-confirm trigger="${id}" caption="Delete"></zn-confirm>
+      </div>
+    `);
+    const confirm = el.querySelector<HTMLElement & {updateComplete: Promise<void>}>('zn-confirm')!;
+    await confirm.updateComplete;
+
+    // An unescaped `#id` selector throws a SyntaxError here, leaving the component unrendered.
+    expect(confirm.shadowRoot!.querySelector('zn-dialog')).to.exist;
+  });
 });

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

@@ -1,6 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 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 {unlockBodyScrolling} from "../../internal/scroll";
@@ -105,7 +106,7 @@ export default class ZnDialog 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());
       }
@@ -132,7 +133,7 @@ export default class ZnDialog 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/editor/editor.component.ts

@@ -1,5 +1,5 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
@@ -489,12 +489,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     // Find which element contains the content to insert
     // Priority: currentTarget > selectedTarget > target > composedPath > querySelector
+    const contentSelector = idSelector(contentContainer);
     const contentElement: Element | null =
-      (e.currentTarget instanceof Element && e.currentTarget.closest('#' + contentContainer)) ||
-      (e.selectedTarget instanceof Element && e.selectedTarget.closest('#' + contentContainer)) ||
-      (e.target instanceof Element && e.target.closest('#' + contentContainer)) ||
-      ((e.composedPath()[0] as Element)?.closest('#' + contentContainer)) ||
-      deepQuerySelectorAll(`#${contentContainer}`, document.documentElement, '')[0];
+      (e.currentTarget instanceof Element && e.currentTarget.closest(contentSelector)) ||
+      (e.selectedTarget instanceof Element && e.selectedTarget.closest(contentSelector)) ||
+      (e.target instanceof Element && e.target.closest(contentSelector)) ||
+      ((e.composedPath()[0] as Element)?.closest(contentSelector)) ||
+      deepQuerySelectorAll(contentSelector, document.documentElement, '')[0];
     if (!contentElement) return;
 
     let content = contentElement.textContent;

package/src/components/header/header.scss

@@ -17,6 +17,8 @@
   &__caption {
     font-weight: var(--zn-text-h1-font-weight);
     font-size: var(--zn-text-h1-font-size);
+    text-transform: var(--zn-text-h1-transform, none);
+    letter-spacing: var(--zn-text-h1-letter-spacing, normal);
     color: rgba(var(--zn-text-panel-title), 100%);
     line-height: var(--zn-icon-size, 20px);
     margin: 0;
@@ -110,6 +112,7 @@
     width: 100%;
     max-width: 100%;
     height: fit-content;
+    min-height: var(--zn-input-height-medium, 36px);
     gap: 10px;
     margin: 0 auto;
     padding: var(--zn-base-gap);
@@ -226,7 +229,6 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
-    height: var(--zn-icon-size, 20px);
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {

package/src/components/menu-item/menu-item.scss

@@ -276,33 +276,36 @@ zn-popup::part(popup) {
 }
 
 
+// Colour variants fill the row on hover, so the label switches to the matching
+// --zn-color-on-* ink rather than a hardcoded white (which disappears on a
+// light accent such as velocity's neon lime).
 .menu-item--primary {
   --color: rgba(var(--zn-primary), 0.9);
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-primary, 255, 255, 255));
   --hover-bg: rgba(var(--zn-primary), 0.9);
 }
 
 .menu-item--error {
   --color: rgb(var(--zn-color-error));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-error, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-error), 0.9);
 }
 
 .menu-item--info {
   --color: rgb(var(--zn-color-info));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-info, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-info), 0.9);
 }
 
 .menu-item--warning {
   --color: rgb(var(--zn-color-warning));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-warning, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-warning), 0.9);
 }
 
 .menu-item--success {
   --color: rgb(var(--zn-color-success));
-  --hover-color: #ffffff;
+  --hover-color: rgb(var(--zn-color-on-success, 255, 255, 255));
   --hover-bg: rgba(var(--zn-color-success), 0.9);
 }
 

package/src/components/navbar/navbar.scss

@@ -303,6 +303,17 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
   }
 }
 
+// Icon-bar items are standalone pills, not tabs — the tab-strip rule above
+// leaves them with a top+right border only, which reads as an unfinished box
+:host([icon-bar]:not([stacked])) {
+  ul.navbar {
+    > li {
+      border-width: 1px;
+      border-radius: 6px;
+    }
+  }
+}
+
 :host {
   display: block;
   width: 100%;

package/src/components/page/page.scss

@@ -8,6 +8,10 @@
   height: 100%;
   min-height: 0;
   container-type: inline-size;
+  // Optional decorative layer tiled across the page canvas (header + content).
+  // A theme sets it to an image and its tile size; unset it costs nothing.
+  --zn-page-texture: none;
+  --zn-page-texture-size: auto;
   --zn-page-content-background: var(--zn-body);
   --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background, var(--zn-body)));
 }
@@ -30,7 +34,11 @@
   top: 0;
   z-index: 2;
   box-sizing: border-box;
-  background: rgba(var(--zn-page-header-background), 95%);
+  background-color: rgba(var(--zn-page-header-background), 95%);
+  background-image: var(--zn-page-texture);
+  background-repeat: repeat;
+  background-position: center top;
+  background-size: var(--zn-page-texture-size);
 
   &::after {
     content: '';
@@ -173,6 +181,8 @@
   &__caption {
     font-weight: var(--zn-text-h1-font-weight);
     font-size: var(--zn-text-h1-font-size);
+    text-transform: var(--zn-text-h1-transform, none);
+    letter-spacing: var(--zn-text-h1-letter-spacing, normal);
     color: rgba(var(--zn-text-panel-title), 100%);
     line-height: var(--zn-spacing-medium);
     margin: 0;
@@ -303,7 +313,11 @@
   overflow: visible;
   box-sizing: border-box;
   padding: 0 var(--zn-base-gap) var(--zn-base-gap);
-  background: rgb(var(--zn-page-content-background, var(--zn-body)));
+  background-color: rgb(var(--zn-page-content-background, var(--zn-body)));
+  background-image: var(--zn-page-texture);
+  background-repeat: repeat;
+  background-position: center top;
+  background-size: var(--zn-page-texture-size);
 }
 
 .page__tabs .page__content {