@kubex/zinc 1.1.92 → 1.1.95

package/docs/pages/components/slash-menu.md

@@ -16,15 +16,16 @@ for you, as [`zn-textarea`](/components/textarea#slash-menu-quick-insertions) do
              slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}"></zn-textarea>
 ```
 
-Slot one into a textarea when you want the panel's own settings — `heading`, `max-items`, `placement`, `empty-text`, or
-its width — declared in markup. The textarea then drives your menu instead of building its own:
+Slot one into a textarea when you want the panel's own settings — `max-items`, `placement`, `empty-text`, its width, or
+the `heading` the list is announced by — declared in markup. The textarea then drives your menu instead of building its
+own:
 
 ```html:preview
 <zn-textarea label="Terms and conditions" rows="6" help-text="Type / to insert">
   <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
-    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
-    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
-    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
   </zn-slash-menu>
 </zn-textarea>
 ```
@@ -107,9 +108,134 @@ The menu doesn't listen for keys itself — whatever owns the field decides whic
 </script>
 ```
 
+### Grouping Items
+
+An item's `group` puts a heading above it. The heading is drawn whenever the group changes going down the list, so
+items sharing a group must be declared together — the menu lists them in the order it is given rather than gathering
+them for you. Leave the group off and an item is listed under no heading at all; declared first, those lead the list,
+which is how a handful of favourites can sit above named sections.
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="7" help-text="Type / to see the sections, or 'company' to search across them">
+  <zn-slash-menu slot="slash-menu" style="--slash-menu-width: 340px">
+    <zn-slash-item icon="star@lu" label="Merchant block" value="{{MERCHANT_BLOCK}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" keywords="company" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" keywords="company" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="calendar@lu" label="Refund window" value="{{REFUND_DAYS}} days"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+```
+
+Group headings are only a structure for browsing: a query ranks every match on merit, and the headings follow whatever
+order that leaves. Set `order` on an item to pin its place within a match band, and use `keywords` to make it findable
+by terms that aren't in its label.
+
+Driving the menu yourself, the same thing is a `group` on each item:
+
+```html:preview
+<zn-button id="grouped-anchor">Open the menu</zn-button>
+<zn-slash-menu id="grouped-menu"></zn-slash-menu>
+<div id="grouped-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const anchor = document.getElementById('grouped-anchor');
+  const menu = document.getElementById('grouped-menu');
+  const log = document.getElementById('grouped-log');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = [
+    {label: 'Paragraph', value: '', icon: 'type@lu', group: 'Basic blocks'},
+    {label: 'Heading 1', value: '# ', icon: 'heading-1@lu', group: 'Basic blocks'},
+    {label: 'Heading 2', value: '## ', icon: 'heading-2@lu', group: 'Basic blocks'},
+    {label: 'To-do list', value: '- [ ] ', icon: 'square-check@lu', group: 'Lists'},
+    {label: 'Bulleted list', value: '- ', icon: 'list@lu', group: 'Lists'},
+    {label: 'Callout', value: 'NOTE: ', icon: 'info@lu', group: 'Advanced'},
+    {label: 'Quote', value: '> ', icon: 'quote@lu', group: 'Advanced'}
+  ];
+  menu.hideKeys = true;
+  menu.anchor = anchor;
+
+  anchor.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+
+  menu.addEventListener('zn-slash-item-select', (event) => {
+    log.textContent = `selected ${event.detail.item.label} from ${event.detail.item.group}`;
+    menu.hide();
+  });
+</script>
+```
+
+### Keyboard Hints
+
+A footer pinned to the bottom of the panel spells out the keys the menu answers to. The list scrolls beneath it, so
+the hints stay in view. Use `hide-hints` on menus driven entirely by the mouse, or where the surrounding UI already
+explains the shortcuts.
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="4" help-text="Type / to see the hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings"></zn-slash-menu>
+</zn-textarea>
+
+<zn-textarea label="Internal note" rows="4" help-text="Type / — no hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings" hide-hints></zn-slash-menu>
+</zn-textarea>
+```
+
+### Recently Used
+
+Set `recent-key` and the menu remembers what was chosen there, listing the most recent of those items above the rest
+under their own heading. The key is where the menu is used — `page-body`, `ticket-reply` — so each place keeps its own
+history in `localStorage`, and two fields that should share one can share a key. `max-recent` caps the section
+(3 by default), `recent-heading` names it, and `clearRecent()` forgets the lot. The section stands aside as soon as
+there is a query, when the ranked matches are the better answer.
+
+It reads as one more group, so it sits naturally above [grouped items](#grouping-items) — the section's own heading, then
+the sections the list already had. Insert a few from the first field below to see it fill:
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="6" help-text="Type / and insert a few — they come back to the top">
+  <zn-slash-menu slot="slash-menu" recent-key="docs-grouped" style="--slash-menu-width: 340px">
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+
+<zn-button id="forget-recent" style="margin-top: 1rem">Forget them</zn-button>
+
+<script type="module">
+  import {clearRecentSlashItems} from '/dist/zn.min.js';
+
+  document.getElementById('forget-recent').addEventListener('click', () => {
+    clearRecentSlashItems('docs-grouped');
+    clearRecentSlashItems('docs-terms');
+  });
+</script>
+```
+
+Where the items below carry no heading of their own, a rule closes the section off instead. This field shares nothing
+with the one above — each key is its own history:
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="5" help-text="Type / and insert a few — the rule marks where they end"
+             slash-recent-key="docs-terms"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+                          Customer name={{CUSTOMER_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
+`zn-input`, `zn-inline-edit`, `zn-translations` and `zn-remarkd-editor` take the same `slash-recent-key`. On a menu you
+slot in yourself, or drive with `SlashMenuController`, set `recent-key` on the `zn-slash-menu` directly.
+
 ### Truncating Long Lists
 
-`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The panel
+`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The list
 scrolls when its content exceeds `--slash-menu-max-height`.
 
 ```html:preview

package/docs/pages/components/textarea.md

@@ -501,6 +501,22 @@ the merge fields an application allows.
 </script>
 ```
 
+#### Recently Used Items
+
+`slash-recent-key` remembers what was inserted here and lists those items above the rest next time, under a
+"Recently used" heading. The key names the place the field is used, so each keeps its own history — see
+[`zn-slash-menu`](/components/slash-menu#recently-used) for the menu's own settings.
+
+```html:preview
+<zn-textarea
+  label="Refund policy"
+  rows="5"
+  slash-recent-key="docs-textarea-refunds"
+  help-text="Type / and insert a couple — they come back to the top"
+  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+               Refund window={{REFUND_DAYS}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
 #### Changing the Trigger
 
 Set `slash-trigger` to any characters. Using `{{` lets someone who already knows the token they want type it directly

package/package.json

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

package/scss/_root.scss

@@ -350,8 +350,14 @@ ul.square {
 
   // Frosted-glass inactive tabs for the zn-page tab navbar (consumed in
   // components/navbar/navbar.scss, scoped there to :host-context(zn-page)).
+  //
+  // The translucent background carries the frosted look on its own. Do NOT put a
+  // backdrop-filter here: navbar.scss applies it per inactive tab, so each tab
+  // becomes its own render surface and re-samples + re-blurs its backdrop every
+  // frame. On a page with a normal number of tabs that alone pushed GPU draw to
+  // ~8ms/frame and dropped frames on every scroll.
   --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
-  --navbar-page-inactive-tab-filter: blur(2px);
+  --navbar-page-inactive-tab-filter: none;
 
   .zn-primary {
     color: rgb(var(--zn-color-primary));

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/button/button.scss

@@ -456,8 +456,11 @@
     inset-inline-start: 0;
     bottom: 0;
     border-left: solid 1px;
-    mix-blend-mode: multiply;
-    color: rgb(var(--zn-border-color));
+    // PERF: a blend mode here gave every non-first button in every group its own
+    // render surface, and the :not(:hover) above meant hovering a group added and
+    // removed surfaces — re-running layerize and re-compositing on pointer move.
+    // A semi-transparent border reads the same over the button fills.
+    color: rgba(var(--zn-border-color), 0.85);
   }
 }
 

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/inline-edit/inline-edit.component.ts

@@ -117,12 +117,15 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   /** The characters that open the slash menu. */
   @property({ attribute: 'slash-trigger' }) slashTrigger = '/';
 
-  /** The heading shown above the slash menu's items. */
+  /** The name the slash menu's list is announced by. */
   @property({ attribute: 'slash-heading' }) slashHeading = 'Insert';
 
   /** Hides the insertion keys normally shown against the slash menu's items. */
   @property({ attribute: 'slash-hide-keys', type: Boolean }) slashHideKeys = false;
 
+  /** Lists the slash menu items most recently chosen here above the rest, remembered under this key. */
+  @property({ attribute: 'slash-recent-key' }) slashRecentKey = '';
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({ attribute: false }) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -466,6 +469,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         slash-trigger="${this.slashTrigger}"
         slash-heading="${this.slashHeading}"
         slash-preset="${this.slashPreset}"
+        slash-recent-key="${this.slashRecentKey}"
         ?slash-hide-keys="${this.slashHideKeys}"
         .slashItems="${this.slashItems}"
         .slashItemsProvider="${this.slashItemsProvider}"
@@ -489,6 +493,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 slash-trigger="${this.slashTrigger}"
                 slash-heading="${this.slashHeading}"
                 slash-preset="${this.slashPreset}"
+                slash-recent-key="${this.slashRecentKey}"
                 ?slash-hide-keys="${this.slashHideKeys}"
                 .slashItems="${this.slashItems}"
                 .slashItemsProvider="${this.slashItemsProvider}"

package/src/components/input/input.component.ts

@@ -276,12 +276,18 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The characters that open the slash menu. */
   @property({attribute: 'slash-trigger'}) slashTrigger = '/';
 
-  /** The heading shown above the slash menu's items. */
+  /** The name the slash menu's list is announced by. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
   /** Hides the insertion keys normally shown against the slash menu's items. */
   @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
 
+  /**
+   * Lists the items most recently chosen here above the rest, remembered in `localStorage` under this
+   * key. Share a key between the fields that should share a history; leave unset to offer no such list.
+   */
+  @property({attribute: 'slash-recent-key'}) slashRecentKey = '';
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -1100,7 +1106,11 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
+              <zn-slash-menu
+                part="slash-menu"
+                heading=${this.slashHeading}
+                recent-key=${this.slashRecentKey}
+                ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

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);
@@ -81,8 +93,13 @@
     background-repeat: no-repeat;
     background-position: bottom center;
     background-size: cover;
-    mix-blend-mode: color-burn;
-    opacity: 0.2;
+    // PERF: mix-blend-mode forces .page__header .header — which contains the tab
+    // navbar — into its own render surface with a backdrop readback. Dropped in
+    // favour of plain alpha compositing. This is a small visual change to the
+    // aurora wave (it no longer darkens what it sits on); restore the blend mode
+    // if the look regresses, but expect the GPU cost back with it.
+    //mix-blend-mode: color-burn;
+    opacity: 0.04;
     pointer-events: none;
   }
 
@@ -91,12 +108,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/modules/page-section-card/page-section-card.component.ts

@@ -39,6 +39,8 @@ export default class ZnPageSectionCard extends ZincElement {
   @property({type: Boolean, reflect: true}) selected = false;
   /** Set when the section's type has no registered template — renders greyed. */
   @property({type: Boolean, reflect: true}) unknown = false;
+  /** Set when the builder pins this section to the page — drops the remove action. */
+  @property({type: Boolean, reflect: true}) locked = false;
 
   protected updated(changed: PropertyValues) {
     super.updated(changed);
@@ -67,6 +69,10 @@ export default class ZnPageSectionCard extends ZincElement {
           <span class="card__label">${this.label}</span>
           ${this.summary ? html`<span class="card__summary">${this.summary}</span>` : ''}
         </span>
+        ${this.locked ? html`
+          <span class="card__lock" title="This section cannot be removed">
+            <zn-icon src="lock" size="14"></zn-icon>
+          </span>` : ''}
         <span class="card__actions" @keydown="${this._actionKeydown}">
           <zn-button
             class="card__action"
@@ -77,15 +83,16 @@ export default class ZnPageSectionCard extends ZincElement {
             title="Duplicate section"
             aria-label="Duplicate section"
             @click="${(e: Event) => this._action(e, 'page-card-duplicate')}"></zn-button>
-          <zn-button
-            class="card__action"
-            icon-button="small"
-            plain
-            icon="delete"
-            icon-size="14"
-            title="Remove section"
-            aria-label="Remove section"
-            @click="${(e: Event) => this._action(e, 'page-card-remove')}"></zn-button>
+          ${this.locked ? '' : html`
+            <zn-button
+              class="card__action"
+              icon-button="small"
+              plain
+              icon="delete"
+              icon-size="14"
+              title="Remove section"
+              aria-label="Remove section"
+              @click="${(e: Event) => this._action(e, 'page-card-remove')}"></zn-button>`}
         </span>
       </div>
     `;

package/src/components/page-builder/modules/page-section-card/page-section-card.scss

@@ -15,6 +15,11 @@
   cursor: grabbing;
 }
 
+:host([locked]),
+:host([locked]:active) {
+  cursor: default;
+}
+
 .card {
   display: flex;
   align-items: center;
@@ -77,6 +82,14 @@
   text-overflow: ellipsis;
 }
 
+// Always visible, unlike the hover actions — it is what explains their absence.
+.card__lock {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  opacity: 0.45;
+}
+
 // Space is always reserved (visibility, not display) so the card never
 // changes size or shifts its text when the actions appear on hover.
 .card__actions {

package/src/components/page-builder/modules/page-section-card/page-section-card.test.ts

@@ -41,6 +41,15 @@ describe('<zn-page-section-card>', () => {
     expect(hostSawKeydown, 'host keydown suppressed for button activation keys').to.be.false;
   });
 
+  it('should drop the remove action and show a lock when locked', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero" locked></zn-page-section-card>`);
+    expect(el.hasAttribute('locked')).to.be.true;
+    expect(el.shadowRoot!.querySelector('zn-button[title="Remove section"]'), 'remove gone').to.not.exist;
+    expect(el.shadowRoot!.querySelector('zn-button[title="Duplicate section"]'), 'duplicate kept').to.exist;
+    expect(el.shadowRoot!.querySelector('.card__lock'), 'lock indicator').to.exist;
+  });
+
   it('should reflect selected and unknown states', async () => {
     const el = await fixture<ZnPageSectionCard>(html`
       <zn-page-section-card label="Hero" selected unknown></zn-page-section-card>`);