@kubex/zinc 1.1.92 → 1.1.94

package/docs/pages/components/page-builder.md

@@ -27,6 +27,10 @@ are bound by their `name` attribute: values prefill from the section's data and
             description="Large banner with optional search">
     <zn-input name="title" label="Title"></zn-input>
     <zn-input name="subtitle" label="Subtitle"></zn-input>
+    <zn-input name="gradient" label="Background gradient" placeholder="linear-gradient(135deg, #00aaff, #aa00ff)"
+              help-text="CSS gradient painted behind the hero. Leave empty for the theme default."></zn-input>
+    <zn-toggle name="showSearch" label="Show search"
+               description="Draws the site search box in the banner."></zn-toggle>
   </template>
   <template type="article-list" slot="config" label="Article List" icon="list" category="Content"
             description="A list of KB articles">
@@ -40,6 +44,24 @@ Types can also be registered programmatically via `sectionTypes` /
 `registerSectionTypes()`, including a `renderConfig(section, update)` callback for
 inspector bodies that need real logic.
 
+## The inspector
+
+Selecting a section opens the inspector, which heads the panel with the section type's
+icon and colour, the section's name, its type (shown only where a renamed section makes
+it useful), and a close button that clears the selection. Below that, a **Section name**
+field renames the section (the card's label), followed by the type's stamped config form.
+A type whose template has no content gets a hint in place of the form rather than an
+empty panel.
+
+Because the panel is narrow, the inspector sets its own form-label and help-text
+typography rather than inheriting your app's full-width form styling, and its `gap` is
+the single source of spacing between fields — a control's own outer margins are zeroed
+so they can't stack with it. Stamped `<zn-toggle>`s are laid out as a row, with the
+label and description left and the switch right; set `label-position` yourself on a
+toggle to opt out.
+
+Style the panel through `inspector`, `inspector-header` and `inspector-body` parts.
+
 ## JavaScript API
 
 - `state` — get/set the current `PageState`. The getter returns a deep copy; the setter

package/docs/pages/components/schedule-builder.md

@@ -0,0 +1,345 @@
+---
+meta:
+  title: Schedule Builder
+  description: Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of time ranges, and posts the result as JSON.
+layout: component
+---
+
+```html:preview
+<zn-schedule-builder
+  name="opening-hours"
+  value='{
+    "timezone": "Europe/London",
+    "days": {
+      "mon": ["08:00-18:00"],
+      "tue": ["08:00-18:00"],
+      "wed": ["08:00-18:00"],
+      "thu": ["08:30-18:00"],
+      "fri": ["08:00-18:00"],
+      "sat": ["09:00-13:00"],
+      "sun": []
+    },
+    "exceptions": [
+      {"label": "All-hands offsite", "date": "2026-08-28", "ranges": ["08:00-13:00"]},
+      {"label": "Systems maintenance", "date": "2026-09-14", "ranges": ["10:00-18:00"]},
+      {"label": "Christmas Eve — early close", "date": "2026-12-24", "ranges": ["08:00-13:00"]}
+    ]
+  }'>
+</zn-schedule-builder>
+```
+
+:::tip
+This component works with standard `<form>` elements. Please refer to the section
+on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+:::
+
+## The Value
+
+The schedule is serialised to JSON and exposed three ways:
+
+- as the `value` attribute/property — a JSON string, which is what gets submitted with the form;
+- as the `schedule` property — the same data as a plain object;
+- as the `zn-change` event, emitted whenever the schedule changes.
+
+```json
+{
+  "timezone": "UTC",
+  "days": {
+    "mon": [{ "start": "08:00", "end": "18:00" }],
+    "tue": [{ "start": "08:00", "end": "12:00" }, { "start": "13:30", "end": "18:00" }],
+    "wed": [], "thu": [], "fri": [], "sat": [], "sun": []
+  },
+  "exceptions": [
+    { "label": "Christmas Eve — early close", "date": "2026-12-24", "ranges": [{ "start": "08:00", "end": "13:00" }] }
+  ]
+}
+```
+
+Ranges are always sorted, and overlapping or touching ranges are merged, so `08:00–12:00` plus
+`12:00–18:00` becomes a single `08:00–18:00`. Times are 24 hour `HH:MM` regardless of the
+`time-format` used for display, and `timezone` names the timezone they are expressed in — see
+[Timezones](#timezones).
+
+When you write the value yourself you can use the `"08:00-18:00"` shorthand instead of
+`{"start": "08:00", "end": "18:00"}`, and you can pass a bare day map without the `days` wrapper.
+Both are normalised on the way in.
+
+## Examples
+
+### Views
+
+The builder has two views. `calendar` is a drag-to-paint week grid; `form` is a compact list of time
+ranges that fits inside a normal settings form. Use the `view` attribute to choose the starting
+view, and `no-toggle` to remove the switcher and lock the component to one of them.
+
+```html:preview
+<zn-schedule-builder
+  view="form"
+  value='{"mon":["08:00-18:00"],"tue":["08:00-18:00"],"wed":["08:00-12:00","13:30-18:00"],"thu":["08:00-18:00"],"fri":["08:00-16:00"],"sat":["09:00-13:00"],"sun":[]}'>
+</zn-schedule-builder>
+```
+
+In the form view, click a range to edit it, and use **Add range** to split a day into multiple
+periods. In the calendar view, drag across the grid to open hours and drag over open hours to close
+them — a drag can span several days at once.
+
+### Timezones
+
+A schedule has two timezones: the one it is **stored** in, and the one it is **shown** in.
+
+- `save-timezone` is the timezone the value is written in. It defaults to `UTC` as soon as the
+  schedule is timezone-aware, so hours land in your database in one canonical zone.
+- `display-timezone` is the timezone the grid and the list are drawn in. It defaults to
+  `save-timezone`, and accepts `auto` for the viewer's own timezone.
+- `show-timezone` adds a picker so the viewer can read the same schedule in any timezone.
+
+Switching the display timezone never changes the value — the same hours are simply labelled in
+another zone, and `zn-change` doesn't fire. Edits work the other way around: you drag or type in the
+zone you are looking at, and the component converts back to `save-timezone` before storing.
+
+```html:preview
+<zn-schedule-builder
+  id="tz-demo"
+  show-timezone
+  display-timezone="Europe/London"
+  start-hour="0"
+  end-hour="24"
+  hide-summary
+  value='{"timezone":"UTC","days":{"mon":["08:00-18:00"],"tue":["08:00-18:00"],"wed":["08:00-18:00"],"thu":["08:00-18:00"],"fri":["08:00-16:00"]}}'>
+</zn-schedule-builder>
+
+<pre id="tz-demo-output" style="margin-top: 1rem"></pre>
+
+<script>
+  const tzBuilder = document.querySelector('#tz-demo');
+  const tzOutput = document.querySelector('#tz-demo-output');
+
+  const printTz = () => (tzOutput.textContent = `stored (UTC):\n${JSON.stringify(tzBuilder.schedule.days, null, 2)}`);
+
+  tzBuilder.addEventListener('zn-change', printTz);
+  printTz();
+</script>
+```
+
+Pick a timezone far from UTC and the blocks slide, wrapping onto the next day — or onto Monday, from
+the end of Sunday — while the stored hours below stay put.
+
+#### Which Timezones the Picker Offers
+
+`timezones` takes IANA names, or one of three named sets:
+
+| Set | Zones | What it is |
+| --- | --- | --- |
+| `en` | 6 | US Eastern, Central, Mountain and Pacific, the UK, and Australia — listed under those names rather than their IANA ones. For an English-speaking audience who would rather not read `America/Los_Angeles`. |
+| `offsets` | ~42 | One zone per UTC offset. The default — enough to read a schedule from anywhere without a long list, though the city standing in for each offset is arbitrary. |
+| `common` | ~90 | Every offset in use, plus the business and population centres that share one — so Berlin, Paris, Madrid and Rome all appear rather than one standing for the rest. Includes the half and quarter-hour zones (India, Iran, Nepal, Newfoundland, central Australia, Chatham). |
+| `all` | ~420 | Everything `Intl.supportedValuesOf('timeZone')` reports. Complete, but full of aliases and zones nobody selects. |
+
+`common` is the one to reach for whenever real users pick their own timezone; `offsets` suits an
+internal tool where the offset is all that matters; `en` suits a product whose customers are all in
+the US, the UK or Australia.
+
+```html:preview
+<zn-schedule-builder
+  show-timezone
+  timezones="en"
+  display-timezone="Europe/London"
+  view="form"
+  value='{"timezone":"UTC","days":{"mon":["13:00-21:00"],"tue":["13:00-21:00"]}}'>
+</zn-schedule-builder>
+```
+
+```html:preview
+<zn-schedule-builder
+  show-timezone
+  timezones="common"
+  display-timezone="auto"
+  view="form"
+  value='{"timezone":"UTC","days":{"mon":["13:00-21:00"],"tue":["13:00-21:00"]}}'>
+</zn-schedule-builder>
+```
+
+Sets and explicit names can be mixed — `timezones="en Asia/Tokyo"` adds Tokyo to the six above, and a
+set's friendly name wins over a later plain listing of the same zone. The viewer's own timezone plus
+both configured zones are always added, so the current selection is never missing from the list.
+
+```html:preview
+<zn-schedule-builder
+  show-timezone
+  display-timezone="America/New_York"
+  timezones="UTC Europe/London America/New_York Asia/Tokyo"
+  view="form"
+  value='{"timezone":"UTC","days":{"mon":["13:00-21:00"],"tue":["13:00-21:00"]}}'>
+</zn-schedule-builder>
+```
+
+Reading the hours in code follows the same split: `schedule`, `value` and `getDay()` are in the save
+timezone, while `displayedDays` and `setDisplayDay()` are in the display timezone.
+
+:::tip
+A weekly pattern has no date of its own, so there is no way to know whether daylight saving applies
+to it. Offsets are resolved against today by default; set `reference-date` to a `YYYY-MM-DD` date to
+pin them to a specific point in the year.
+:::
+
+### Open and Closed Labels
+
+`open-label` and `closed-label` name the two states. They appear in the calendar legend, against
+days with no hours, and in the exception annotations, so use whatever wording fits the thing being
+scheduled — availability, cover, staffing, opening hours.
+
+```html:preview
+<zn-schedule-builder
+  open-label="On call"
+  closed-label="Off"
+  start-hour="8"
+  end-hour="20"
+  hide-summary
+  value='{"mon":["09:00-17:00"],"tue":["09:00-17:00"],"wed":["09:00-17:00"],"thu":["09:00-17:00"],"fri":["09:00-13:00"]}'>
+</zn-schedule-builder>
+```
+
+### Labels and Help Text
+
+```html:preview
+<zn-schedule-builder
+  label="Opening hours"
+  help-text="Customers can only book appointments during these hours."
+  view="form"
+  value='{"mon":["09:00-17:00"],"tue":["09:00-17:00"],"wed":["09:00-17:00"],"thu":["09:00-17:00"],"fri":["09:00-17:00"]}'>
+</zn-schedule-builder>
+```
+
+### Grid Range and Granularity
+
+`start-hour` and `end-hour` set the window the calendar draws, and `interval` sets both the grid
+granularity and the step of the time inputs in the form view. The interval must be one of `5`, `10`,
+`15`, `20`, `30` or `60` minutes.
+
+```html:preview
+<zn-schedule-builder
+  start-hour="7"
+  end-hour="13"
+  interval="15"
+  hide-summary
+  value='{"mon":["08:00-12:00"],"tue":["08:15-11:45"],"wed":["08:00-12:00"],"thu":["08:00-12:00"],"fri":["08:00-11:00"]}'>
+</zn-schedule-builder>
+```
+
+### Exceptions
+
+Exceptions are dated deviations from the weekly pattern. The builder never edits them — it displays
+them, and carries them through the value untouched — so the surrounding application stays in charge
+of how they are created.
+
+Hours an exception removes are drawn in a lighter shade in the calendar, and annotated against the
+day in the form view. An exception can be a single `date`, or a `from`/`to` window, and can either
+close the day outright (`closed`) or replace its hours (`ranges`).
+
+Only exceptions that change the repeating weekly pattern are drawn against it: ones that name their
+`days`, and ones whose date window covers at least a full week. A one-off date is a single
+occurrence rather than a pattern, so it is carried through the value untouched but leaves the grid
+alone.
+
+```html:preview
+<zn-schedule-builder
+  view="form"
+  value='{
+    "days": {
+      "mon": ["08:00-18:00"],
+      "tue": ["08:00-18:00"],
+      "wed": ["08:00-18:00"],
+      "thu": ["08:00-18:00"],
+      "fri": ["08:00-16:00"],
+      "sat": ["09:00-13:00"],
+      "sun": []
+    },
+    "exceptions": [
+      {"label": "Summer Fridays", "from": "2026-06-01", "to": "2026-08-29", "days": ["fri"], "ranges": ["08:00-16:00"]},
+      {"label": "Bank holiday", "date": "2026-08-31", "closed": true}
+    ]
+  }'>
+</zn-schedule-builder>
+```
+
+### Week Start and Time Format
+
+```html:preview
+<zn-schedule-builder
+  week-start="sun"
+  time-format="12"
+  view="form"
+  value='{"mon":["08:00-18:00"],"sat":["09:00-13:00"],"sun":["10:00-16:00"]}'>
+</zn-schedule-builder>
+```
+
+### Readonly and Disabled
+
+Use `readonly` to display a schedule without any editing affordances, and `disabled` to grey it out
+and take it out of form submission.
+
+```html:preview
+<zn-schedule-builder
+  readonly
+  view="form"
+  value='{"mon":["08:00-18:00"],"tue":["08:00-18:00"],"wed":["08:00-18:00"],"thu":["08:00-18:00"],"fri":["08:00-18:00"],"sat":["09:00-13:00"]}'>
+</zn-schedule-builder>
+```
+
+### Reading the Value from JavaScript
+
+```html:preview
+<zn-schedule-builder
+  id="schedule-demo"
+  view="form"
+  value='{"mon":["09:00-17:00"],"tue":["09:00-17:00"]}'>
+</zn-schedule-builder>
+
+<pre id="schedule-demo-output" style="margin-top: 1rem"></pre>
+
+<script>
+  const builder = document.querySelector('#schedule-demo');
+  const output = document.querySelector('#schedule-demo-output');
+
+  const print = () => (output.textContent = JSON.stringify(builder.schedule, null, 2));
+
+  builder.addEventListener('zn-change', print);
+  print();
+</script>
+```
+
+### In a Form
+
+The schedule posts as a single JSON field named after the control.
+
+```html:preview
+<form class="schedule-form">
+  <zn-schedule-builder
+    name="opening-hours"
+    label="Opening hours"
+    required
+    view="form"
+    value='{"mon":["09:00-17:00"],"tue":["09:00-17:00"],"wed":["09:00-17:00"],"thu":["09:00-17:00"],"fri":["09:00-17:00"]}'>
+  </zn-schedule-builder>
+
+  <br />
+  <zn-button type="submit">Submit</zn-button>
+</form>
+
+<script>
+  const form = document.querySelector('.schedule-form');
+
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    const data = new FormData(form);
+    alert(data.get('opening-hours'));
+  });
+</script>
+```
+
+## Accessibility
+
+The form view is fully keyboard operable: ranges are buttons, editing a range gives you two native
+time inputs, and <kbd>Enter</kbd> or <kbd>Escape</kbd> closes the editor. The calendar view is a
+pointer-driven surface, so offer the form view (the default toggle does) wherever keyboard-only
+users need to edit a schedule.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.92",
+  "version": "1.1.94",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/alert/alert.scss

@@ -14,10 +14,6 @@
 
 :host([appearance="solid"]) {
   background-color: rgb(var(--zn-panel));
-
-  .wrapper:before {
-    backdrop-filter: none;
-  }
 }
 
 .alert-icon {
@@ -28,20 +24,20 @@ p {
   margin: 0;
 }
 
+// No backdrop-filter here, deliberately. This used to carry a
+// `::before { inset: 0; z-index: -1; backdrop-filter: blur(3px) }`, which forces
+// a compositor render surface per alert and re-blurs whenever anything behind it
+// repaints. Alerts are the one component that routinely appears dozens of times
+// on a page (one per warning, per row), so that scaled into hundreds of render
+// surfaces and could stop the compositor rasterising the page at all. The host
+// background is `rgba(--zn-panel, 0.8)` over a flat panel, so the blur was not
+// perceptible anyway — it only ever mattered over a high-frequency backdrop,
+// which is not where alerts sit.
 .wrapper {
   position: relative;
   border: 1px solid rgb(var(--zn-border-color)) !important;
   width: 100%;
   height: 100%;
-
-  &:before {
-    border-radius: 10px;
-    position: absolute;
-    content: '';
-    inset: 0;
-    z-index: -1;
-    backdrop-filter: blur(3px);
-  }
 }
 
 :host([center]) .content {

package/src/components/chip/chip.scss

@@ -10,7 +10,7 @@
   font-size: var(--zn-text-chip-font-size);
   font-family: var(--zn-font-family-sans);
   font-weight: var(--zn-text-chip-font-weight);
-  border-radius: var(--zn-border-radius-small);
+  border-radius: var(--zn-border-radius-x-large);
   padding-inline: var(--zn-spacing-x-small);
   padding-block: 0;
   height: var(--zn-spacing-medium);

package/src/components/icon-picker/icon-picker.component.ts

@@ -319,7 +319,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
 
     return html`
       <div part="form-control"
-           class="form-control ${hasLabel ? 'form-control--has-label' : ''} ${hasHelpText ? 'form-control--has-help-text' : ''}">
+           class="form-control form-control--medium ${hasLabel ? 'form-control--has-label' : ''} ${hasHelpText ? 'form-control--has-help-text' : ''}">
 
         <label part="form-control-label" class="form-control__label"
                aria-hidden=${hasLabel ? 'false' : 'true'}>

package/src/components/linked-select/linked-select.component.ts

@@ -12,8 +12,9 @@ interface linkedSelectOption {
   [key: string]: string;
 }
 
+// Each group is a flat value -> label map, keyed on the linked select's value.
 interface linkedSelectOptions {
-  [key: string]: linkedSelectOption[];
+  [key: string]: linkedSelectOption;
 }
 
 /**
@@ -46,6 +47,9 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   @property({attribute: 'cache-key'}) cacheKey: string = "";
   @property() label: string = "";
 
+  /** Automatically select the first option of the linked group when no value is set. */
+  @property({attribute: 'select-first', type: Boolean}) selectFirst = false;
+
   @query('zn-select') input: ZnSelect;
 
   private linkedSelectElement: HTMLSelectElement | ZnSelect;
@@ -123,7 +127,10 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   }
 
   public handleLinkedSelectChange = () => {
-    this.value = "";
+    // The inner select only auto-selects on slotchange, which lit skips when it
+    // can reuse the option elements of the outgoing group, so the first option of
+    // the new group is resolved here rather than left to the select.
+    this.value = this.selectFirst ? Object.keys(this.currentOptions())[0] ?? "" : "";
     this.requestUpdate();
     this.formControlController.updateValidity();
   };
@@ -137,19 +144,29 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
     this.value = (e.target as ZnSelect).value as string;
   }
 
-  render() {
+  /** The options of the group the linked select currently points at. */
+  private currentOptions(): linkedSelectOption {
+    if (!this.options) {
+      return {};
+    }
+
     let selected = this.linkedSelectElement?.value as string;
-    if (!selected && this.options) {
+    if (!selected) {
       selected = Object.keys(this.options)[0];
     }
 
-    const options: linkedSelectOption[] = selected ? this.options[selected] : [];
+    return (selected ? this.options[selected] : {}) ?? {};
+  }
+
+  render() {
+    const options = this.currentOptions();
     return html`
       <zn-select part="select"
                  class="linked-select"
                  name="${this.name}"
                  id="main-input"
                  cache-key="${this.cacheKey}"
+                 ?select-first="${this.selectFirst}"
                  value="${this.value}"
                  @zn-change=${this.handleSelectChange}
                  label="${this.label}">

package/src/components/page/page.scss

@@ -57,8 +57,20 @@
   background: linear-gradient(225deg, rgba(233, 227, 255, 1) 0%, rgba(214, 246, 245, 1) 40%, rgba(233, 227, 255, 1) 100%), linear-gradient(180deg, rgba(129, 153, 217, 0) 0%, rgba(0, 0, 0, 1) 100%);
 
 
+  // Held still deliberately. This gradient used to drift via
+  // `animation: page-header 25s ease infinite`, which animates
+  // `background-position` — a paint-only property, so it can never be
+  // composited. That repainted the header every frame for as long as the page
+  // was open, and because the header is `position: sticky` its paint chunk
+  // spans the whole page, so every backdrop-filter behind it (zn-alert, for
+  // one) was re-blurred each frame as well. On content-heavy pages that put
+  // enough work into each frame that tiles never finished rasterising: blank
+  // regions, content appearing only as you scrolled, and a dead inspector
+  // overlay. `0% 7%` is frame zero of the old keyframes, so the header looks as
+  // it did. If the drift is wanted back it has to move a compositable property
+  // (transform on a clipped, contained layer), not background-position.
   background-size: 150% 150%;
-  animation: page-header 25s ease infinite;
+  background-position: 0% 7%;
 
   .header:not(.header--has-navigation) {
     padding-bottom: var(--zn-base-gap);
@@ -91,12 +103,6 @@
   }
 }
 
-@keyframes page-header {
-  0%{background-position:0% 7%}
-  50%{background-position:100% 94%}
-  100%{background-position:0% 7%}
-}
-
 .header {
   display: flex;
   flex-direction: column;

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

@@ -77,6 +77,8 @@ function timeAgo(ms: number): string {
  * @csspart palette - The left palette panel.
  * @csspart canvas - The centre section-card canvas.
  * @csspart inspector - The right panel while a section is selected.
+ * @csspart inspector-header - The inspector's fixed header (icon, section name, type, close).
+ * @csspart inspector-body - The inspector's scrolling form area.
  */
 export default class ZnPageBuilder extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -1017,6 +1019,21 @@ export default class ZnPageBuilder extends ZincElement {
     const form = document.createElement('div');
     form.className = 'inspector__form';
     form.append(type.configTemplate.content.cloneNode(true));
+    // Custom elements cloned out of a <template> are inert until they are
+    // connected, so their accessors do not exist yet. Assigning `value` to one
+    // would define an own property that permanently shadows the setter the
+    // element defines on upgrade — Lit only replays properties it declares
+    // reactive, so a hand-written `value` accessor (zn-icon-picker) would keep
+    // its default and the control would render empty. Upgrade first.
+    //
+    // Toggles default to a stacked label, which reads badly in a narrow panel —
+    // put the switch on the label's right unless the host asked for a position.
+    // Set before the upgrade, while `label-position` can only be an authored
+    // attribute and never one zn-toggle reflected from its own default.
+    form.querySelectorAll<HTMLElement>('zn-toggle:not([label-position])').forEach(toggle => {
+      toggle.setAttribute('label-position', 'left');
+    });
+    customElements.upgrade(form);
     form.querySelectorAll<HTMLElement>('[name]').forEach(control => {
       const name = control.getAttribute('name')!;
       const value = section.data[name];
@@ -1029,7 +1046,9 @@ export default class ZnPageBuilder extends ZincElement {
         (control as HTMLInputElement).value = String(value);
       }
     });
-    this._form = form;
+    // A content-free template stamps no controls — leave the form null so the
+    // inspector shows its "no settings" hint rather than a blank gap.
+    this._form = form.childElementCount ? form : null;
   }
 
   private _isBooleanControl(control: HTMLElement, value: unknown): boolean {
@@ -1069,22 +1088,48 @@ export default class ZnPageBuilder extends ZincElement {
     const section = this._selectedSection();
     if (!section) return html``;
     const type = this.registry.get(section.type);
+    const hasConfig = Boolean(type?.renderConfig) || this._form !== null;
+    const title = section.label ?? type?.label ?? section.type;
+    const typeLabel = type?.label ?? section.type;
     return html`
       <aside part="inspector" class="inspector">
-        <zn-input
-          class="inspector__rename"
-          label="Section name"
-          .value="${section.label ?? type?.label ?? ''}"
-          @zn-change="${(e: Event) => this._renameSection(section.id, String((e.target as ZnInput).value ?? ''))}"></zn-input>
+        <div part="inspector-header" class="inspector-head">
+          <span
+            class="inspector-head__icon"
+            style="--section-accent:${type?.color ?? 'rgb(var(--zn-color-primary))'}">
+            <zn-icon src="${type?.icon ?? 'widgets'}" library="${ifDefined(type?.iconLibrary)}" size="18"></zn-icon>
+          </span>
+          <div class="inspector-head__text">
+            <div class="inspector-head__title">${title}</div>
+            ${title === typeLabel ? '' : html`
+              <div class="inspector-head__type">${typeLabel}</div>`}
+          </div>
+          <button
+            type="button"
+            class="inspector-close"
+            title="Close section settings"
+            aria-label="Close section settings"
+            @click="${() => this._select(null)}">
+            <zn-icon src="x@lu" size="18"></zn-icon>
+          </button>
+        </div>
         <div
-          class="inspector__body"
+          part="inspector-body"
+          class="inspector-body"
           @change="${this._onInspectorInput}"
           @zn-change="${this._onInspectorInput}"
           @input="${this._onInspectorInput}"
           @zn-input="${this._onInspectorInput}">
+          <zn-input
+            class="inspector__rename"
+            label="Section name"
+            .value="${section.label ?? type?.label ?? ''}"
+            @zn-change="${(e: Event) => this._renameSection(section.id, String((e.target as ZnInput).value ?? ''))}"></zn-input>
           ${type?.renderConfig
             ? type.renderConfig(section, data => this._updateSectionData(section.id, data))
             : this._form}
+          ${hasConfig ? '' : html`
+            <p class="inspector-hint">This section type has no settings.</p>`}
         </div>
       </aside>`;
   }