@kubex/zinc 1.1.184 → 2.0.0

package/src/components/page/page.test.ts

@@ -40,6 +40,27 @@ describe('<zn-page>', () => {
     expect(navItems[3].getAttribute('tab-uri')).to.equal('/tab-three');
   });
 
+  it('shows the footer only when the footer slot has content', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title">
+        <zn-tab caption="Overview">Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    const footer = el.shadowRoot!.querySelector<HTMLElement>('[part="footer"]')!;
+    expect(footer.hidden).to.equal(true);
+
+    const actions = document.createElement('zn-form-actions');
+    actions.slot = 'footer';
+    el.appendChild(actions);
+    await aTimeout(20);
+
+    const footerSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="footer"]')!;
+    expect(footer.hidden).to.equal(false);
+    expect(footerSlot.assignedElements()[0]).to.equal(actions);
+  });
+
   it('pushes nested expanding actions into the generated navbar', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title">
@@ -152,6 +173,27 @@ describe('<zn-page>', () => {
       expect(freshPage.getAttribute('active')).to.equal('');
     });
 
+    it('loads the first uri tab when the stored tab belongs to a previous entity', async () => {
+      const renderUriPage = (entity: string) => fixture<ZnPage>(html`
+        <zn-page>
+          <zn-tab caption="Accounts" uri="/${entity}/accounts"></zn-tab>
+          <zn-tab caption="Invoices" uri="/${entity}/invoices"></zn-tab>
+        </zn-page>
+      `);
+
+      const first = await renderUriPage('a');
+      await aTimeout(40);
+      first.shadowRoot!.querySelector('zn-navbar')!.querySelector<HTMLElement>('li[tab-uri="/a/accounts"]')!.click();
+      await aTimeout(40);
+      first.remove();
+
+      window.dispatchEvent(new PopStateEvent('popstate'));
+      const second = await renderUriPage('b');
+      await aTimeout(60);
+      const panel = second.shadowRoot!.querySelector('#content > div[selected]');
+      expect(panel?.getAttribute('data-self-uri')).to.equal('/b/accounts');
+    });
+
     it('restores a tab cycled without the navigation', async () => {
       const page = await renderPage();
       await aTimeout(40);
@@ -378,6 +420,135 @@ describe('<zn-page>', () => {
     expect(activeItem?.getAttribute('tab')).to.equal('details');
   });
 
+  it('opens a tab from a tab attribute inside a uri tab, which loads into the page\'s shadow root', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Uri Tab Link">
+        <zn-tab caption="Details" id="details">Details Content</zn-tab>
+        <zn-tab caption="Publish" uri="/publish-tab"></zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(40);
+
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    navbar.shadowRoot!.querySelector<HTMLElement>('li[tab-uri="/publish-tab"]')!.click();
+    await aTimeout(100);
+
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('#content > div[data-self-uri="/publish-tab"]')!;
+    const link = document.createElement('span');
+    link.setAttribute('tab', 'details');
+    link.textContent = 'Edit in Details';
+    panel.replaceChildren(link);
+    expect(el.getAttribute('active')).to.not.equal('details');
+
+    link.click();
+    await aTimeout(40);
+    expect(el.getAttribute('active')).to.equal('details');
+  });
+
+  it('shows tabs inside a tab as a pill tab set without a header', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Outer Page">
+        <zn-tab caption="Overview">
+          <zn-tab caption="Invoices">Invoices Content</zn-tab>
+          <zn-tab caption="Payments" selected>Payments Content</zn-tab>
+        </zn-tab>
+        <zn-tab caption="Other">Other Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(50);
+
+    const group = el.querySelector<ZnPage>('zn-tab > zn-page')!;
+    expect(group.getAttribute('navigation-style')).to.equal('pills');
+    expect(group.querySelectorAll(':scope > zn-tab').length).to.equal(2);
+    expect(el.shadowRoot!.querySelector('zn-navbar')!.hasAttribute('pill')).to.be.false;
+
+    const navbar = group.shadowRoot!.querySelector('zn-navbar')!;
+    expect(navbar.hasAttribute('pill')).to.be.true;
+    expect(Array.from(navbar.querySelectorAll('li')).map(li => li.textContent?.trim())).to.deep.equal(['Invoices', 'Payments']);
+    expect(getComputedStyle(group.shadowRoot!.querySelector('.header')!).display).to.equal('none');
+    expect(group.getAttribute('active')).to.equal('payments');
+
+    // An app sidebar restyles the group, which must still sit inside the parent's padding without adding its own
+    group.setAttribute('navigation-style', 'sidebar');
+    await aTimeout(20);
+    expect(getComputedStyle(group.shadowRoot!.querySelector('#content')!).paddingLeft).to.equal('0px');
+  });
+
+  it('keeps a nested page\'s tab bar and header', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Outer Page">
+        <zn-tab caption="Overview">
+          <zn-page caption="Inner Page" nested>
+            <zn-tab caption="Overview">Inner Overview</zn-tab>
+            <zn-tab caption="Details">Inner Details</zn-tab>
+          </zn-page>
+        </zn-tab>
+        <zn-tab caption="Other">Other Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    const inner = el.querySelector<ZnPage>('zn-page')!;
+    expect(inner.shadowRoot!.querySelector('zn-navbar')!.hasAttribute('pill')).to.be.false;
+    expect(getComputedStyle(inner.shadowRoot!.querySelector('.header')!).display).to.not.equal('none');
+  });
+
+  it('gives a nested page\'s header the card title style and a single inset', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Outer Page">
+        <zn-tab caption="Overview">
+          <zn-page caption="Inner Page" summary="Inner summary" nested>
+            <zn-tab caption="Overview">Inner Overview</zn-tab>
+            <zn-tab caption="Details">Inner Details</zn-tab>
+          </zn-page>
+        </zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    const inner = el.querySelector<ZnPage>('zn-page')!;
+    inner.style.setProperty('--zn-text-h1-font-size', '14px');
+    inner.style.setProperty('--zn-base-gap', '16px');
+    const root = inner.shadowRoot!;
+    const header = getComputedStyle(root.querySelector('.header')!);
+    expect(header.paddingLeft).to.equal('16px');
+    expect(header.paddingRight).to.equal('16px');
+    expect(getComputedStyle(root.querySelector('.header .content')!).maxWidth).to.equal('100%');
+    expect(getComputedStyle(root.querySelector('.header__caption')!).fontSize).to.equal('14px');
+    expect(getComputedStyle(root.querySelector('.header__left')!).rowGap).to.equal('0px');
+  });
+
+  it('hides an empty header', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page>
+        <zn-tab caption="Overview">Overview Content</zn-tab>
+        <zn-tab caption="Details">Details Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    expect(getComputedStyle(el.shadowRoot!.querySelector('.header')!).display).to.equal('none');
+  });
+
+  it('hides its navbar in the sidebar style unless it has bottom content', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title" navigation-style="sidebar">
+        <zn-tab caption="Overview">Overview Content</zn-tab>
+        <zn-tab caption="Details">Details Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    expect(getComputedStyle(navbar).display).to.equal('none');
+
+    const chip = document.createElement('zn-chip');
+    chip.slot = 'bottom';
+    el.append(chip);
+    await aTimeout(20);
+    expect(getComputedStyle(navbar).display).to.not.equal('none');
+  });
+
   it('leaves content tab links inside a nested page to that page', async () => {
     const outerPage = await fixture<ZnPage>(html`
       <zn-page caption="Nested Content Tab Link">
@@ -492,9 +663,9 @@ describe('<zn-page>', () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title">
         <zn-tab caption="Later">Later Content</zn-tab>
-        <zn-tab caption="Second" priority="20">Second Content</zn-tab>
+        <zn-tab caption="Second" priority="10">Second Content</zn-tab>
         <zn-tab caption="Overview">Overview Content</zn-tab>
-        <zn-tab caption="First" priority="10">First Content</zn-tab>
+        <zn-tab caption="First" priority="20">First Content</zn-tab>
         <zn-tab caption="Dynamic" priority="15" uri="/dynamic"></zn-tab>
       </zn-page>
     `);
@@ -514,6 +685,22 @@ describe('<zn-page>', () => {
     expect(el.querySelector<HTMLElement>('zn-tab[caption="Dynamic"]')!.getAttribute('id')).to.equal('dynamic');
   });
 
+  it('shows a tab icon before its caption', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title">
+        <zn-tab caption="Overview">Overview Content</zn-tab>
+        <zn-tab caption="History" icon="history" uri="/history"></zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(20);
+
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    const historyItem = navbar.shadowRoot!.querySelector('li[tab-uri="/history"]')!;
+    expect(historyItem.querySelector('zn-icon')!.getAttribute('src')).to.equal('history');
+    expect(historyItem.textContent?.trim()).to.equal('History');
+    expect(navbar.shadowRoot!.querySelector('li[tab=""] zn-icon')).to.be.null;
+  });
+
   it('preserves source order for tabs without priority', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title">
@@ -703,7 +890,8 @@ describe('<zn-page>', () => {
     await aTimeout(120);
 
     expect(getComputedStyle(activeNavItem).backgroundColor).to.equal('rgb(1, 2, 3)');
-    expect(getComputedStyle(activeNavItem).transitionDuration).to.equal('0.1s');
+    expect(getComputedStyle(activeNavItem).transitionProperty).to.equal('background-color, color');
+    expect(getComputedStyle(activeNavItem).transitionDuration).to.equal('0.1s, 0.15s');
   });
 
   it('opens the tab flagged with the selected attribute instead of the first', async () => {
@@ -737,4 +925,27 @@ describe('<zn-page>', () => {
     expect(header.classList.contains('header--has-breadcrumb')).to.equal(false);
     expect(el.shadowRoot!.querySelector('slot[name="breadcrumb"]')).to.equal(null);
   });
+
+  it('keeps breadcrumbs inline in the title by default', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Performance"><a href="#" slot="breadcrumb">Quality Assurance</a></zn-page>`);
+    const crumbs = el.shadowRoot!.querySelector('.header__crumbs')!;
+
+    expect(getComputedStyle(crumbs).display).to.equal('contents');
+    expect(getComputedStyle(el.shadowRoot!.querySelector('.breadcrumb__current')!).display).to.equal('none');
+  });
+
+  it('lifts breadcrumbs onto their own row when the theme asks', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Performance"
+               style="--zn-page-breadcrumb-display: flex; --zn-page-breadcrumb-current-display: inline; --zn-page-breadcrumb-separator-icon: 'chevron-right@lu'">
+        <a href="#" slot="breadcrumb">Quality Assurance</a>
+      </zn-page>`);
+    await el.updateComplete;
+    const root = el.shadowRoot!;
+
+    expect(getComputedStyle(root.querySelector('.header__crumbs')!).display).to.equal('flex');
+    expect(root.querySelector('.breadcrumb__current')!.textContent).to.equal('Performance');
+    expect(root.querySelector('.breadcrumb__separator')!.getAttribute('src')).to.contain('chevron-right');
+  });
 });

package/src/components/page-builder/page-builder.component.ts

@@ -721,6 +721,12 @@ export default class ZnPageBuilder extends ZincElement {
     const [removed, sections] = this._extract(id);
     if (!removed) return;
     this._pushHistory();
+    const cardIds = [...(this.shadowRoot?.querySelectorAll<HTMLElement>('zn-page-section-card') ?? [])]
+      .map(card => card.dataset.id!)
+      .filter(cardId => !removed.children?.some(c => c?.id === cardId));
+    const at = cardIds.indexOf(id);
+    const neighbour = cardIds[at + 1] ?? cardIds[at - 1];
+    const hadFocus = !!this.shadowRoot?.activeElement?.closest('zn-page-section-card');
     // Cards are rendered unkeyed, so the focused action button survives the
     // re-render as part of whichever section shifts into this slot.
     this._blurActiveCard();
@@ -730,6 +736,7 @@ export default class ZnPageBuilder extends ZincElement {
     }
     // Removing the leading section hands the lead to the next one that may hold it.
     this._commit({ sections: this._requireFirst(sections) });
+    if (hadFocus && neighbour) void this._focusCard(neighbour);
   }
 
   private _duplicateSection(id: string) {
@@ -1023,7 +1030,16 @@ export default class ZnPageBuilder extends ZincElement {
   };
 
   private _onCardKeydown(e: KeyboardEvent, id: string) {
-    if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      e.preventDefault();
+      const index = this._state.sections.findIndex(s => s.id === id);
+      if (index === -1) return;
+      // _moveSection inserts before the given index, so moving down one skips past the next card
+      const target = e.key === 'ArrowUp' ? index - 1 : index + 2;
+      if (target > this._state.sections.length) return;
+      this._moveSection(id, target);
+      void this._focusCard(id);
+    } else if (e.key === 'Delete' || e.key === 'Backspace') {
       e.preventDefault();
       this._removeSection(id);
     } else if (e.key === 'Enter' || e.key === ' ') {
@@ -1226,9 +1242,20 @@ export default class ZnPageBuilder extends ZincElement {
           }
         }}"
         @drop="${(e: DragEvent) => this._onSlotDrop(e, container.id, index)}"
+        role="button"
+        tabindex="0"
+        aria-label="Add section"
+        aria-expanded="${pickerOpen}"
         @click="${(e: Event) => {
           e.stopPropagation();
           this._slotPicker = pickerOpen ? null : { containerId: container.id, index };
+          if (!pickerOpen) void this._focusFirstPickerItem(e.currentTarget as HTMLElement);
+        }}"
+        @keydown="${(e: KeyboardEvent) => {
+          // The open picker renders inside this slot; its keys are its own
+          if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return;
+          e.preventDefault();
+          (e.currentTarget as HTMLElement).click();
         }}">
         <zn-icon src="add" size="16"></zn-icon>
         ${pickerOpen
@@ -1244,10 +1271,26 @@ export default class ZnPageBuilder extends ZincElement {
       !t.slots && (!containerType?.accepts || containerType.accepts.includes(t.type)));
   }
 
+  private async _focusFirstPickerItem(zone: HTMLElement) {
+    await this.updateComplete;
+    zone.querySelector<HTMLElement>('.picker__item')?.focus();
+  }
+
   /** The one type-picker template both drop zones and slot cells render. */
-  private _renderTypePicker(types: PageSectionType[], pick: (type: string) => void) {
+  private _renderTypePicker(types: PageSectionType[], pick: (type: string) => PageSection | null) {
     return html`
-      <div class="picker" @click="${(e: Event) => e.stopPropagation()}">
+      <div
+        class="picker"
+        @click="${(e: Event) => e.stopPropagation()}"
+        @keydown="${(e: KeyboardEvent) => {
+          if (e.key !== 'Escape') return;
+          e.preventDefault();
+          e.stopPropagation();
+          const zone = (e.currentTarget as HTMLElement).parentElement!;
+          (zone.querySelector<HTMLElement>(':scope > .drop__add') ?? zone).focus();
+          this._pickerIndex = null;
+          this._slotPicker = null;
+        }}">
         ${types.map(type => html`
           <button
             type="button"
@@ -1255,7 +1298,8 @@ export default class ZnPageBuilder extends ZincElement {
             @click="${() => {
               this._pickerIndex = null;
               this._slotPicker = null;
-              pick(type.type);
+              const section = pick(type.type);
+              if (section) void this._focusCard(section.id);
             }}">
             <zn-icon src="${type.icon ?? 'widgets'}" library="${ifDefined(type.iconLibrary)}" size="14"></zn-icon>
             ${type.label}
@@ -1278,7 +1322,9 @@ export default class ZnPageBuilder extends ZincElement {
           title="Add section"
           @click="${(e: Event) => {
             e.stopPropagation();
-            this._pickerIndex = this._pickerIndex === index ? null : index;
+            const opening = this._pickerIndex !== index;
+            this._pickerIndex = opening ? index : null;
+            if (opening) void this._focusFirstPickerItem((e.currentTarget as HTMLElement).parentElement!);
           }}">
           <zn-icon src="add" size="14"></zn-icon>
         </button>

package/src/components/page-builder/page-builder.scss

@@ -533,7 +533,8 @@ zn-page-palette-item {
   }
 
   &:hover &__add,
-  &--active &__add {
+  &--active &__add,
+  &__add:focus-visible {
     opacity: 1;
   }
 }
@@ -582,6 +583,10 @@ zn-page-section-card.dragging,
       border-color: rgb(var(--zn-color-border-active));
       color: rgba(var(--zn-text), 0.7);
     }
+
+    &:focus-visible {
+      outline: var(--zn-focus-ring);
+    }
   }
 
   &--active {

package/src/components/page-nav/page-nav.component.ts

@@ -45,9 +45,16 @@ export default class ZnPageNav extends ZnTabs {
 
   toggleNavigation() {
     const navigationElement = this.shadowRoot?.querySelector('.navigation');
+    const toggle = this.shadowRoot?.querySelector<HTMLElement>('.breadcrumb-menu-toggle');
     if (navigationElement) {
       // Toggle the 'active' class to show/hide the navigation
-      navigationElement.classList.toggle('active');
+      const open = navigationElement.classList.toggle('active');
+      toggle?.setAttribute('aria-expanded', String(open));
+
+      // The closed menu is hidden, so focus inside it would be lost. The toggle is only shown on narrow layouts.
+      if (!open && navigationElement.contains(this.shadowRoot!.activeElement) && toggle?.checkVisibility()) {
+        toggle.focus();
+      }
     }
     // toggle menu overlay
     const menuOverlay = this.shadowRoot?.querySelector('.menu-overlay');
@@ -56,6 +63,20 @@ export default class ZnPageNav extends ZnTabs {
     }
   }
 
+  private handleToggleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggleNavigation();
+    }
+  };
+
+  private handleNavigationKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && (e.currentTarget as HTMLElement).classList.contains('active')) {
+      e.stopPropagation();
+      this.toggleNavigation();
+    }
+  };
+
   setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab: string | null = null) {
     super.setActiveTab(tabName, store, refresh, refTab);
 
@@ -96,13 +117,14 @@ export default class ZnPageNav extends ZnTabs {
 
     return html`
       <div class="breadcrumb">
-        <div @click="${this.toggleNavigation}" class="breadcrumb-menu-toggle">
+        <div @click="${this.toggleNavigation}" @keydown="${this.handleToggleKeyDown}" class="breadcrumb-menu-toggle"
+             role="button" tabindex="0" aria-expanded="false">
           <zn-icon src="menu" size="24"></zn-icon>
           <span>${this.breadcrumb}</span>
         </div>
       </div>
       <div class="tabs">
-        <div class="navigation">
+        <div class="navigation" @keydown="${this.handleNavigationKeyDown}">
           ${navItems}
         </div>
         <div class="menu-overlay" @click="${this.toggleNavigation}"></div>

package/src/components/page-nav/page-nav.scss

@@ -84,7 +84,7 @@
 }
 
 .navigation-item.active {
-  color: rgb(var(--zn-primary));
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
 }
 
 .navigation-group + .navigation-group {
@@ -104,6 +104,10 @@
   }
 
   .breadcrumb-menu-toggle {
+    &:focus-visible {
+      outline: var(--zn-focus-ring);
+    }
+
     cursor: pointer;
     margin-left: var(--zn-base-gap);
 
@@ -148,7 +152,10 @@
     height: 100%;
     bottom: 0;
     z-index: var(--zn-z-index-page-nav);
-    transition: left var(--page-nav-animation-duration) ease-in-out, opacity var(--page-nav-animation-duration) ease-in-out;
+    // Visibility keeps the closed menu out of the tab order; it flips only after the slide-out finishes
+    visibility: hidden;
+    transition: left var(--page-nav-animation-duration) ease-in-out, opacity var(--page-nav-animation-duration) ease-in-out,
+    visibility var(--page-nav-animation-duration);
   }
 
   .tabs {
@@ -158,6 +165,7 @@
   }
 
   .navigation.active {
+    visibility: visible;
     pointer-events: all;
     left: 0;
     opacity: 1;

package/src/components/pagination/pagination.scss

@@ -69,7 +69,7 @@
   }
 
   &__button--active {
-    color: rgb(var(--zn-primary)) !important;
+    color: var(--zn-color-primary-fg, rgb(var(--zn-primary))) !important;
     font-weight: 600 !important;
     pointer-events: none;
   }

package/src/components/panel/panel.component.ts

@@ -1,7 +1,9 @@
+import {ifDefined} from "lit/directives/if-defined.js";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
 import {property, state} from 'lit/decorators.js';
+import {registerCosmicBorder} from "../../internal/cosmic-border";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './panel.scss';
@@ -19,11 +21,14 @@ import styles from './panel.scss';
  * @csspart base - The component's base wrapper.
  * @csspart header - The header region, when a caption or actions are given.
  * @csspart header-content - The padded row inside the header, forwarded from zn-header.
+ * @csspart header-left - The caption and description, forwarded from zn-header.
  * @csspart footer - The footer region, when the footer slot is filled.
  *
  * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
  * @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
  * @cssproperty --zn-panel-footer-padding - Padding around the footer row.
+ * @cssproperty --zn-panel-padding - Padding around the body. Defaults to `--zn-base-gap`.
+ * @cssproperty --zn-panel-shadow - Resting shadow. Defaults to none.
  */
 export default class ZnPanel extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -32,6 +37,11 @@ export default class ZnPanel extends ZincElement {
 
   @property({attribute: 'basis-px', type: Number}) basis: number;
   @property() caption: string;
+  /** Help text under the caption, in the panel's header. */
+  @property() description: string;
+
+  /** Sets the description beside the caption rather than under it. */
+  @property({attribute: 'inline-description', type: Boolean}) inlineDescription = false;
   @property() icon: string;
   @property({type: Boolean}) tabbed: boolean;
   @property({attribute: 'header-borderless', type: Boolean}) headerBorderless: boolean;
@@ -72,18 +82,7 @@ export default class ZnPanel extends ZincElement {
       this.observeBodyContent();
     }
 
-    if (window.CSS.registerProperty) {
-      try {
-        window.CSS.registerProperty({
-          inherits: false,
-          initialValue: '0deg',
-          name: '--rotate',
-          syntax: '<angle>',
-        });
-      } catch (e) {
-        // do nothing
-      }
-    }
+    registerCosmicBorder();
   }
 
   disconnectedCallback() {
@@ -142,13 +141,15 @@ export default class ZnPanel extends ZincElement {
         <div class="panel__inner">
           ${hasHeader ? html`
             <zn-header part="header"
-                       exportparts="content:header-content"
+                       exportparts="content:header-content, header-left"
                        class="${classMap({
                          "panel__header": true,
                          "panel__header--underline": underlineHeader,
                        })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
+                       description="${ifDefined(this.description)}"
+                       ?inline-description="${this.inlineDescription}"
                        transparent>
               ${hasActionSlot ? html`
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}

package/src/components/panel/panel.scss

@@ -19,7 +19,8 @@
   position: relative;
   border: 1px solid rgb(var(--zn-border-color));
   display: flex;
-  border-radius: var(--zn-border-radius);
+  border-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
+  box-shadow: var(--zn-panel-shadow, none);
   flex-direction: column;
   flex-grow: 1;
   flex-basis: var(--zn-spacing-small-panel);
@@ -29,7 +30,7 @@
   &__inner {
     overflow: hidden;
     display: flex;
-    border-radius: var(--zn-border-radius);
+    border-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
     flex-direction: column;
     flex-grow: 1;
   }
@@ -58,7 +59,7 @@
     }
 
     &--underline {
-      border-bottom: 1px solid rgb(var(--zn-border-color));
+      border-bottom: 1px solid var(--zn-panel-header-divider-color, rgb(var(--zn-border-color)));
     }
 
     &::part(content) {
@@ -71,7 +72,7 @@
     flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
-    padding: var(--zn-base-gap);
+    padding: var(--zn-panel-padding, var(--zn-base-gap));
 
     > :not([hidden]) ~ :not([hidden]) {
       border: 1px solid rgb(var(--zn-border-color));
@@ -82,9 +83,10 @@
     font-size: var(--zn-font-size-small);
     display: block;
     padding: var(--zn-panel-footer-padding, var(--zn-spacing-small) var(--zn-base-gap));
-    background: rgb(var(--zn-body));
-    border-bottom-left-radius: var(--zn-border-radius);
-    border-bottom-right-radius: var(--zn-border-radius);
+    background: var(--zn-panel-footer-background, rgb(var(--zn-body)));
+    border-top: var(--zn-panel-footer-divider, none);
+    border-bottom-left-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
+    border-bottom-right-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
   }
 
   &--tabbed .panel__body {
@@ -94,6 +96,7 @@
   &--transparent {
     background-color: transparent;
     border: none;
+    box-shadow: none;
 
     &:before {
       display: none;
@@ -145,14 +148,15 @@
   // The body scrolls, so it can't take a clip margin — it gets a gutter cancelled by a negative margin instead.
   &--transparent {
     .panel__header {
+      position: relative;
+      z-index: 1;
       padding-left: 0;
       padding-right: 0;
     }
 
     .panel__inner,
     .panel__content {
-      overflow: clip;
-      overflow-clip-margin: var(--zn-focus-ring-outset);
+      @include wc.clip-focus-room;
     }
 
     &.panel--flush .panel__body {
@@ -176,7 +180,7 @@
   }
 
   &--shadow {
-    box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--zn-panel-shadow-raised, 0 6px 20px 10px rgba(0, 0, 0, 0.25));
   }
 
 }