@simai-studio/ui 0.0.0-stage → 5.20261019.1710

package/distr/smart/modal/studio.fixture.json

@@ -0,0 +1,21 @@
+{
+  "schema": "simai.smart-component-fixture.v2",
+  "id": "reference",
+  "component": "smart.modal",
+  "title": "Modal reference",
+  "summary": "Deterministic reference fixture for sf-modal.",
+  "locale": "ru",
+  "props": {
+    "open": true,
+    "title": "Подтверждение"
+  },
+  "children": [
+    {
+      "element": "p",
+      "props": {},
+      "text": "Сохранить внесённые изменения?",
+      "children": []
+    }
+  ],
+  "state": "default"
+}

package/distr/smart/modal/studio.scenario.json

@@ -0,0 +1,25 @@
+{
+  "schema": "simai.smart-component-scenario.v1",
+  "id": "smoke",
+  "component": "smart.modal",
+  "fixture": "reference",
+  "viewport": "desktop",
+  "actions": [
+    {
+      "type": "invoke",
+      "method": "toggle",
+      "arguments": []
+    }
+  ],
+  "assertions": [
+    {
+      "type": "upgraded"
+    },
+    {
+      "type": "no-console-error"
+    },
+    {
+      "type": "no-network"
+    }
+  ]
+}

package/distr/smart/modal/template/default.js

@@ -0,0 +1,218 @@
+import {html, nothing} from 'lit';
+
+function joinClasses(...parts) {
+    return parts.filter(Boolean).join(' ').trim();
+}
+
+function overlayClasses(context) {
+    const blurClass = context.blur
+        ? `backdrop-blur-${context.blurType}`
+        : context.overlayPreset === 'focus'
+            ? 'backdrop-blur-small'
+            : '';
+
+    return joinClasses(
+        `sf-modal-overlay--${context.overlayPreset}`,
+        blurClass,
+    );
+}
+
+export function renderModalTemplate(context) {
+    const isInline = context.display === 'inline';
+    const hasRemoteContent =
+        Boolean(context.src) &&
+        (context.mode === 'ajax' || context.mode === 'iframe');
+    const showHeader = context.showHeader !== false;
+    const hasHeaderSlot = context.hasHeaderContent;
+    const titleId = `${context.modalId}-title`;
+    const accessibleLabel =
+        context.ariaLabel || (hasHeaderSlot || !showHeader ? context.title : '');
+    const hasContentSlot = context.hasContentContent;
+    const hasFooterSlot = context.hasFooterContent && context.showFooter;
+    const panelStyle = [
+        context.width ? `--sf-modal-width:${context.width}` : '',
+        context.height ? `--sf-modal-height:${context.height}` : '',
+    ]
+        .filter(Boolean)
+        .join(';');
+    const surfaceStyle = [
+        context.surfacePadding
+            ? `--sf-modal-surface-padding:${context.surfacePadding}`
+            : '',
+    ]
+        .filter(Boolean)
+        .join(';');
+    const modalStyle = [
+        context.modalZIndex ? `z-index:${context.modalZIndex}` : '',
+    ]
+        .filter(Boolean)
+        .join(';');
+
+    return html`
+        <div
+                id=${context.modalId}
+                class=${joinClasses(
+                        'sf-modal',
+                        `sf-modal--position-${context.position}`,
+                        // Legacy alias: the misspelt class the modal wrote before;
+                        // kept until contracts/changes/journal.json removes it.
+                        `sf-modal--positon-${context.position}`,
+                        isInline
+                                ? 'sf-modal--inline inline-block w-full'
+                                : 'fixed top-0 inline-start-0 w-full h-full z-9 p-3 items-cross-center content-main-center',
+                        context.open ? 'flex' : 'hidden',
+                        !isInline && context.animate && 'animate',
+                        context.rootClass
+                )}
+                style=${modalStyle}
+                role=${isInline ? 'region' : 'dialog'}
+                aria-modal=${isInline || context.minimized ? 'false' : 'true'}
+                aria-hidden=${context.open && !context.minimized ? 'false' : 'true'}
+                ?inert=${!context.open || context.minimized}
+                aria-label=${accessibleLabel || nothing}
+                aria-labelledby=${accessibleLabel ? nothing : titleId}
+                data-sf-modal-id=${context.modalId}
+                data-sf-modal-position=${context.position}
+                data-sf-modal-fullscreen=${String(context.fullscreen)}
+                data-sf-modal-display=${context.display}
+                data-sf-modal-state=${isInline ? 'inline' : context.modalState}
+                data-sf-modal-hidden=${String(context.minimized)}
+                data-sf-modal-overlay-preset=${context.overlayPreset}
+        >
+            <div
+                    class=${joinClasses(
+                            'absolute top-0 inline-start-0 w-full h-full',
+                            overlayClasses(context),
+                            context.overlayClass,
+                            (!context.overlay || isInline) && 'hidden',
+                    )}
+                    data-sf-modal-overlay
+                    data-sf-modal-overlay-preset=${context.overlayPreset}
+            ></div>
+
+            <section
+                    class=${joinClasses('relative overflow-visible', context.panelClass)}
+                    style=${panelStyle}
+                    data-sf-modal-panel
+                    ?data-sf-modal-has-width=${Boolean(context.width)}
+                    ?data-sf-modal-has-height=${Boolean(context.height)}
+                    tabindex="-1"
+            >
+                <div
+                        class=${joinClasses(
+                                'sf-modal-surface flex flex-col',
+                                !isInline && 'sf-modal-surface--elevated',
+                                context.surfaceClass,
+                        )}
+                        style=${surfaceStyle}
+                        data-sf-modal-surface
+                >
+                    ${showHeader
+                            ? html`
+                                <header
+                                        class=${joinClasses(
+                                                'sf-modal-header flex items-start min-w-0',
+                                                context.headerClass,
+                                        )}
+                                >
+                                    <div class="sf-modal-header-content">${hasHeaderSlot
+                                            ? context.headerContent
+                                            : html`<h2 id=${titleId} class="title-3 m-0">${context.title}</h2>`}</div>
+                                    ${context.hide && !isInline
+                                            ? html`
+                                                <button
+                                                        type="button"
+                                                        class=${joinClasses(
+                                                                'sf-icon-button sf-icon-button--icon sf-modal-header-action sf-modal-hide-button sf-modal-hide-button--inline-end sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 m-0',
+                                                                context.hideModifier,
+                                                        )}
+                                                        aria-label=${context.minimizeText}
+                                                        data-sf-modal-hide=${context.modalId}
+                                                        @click=${context.onHideClick}
+                                                >
+                                                    <span class="sf-modal-hide-icon" aria-hidden="true"></span>
+                                                </button>
+                                            `
+                                            : nothing}
+                                    ${context.showClose
+                                            ? html`
+                                                <button
+                                                        type="button"
+                                                        class=${joinClasses(
+                                                                'sf-icon-button sf-modal-header-action sf-modal-close-button sf-modal-close-button--inline-end sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 m-0',
+                                                                context.closeClass,
+                                                        )}
+                                                        aria-label=${context.closeText}
+                                                        data-sf-modal-close=${context.modalId}
+                                                        @click=${context.onCloseClick}
+                                                >
+                          <span
+                                  class="sf-close sf-close--size-1/3 flex justify-center items-center"
+                                  aria-hidden="true"
+                          >
+                            <span class="sf-close-icon"></span>
+                          </span>
+                                                </button>
+                                            `
+                                            : nothing}
+                                </header>
+                            `
+                            : nothing}
+
+                    <div
+                            class="sf-modal-body flex flex-col gap-1 min-w-0 overflow-visible"
+                            data-sf-modal-body
+                    >
+                        <div
+                                class="sf-modal-body-viewport min-w-0 overflow-visible"
+                                data-sf-modal-body-viewport
+                        >
+                            <div
+                                    class=${joinClasses(
+                                            'sf-modal-body-scroll h-full min-w-0 overflow-y-auto flex flex-col gap-1 p-1/4',
+                                            context.bodyClass,
+                                    )}
+                                    data-sf-modal-body-scroll
+                            >
+                                ${hasRemoteContent
+                                        ? html`
+                                            <div
+                                                    class="sf-modal-content-placeholder flex flex-col gap-2 min-h-8 items-cross-center content-main-center"
+                                                    data-sf-modal-content-placeholder
+                                            >
+                                                ${context.remoteContent}
+                                            </div>
+                                        `
+                                        : hasContentSlot
+                                                ? html`
+                                                    <div
+                                                            class=${joinClasses(
+                                                                    'sf-modal-content flex flex-col gap-2',
+                                                                    context.contentClass,
+                                                            )}
+                                                    >
+                                                        ${context.contentContent}
+                                                    </div>
+                                                `
+                                                : html`<p class="m-0 text-2">${context.text}</p>`}
+                            </div>
+                        </div>
+
+                        ${hasFooterSlot
+                                ? html`
+                                    <div
+                                            class=${joinClasses(
+                                                    'sf-modal-footer flex flex-wrap gap-2',
+                                                    context.footerClass,
+                                            )}
+                                    >
+                                        ${context.footerContent}
+                                    </div>
+                                `
+                                : nothing}
+                    </div>
+                </div>
+            </section>
+        </div>
+    `;
+}

package/distr/smart/page-header/js/page-header.min.js

@@ -0,0 +1,20 @@
+(()=>{"use strict";var e={"1e65420b829c"(e,t,s){s.a(e,async(e,t)=>{try{var a=s("fbe0570fcc69"),o=s("0d662e4d7d63"),r=s("b48790dff911"),n=e([a,o,r]);[a,o,r]=n.then?(await n)():n;var l=s.n(a);const i={en:{star:"Add to favourites",unstar:"Remove from favourites",allSites:"for all sites"},ru:{star:"В избранное",unstar:"Убрать из избранного",allSites:"для всех сайтов"}};class c extends(l()){static get props(){return{heading:{default:""},count:{default:""},level:{default:"site",values:["site","install"]},star:{default:"",values:["","off","on"]},rootClass:{attribute:"root-class",default:""}}}text(e){return(0,o.pageText)(i,e,this,"sf-page-header")}toggleStar(){const e="on"!==this.getProp("star"),t=new CustomEvent("sf-page-header-star",{bubbles:!0,composed:!0,cancelable:!0,detail:{on:e}});this.dispatchEvent(t)&&this.setAttribute("star",e?"on":"off")}templateContext(){const e=this.getPropsContext();return this.createTemplateContext({...e,component:this,heading:this.getProp("heading"),count:this.getProp("count"),level:this.getProp("level"),star:this.getProp("star"),rootClass:this.getRootClass(),text:e=>this.text(e),hostSlot:e=>this.getSlotContent(e),hasHostSlot:e=>this.hasSlotContent(e)})}template(){return(0,r.X)(this.templateContext())}}c.define("sf-page-header"),t()}catch(e){t(e)}})},b48790dff911(e,t,s){s.a(e,async(e,a)=>{try{s.d(t,{X:()=>l});var o=s("ddf1cdb42ecc"),r=e([o]),n=r.then?(await r)():r;o=n[0];function l(e){const{component:t,heading:s,count:a,level:r,star:n,text:l,hostSlot:i,hasHostSlot:c,rootClass:h}=e,d=["sf-page-header","flex","flex-col","gap-1/2","min-w-0",h].filter(Boolean).join(" "),u="on"===n;return o.html`<header class=${d} style=${e.rootStyle||o.nothing}>
+    ${c("path")?o.html`<div class="sf-page-header-path flex items-cross-center min-w-0">${i("path")}</div>`:o.nothing}
+    <div class="sf-page-header-line flex items-cross-center flex-wrap gap-1 min-w-0">
+      ${c("start")?i("start"):o.nothing}
+      <h1 class="sf-page-header-heading sf-h-4 m-0 min-w-0 truncate">${s}</h1>
+      ${""!==a&&null!=a?o.html`<sf-badge appearance="tonal" scheme="neutral" size="1/2" text=${String(a)}></sf-badge>`:o.nothing}
+      ${"install"===r?o.html`<sf-badge appearance="outline" scheme="tertiary" size="1/2" text=${l("allSites")}></sf-badge>`:o.nothing}
+      ${"off"===n||"on"===n?o.html`<sf-icon-button size="1/2" appearance="ghost" scheme="on-surface"
+            class="sf-page-header-star"
+            icon="star"
+            ?filled=${u}
+            style=${u?"--sf-icon--color: var(--sf-warning)":o.nothing}
+            aria-pressed=${String(u)}
+            aria-label=${l(u?"unstar":"star")}
+            title=${l(u?"unstar":"star")}
+            @click=${()=>t.toggleStar()}></sf-icon-button>`:o.nothing}
+      <span class="grow"></span>
+      ${c("actions")?o.html`<div class="sf-page-header-actions flex items-cross-center gap-1/2">${i("actions")}</div>`:o.nothing}
+    </div>
+  </header>`}a()}catch(i){a(i)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function s(a){const o=t[a];if(void 0!==o)return o.exports;const r=t[a]={exports:{}};return e[a](r,r.exports,s),r.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",a=e?Symbol("webpack exports"):"__webpack_exports__",o=e?Symbol("webpack error"):"__webpack_error__",r=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};s.a=(e,s,n)=>{let l;n&&((l=[]).d=-1);const i=new Set,c=e.exports;let h,d,u;const f=new Promise((e,t)=>{u=t,d=e});f[a]=c,f[t]=e=>(l&&e(l),i.forEach(e),f.catch(e=>{})),e.exports=f;s(e=>{let s;h=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const s=[];s.d=0,e.then(e=>{n[a]=e,r(s)},e=>{n[o]=e,r(s)});const n={};return n[t]=e=>e(s),n}}const s={};return s[t]=e=>{},s[a]=e,s}))(e);const n=()=>h.map(e=>{if(e[o])throw e[o];return e[a]}),c=new Promise(e=>{s=()=>e(n),s.r=0;const a=e=>e!==l&&!i.has(e)&&(i.add(e),e&&!e.d&&(s.r++,e.push(s)));h.map(e=>e[t](a))});return s.r?c:n()},e=>(e?u(f[o]=e):d(c),r(l))),l?.d<0&&(l.d=0)}})(),s.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{if(Array.isArray(t))for(var a=0;a<t.length;){var o=t[a++],r=t[a++];s.o(e,o)?0===r&&a++:0===r?Object.defineProperty(e,o,{enumerable:!0,value:t[a++]}):Object.defineProperty(e,o,{enumerable:!0,get:r})}else for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);s("1e65420b829c")})();

package/distr/smart/page-header/smart.manifest.json

@@ -0,0 +1,226 @@
+{
+  "schema_version": 2,
+  "id": "smart.page-header",
+  "version": "1.0.0",
+  "title": "Page header",
+  "summary": "The head of an admin page: path, heading, count, favourite star, install mark and main action. Replaces the admin top bar together with sf-admin-menu.",
+  "kind": "smart",
+  "reuse_mode": "whole",
+  "lifecycle": "experimental",
+  "tags": [
+    "page-header",
+    "admin",
+    "navigation"
+  ],
+  "capabilities": [
+    "render",
+    "theme",
+    "responsive",
+    "i18n"
+  ],
+  "custom_element": "sf-page-header",
+  "templates": [
+    "default"
+  ],
+  "exported_parts": [],
+  "composition": {
+    "uses": [
+      "smart.badges",
+      "smart.icon-buttons",
+      "smart.icons"
+    ],
+    "public_parts": []
+  },
+  "inputs": {
+    "type": "object",
+    "properties": {
+      "heading": {
+        "type": "string",
+        "default": "",
+        "description": "The page heading."
+      },
+      "count": {
+        "type": "string",
+        "default": "",
+        "description": "How many records the page holds; empty draws no count. The admin menu carries no totals, so this is where they are."
+      },
+      "level": {
+        "type": "string",
+        "default": "site",
+        "enum": [
+          "site",
+          "install"
+        ],
+        "description": "install marks a page shared by every site."
+      },
+      "star": {
+        "type": "string",
+        "default": "",
+        "enum": [
+          "",
+          "off",
+          "on"
+        ],
+        "description": "Empty draws no star; off and on draw it in that state."
+      },
+      "root-class": {
+        "type": "string",
+        "default": ""
+      }
+    },
+    "additionalProperties": false
+  },
+  "item_contract": {},
+  "contracts": {},
+  "methods": {},
+  "events": {
+    "sf-page-header-star": {
+      "summary": "The person pressed the star. Cancelable: a host that waits for its own answer cancels it and sets star itself.",
+      "payload": {
+        "type": "object",
+        "required": [
+          "on"
+        ],
+        "properties": {
+          "on": {
+            "type": "boolean"
+          }
+        }
+      }
+    }
+  },
+  "state": {
+    "machines": {},
+    "visual_states": [
+      "default",
+      "selected"
+    ]
+  },
+  "persistence": {
+    "mode": "none",
+    "source_of_truth": "host",
+    "network_owner": "host",
+    "revision_field": null
+  },
+  "ownership": {
+    "source": "simai/ui-source",
+    "data": "host",
+    "effects": "host",
+    "forbidden_client_responsibilities": [
+      "backend access decisions",
+      "host route invention",
+      "keeping favourites"
+    ]
+  },
+  "security": {
+    "permissions_owner": "none",
+    "untrusted_inputs": [
+      "props",
+      "children"
+    ],
+    "network_policy": "deny"
+  },
+  "accessibility": {
+    "role": "banner content; the heading is an h1",
+    "accessible_name": "internal",
+    "keyboard": [
+      "Tab reaches the star and the actions",
+      "Enter or Space toggles the star"
+    ],
+    "focus": "The star is a native button in sf-icon-button with aria-pressed and a label that says what pressing it does."
+  },
+  "presentation": {
+    "themes": [
+      "light",
+      "dark"
+    ],
+    "locales": [
+      "ru",
+      "en"
+    ],
+    "responsive": [
+      "desktop",
+      "mobile"
+    ],
+    "skeleton": {
+      "shape": "block",
+      "while_loading": "none"
+    }
+  },
+  "adapter": {
+    "kind": "generic",
+    "protocol": "simai.smart-studio-adapter.v1",
+    "module": null
+  },
+  "artifacts": {
+    "fixtures": [
+      "studio.fixture.json"
+    ],
+    "scenarios": [
+      "studio.scenario.json"
+    ]
+  },
+  "readiness": {
+    "level": "described",
+    "required_checks": [
+      "manifest",
+      "fixture",
+      "runtime-upgrade",
+      "scenario-smoke"
+    ]
+  },
+  "compatibility": {
+    "contract_schema": {
+      "id": "https://simai.io/contracts/smart-component-manifest.v2.schema.json",
+      "version": 2
+    },
+    "runtime_pair": {
+      "ui_revision": "094f3d549aa7921d2d7f8773972c73711dd6a72e",
+      "ui_smart_revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c"
+    },
+    "aliases": [],
+    "deprecations": [],
+    "replacement": null,
+    "migrations": []
+  },
+  "provenance": {
+    "source_repository": "simai/ui-source",
+    "source_revision": "d73527c92056a684b5f34a46ec7315e1ded9be19",
+    "source_artifacts": [
+      {
+        "path": "src/smart/page-header/index.js",
+        "sha256": "e4891a79a1b9ab42f93b157d5a27d76ae13f2575e29577b210d0a178af3911dd"
+      },
+      {
+        "path": "src/smart/page-header/js/templates/default.js",
+        "sha256": "a64aa587e463edca6e8998526bb96f7a632126c5b1fa6d905ecc63472f642188"
+      }
+    ],
+    "generated_runtime": [
+      {
+        "repository": "simai/ui-smart",
+        "revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c",
+        "path": "smart/page-header/js/page-header.js",
+        "sha256": "b69f38e73a1a04d77f2323fda3106af3ba10aae4b919091df4515f9dcbfb4032"
+      }
+    ]
+  },
+  "ai_guidance": {
+    "use_when": "Use sf-page-header at the top of every admin page: it is the only place a page states its path, heading, count, favourite and main action once the admin top bar is gone.",
+    "do_not": [
+      "Do not keep favourites in the component; answer sf-page-header-star from the host",
+      "Do not put totals in the menu; they belong here",
+      "Do not style the heading yourself; it is the fourth heading step"
+    ],
+    "required_reads": [
+      "inputs",
+      "events",
+      "ownership"
+    ],
+    "minimal_example": "<sf-page-header heading=\"Каталог решений\" count=\"448\" star=\"off\"><sf-breadcrumbs slot=\"path\"><sf-breadcrumbs-item href=\"/\">simai.ru</sf-breadcrumbs-item><sf-breadcrumbs-item href=\"/data\">Данные</sf-breadcrumbs-item></sf-breadcrumbs><sf-button slot=\"actions\" icon-start=\"add\">Создать</sf-button></sf-page-header>",
+    "owner_commands": [
+      "npm run contract:verify",
+      "npm test"
+    ]
+  }
+}

package/distr/smart/page-header/studio.fixture.json

@@ -0,0 +1,15 @@
+{
+  "schema": "simai.smart-component-fixture.v2",
+  "id": "reference",
+  "component": "smart.page-header",
+  "title": "Page header reference",
+  "summary": "Deterministic reference fixture for sf-page-header.",
+  "locale": "ru",
+  "props": {
+    "heading": "Каталог решений",
+    "count": "448",
+    "star": "off"
+  },
+  "children": [],
+  "state": "default"
+}

package/distr/smart/page-header/studio.scenario.json

@@ -0,0 +1,22 @@
+{
+  "schema": "simai.smart-component-scenario.v1",
+  "id": "smoke",
+  "component": "smart.page-header",
+  "fixture": "reference",
+  "viewport": "desktop",
+  "actions": [],
+  "assertions": [
+    {
+      "type": "upgraded"
+    },
+    {
+      "type": "visible"
+    },
+    {
+      "type": "no-console-error"
+    },
+    {
+      "type": "no-network"
+    }
+  ]
+}

package/distr/smart/page-header/template/default.js

@@ -0,0 +1,37 @@
+import {html, nothing} from 'lit';
+
+// Framework utilities only: a column for the path above the line, and a line
+// holding the heading, its count, the install mark and the star, then the
+// actions pushed to the end. The heading is the fourth heading step, the size
+// the admin pages have always titled themselves at.
+export function renderPageHeaderTemplate(context) {
+  const {component, heading, count, level, star, text, hostSlot, hasHostSlot, rootClass} = context;
+  const classes = ['sf-page-header', 'flex', 'flex-col', 'gap-1/2', 'min-w-0', rootClass].filter(Boolean).join(' ');
+  const on = star === 'on';
+  return html`<header class=${classes} style=${context.rootStyle || nothing}>
+    ${hasHostSlot('path') ? html`<div class="sf-page-header-path flex items-cross-center min-w-0">${hostSlot('path')}</div>` : nothing}
+    <div class="sf-page-header-line flex items-cross-center flex-wrap gap-1 min-w-0">
+      ${hasHostSlot('start') ? hostSlot('start') : nothing}
+      <h1 class="sf-page-header-heading sf-h-4 m-0 min-w-0 truncate">${heading}</h1>
+      ${count !== '' && count !== null && count !== undefined
+        ? html`<sf-badge appearance="tonal" scheme="neutral" size="1/2" text=${String(count)}></sf-badge>`
+        : nothing}
+      ${level === 'install'
+        ? html`<sf-badge appearance="outline" scheme="tertiary" size="1/2" text=${text('allSites')}></sf-badge>`
+        : nothing}
+      ${star === 'off' || star === 'on'
+        ? html`<sf-icon-button size="1/2" appearance="ghost" scheme="on-surface"
+            class="sf-page-header-star"
+            icon="star"
+            ?filled=${on}
+            style=${on ? '--sf-icon--color: var(--sf-warning)' : nothing}
+            aria-pressed=${String(on)}
+            aria-label=${on ? text('unstar') : text('star')}
+            title=${on ? text('unstar') : text('star')}
+            @click=${() => component.toggleStar()}></sf-icon-button>`
+        : nothing}
+      <span class="grow"></span>
+      ${hasHostSlot('actions') ? html`<div class="sf-page-header-actions flex items-cross-center gap-1/2">${hostSlot('actions')}</div>` : nothing}
+    </div>
+  </header>`;
+}