@crombolo/backoffice-host 0.13.1 → 0.14.1

package/assets/login.js

@@ -39,6 +39,8 @@ class CromboloLoginElement extends LitElement {
     logoImage: { type: String, attribute: 'logo-image-alternative' },
     usernameIsEmail: { type: Boolean, attribute: 'username-is-email' },
     allowPasswordReset: { type: Boolean, attribute: 'allow-password-reset' },
+    disableLocalLogin: { type: Boolean, attribute: 'disable-local-login' },
+    externalProviders: { type: Array, attribute: 'external-providers' },
     _busy: { state: true },
     _error: { state: true },
     _view: { state: true },
@@ -51,6 +53,8 @@ class CromboloLoginElement extends LitElement {
     this.logoImage = ''
     this.usernameIsEmail = true
     this.allowPasswordReset = false
+    this.disableLocalLogin = false
+    this.externalProviders = []
     this._busy = false
     this._error = ''
     this._notice = ''
@@ -63,6 +67,9 @@ class CromboloLoginElement extends LitElement {
           ? { kind: 'reset', user: params.get('userId'), code: params.get('resetCode') }
           : undefined
     this._view = this._link ? 'checking' : 'login'
+    // An identity provider's sign-in that came back refused says why.
+    const external = params.get('externalLoginError')
+    if (external) this._error = external
   }
 
   connectedCallback() {
@@ -182,7 +189,9 @@ class CromboloLoginElement extends LitElement {
         return
       }
       if (response.status === 402) {
-        this._error = 'This account requires two-factor authentication, which is not yet supported.'
+        const challenge = await response.json().catch(() => ({}))
+        this._twoFactorProvider = challenge.enabledTwoFactorProviderNames?.[0]
+        this._view = 'two-factor'
       } else if (response.status === 403) {
         this._error = 'This account is locked or not approved.'
       } else if (response.status === 401) {
@@ -197,6 +206,57 @@ class CromboloLoginElement extends LitElement {
     }
   }
 
+  async #verifyTwoFactor(event) {
+    event.preventDefault()
+    if (this._busy) return
+    const code = event.target.elements.code.value.trim()
+    if (!code) return
+    this._busy = true
+    this._error = ''
+    try {
+      const response = await this.#post('/security/back-office/verify-2fa', {
+        provider: this._twoFactorProvider,
+        code,
+      })
+      if (response.ok) {
+        window.location.href = localTarget(this.returnUrl, '/umbraco')
+        return
+      }
+      if (response.status === 401) {
+        this._view = 'login'
+        this._error = 'That took too long. Sign in again.'
+      } else if (response.status === 403) {
+        this._view = 'login'
+        this._error = 'This account is locked or not approved.'
+      } else {
+        this._error = 'That code is not right. Try the next one.'
+      }
+    } catch {
+      this._error = 'Could not reach the server.'
+    } finally {
+      this._busy = false
+    }
+  }
+
+  #twoFactorForm() {
+    return html`
+      <h1 class="uui-h3">Enter your code</h1>
+      <p>Enter the six-digit code from your authenticator app, or one of your recovery codes.</p>
+      <form @submit=${this.#verifyTwoFactor}>
+        <uui-form-layout-item>
+          <uui-label for="code" slot="label" required>Code</uui-label>
+          <uui-input id="code" name="code" autocomplete="one-time-code" required ?disabled=${this._busy}></uui-input>
+        </uui-form-layout-item>
+        ${this.#messages()}
+        <uui-button type="submit" look="primary" color="positive" .state=${this._busy ? 'waiting' : undefined} label="Verify"></uui-button>
+        <uui-button look="link" label="Back to sign in" @click=${() => {
+          this._error = ''
+          this._view = 'login'
+        }}></uui-button>
+      </form>
+    `
+  }
+
   #messages() {
     return html`${this._notice ? html`<p id="notice" role="status">${this._notice}</p>` : nothing}
     ${this._error ? html`<p id="error" role="alert">${this._error}</p>` : nothing}`
@@ -245,7 +305,9 @@ class CromboloLoginElement extends LitElement {
           ? this.#newPasswordForm()
           : this._view === 'forgot'
             ? this.#resetRequestForm()
-            : this.#loginForm()
+            : this._view === 'two-factor'
+              ? this.#twoFactorForm()
+              : this.#loginForm()
     return html`
       <div id="layout">
         <uui-box id="card">
@@ -256,7 +318,25 @@ class CromboloLoginElement extends LitElement {
     `
   }
 
+  /** A button per backoffice identity provider, each returning here signed in. */
+  #providers() {
+    if (!this.externalProviders?.length) return nothing
+    return html`<div id="providers">
+      ${this.externalProviders.map(
+        (provider) =>
+          html`<uui-button look="outline" href=${provider.url} label=${`Sign in with ${provider.name}`}>Sign in with ${provider.name}</uui-button>`,
+      )}
+    </div>`
+  }
+
   #loginForm() {
+    // With local sign-in off, the providers are the only way in.
+    if (this.disableLocalLogin)
+      return html`
+          <h1 class="uui-h3">Sign in</h1>
+          ${this.#messages()}
+          ${this.#providers()}
+      `
     return html`
           <h1 class="uui-h3">Sign in</h1>
           <form @submit=${this.#submit}>
@@ -301,6 +381,7 @@ class CromboloLoginElement extends LitElement {
                 : nothing
             }
           </form>
+          ${this.#providers()}
     `
   }
 
@@ -342,6 +423,12 @@ class CromboloLoginElement extends LitElement {
       margin: 0;
       color: var(--uui-color-danger, #d42054);
     }
+    #providers {
+      display: flex;
+      flex-direction: column;
+      gap: var(--uui-size-space-3, 9px);
+      margin-top: var(--uui-size-space-5, 18px);
+    }
     #notice {
       margin: 0;
       color: var(--uui-color-positive, #0b8152);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.13.1",
+    "@crombolo/core": "0.14.1",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/branding/branding.js

@@ -1,25 +1,20 @@
 /**
  * The two places the vendored client names the product in code rather than in a
- * string table, where the localisation override cannot reach.
+ * string table.
  *
- * `view.controller.js` builds the page title with a hardcoded string rather than
- * a localisation key, so the dictionary override cannot reach it. Patching the
- * vendored file would work until the next `vendor:backoffice`, which is the
- * reason nothing here patches vendored files.
- *
- * So it is corrected as it is written. The suffix is the site's own name, which
- * the shell states in `<meta name="application-name">` — so a site called
- * something other than Crombolo gets its own name rather than a second hardcoded
- * one.
+ * `view.controller.js` builds the page title with a hardcoded suffix, which
+ * `vendor:backoffice` rebrands to Crombolo. The suffix should be the site's own
+ * name, which the shell states in `<meta name="application-name">` — so a site
+ * called something other than Crombolo gets its own name rather than ours.
  *
  * Not read from `document.title`, although the shell puts the name there too.
  * This module loads after the client has started, and by then the client may
- * have written a title of its own. Taking `Content | Umbraco` for the site's
- * name makes every correction end in ` | Umbraco` again: the observer below
+ * have written a title of its own. Taking `Content | Crombolo` for the site's
+ * name makes every correction end in ` | Crombolo` again: the observer below
  * then answers its own change, forever, and the page never gets its main thread
  * back.
  */
-const CLIENT_SUFFIX = ' | Umbraco'
+const CLIENT_SUFFIX = ' | Crombolo'
 
 /** The site's name as the shell stated it. */
 export function brandName(doc = document) {
@@ -70,7 +65,7 @@ function correctLogoLink() {
   if (!anchor) return false
   anchor.href = 'https://github.com/kineco-au/crombolo-cms'
   anchor.textContent = 'Crombolo on GitHub'
-  const image = logo.shadowRoot.querySelector('img[alt="Umbraco"]')
+  const image = logo.shadowRoot.querySelector('img#logo')
   if (image) image.alt = brandName()
   return true
 }

package/plugin/branding/bundle-builder-labels.js

@@ -1,5 +1,5 @@
 /**
- * The two labels Umbraco's bundle builder hard-codes.
+ * The two labels and two toasts Umbraco's bundle builder hard-codes.
  *
  * The builder workspace is vendored and its copy is English in the template
  * rather than dictionary keys, so there is no key to override: `Name of the
@@ -21,6 +21,16 @@ export const BUILDER_LABELS = [
   ['Package Content', 'Bundle content'],
 ]
 
+/**
+ * The builder's toasts on saving a definition. Shown through the notification
+ * context, so they are corrected where every toast passes rather than in the
+ * element, whose `peek` call is its own.
+ */
+export const BUILDER_TOASTS = [
+  ['Package saved', 'Bundle saved'],
+  ['Package updated', 'Bundle saved'],
+]
+
 /** The replacement for a vendored string, or undefined when it is not one of ours. */
 export function correctionFor(text) {
   if (typeof text !== 'string') return undefined
@@ -55,7 +65,26 @@ function patch(element) {
   return true
 }
 
+// Loaded here rather than at the top, so the module's pure parts import
+// anywhere — the tests read `BUILDER_LABELS` and `BUILDER_TOASTS` outside a browser.
+async function correctToasts() {
+  const { UmbNotificationContext } = await import('@umbraco-cms/backoffice/notification')
+  const proto = UmbNotificationContext.prototype
+  const peek = proto.peek
+  if (typeof peek !== 'function') return
+  proto.peek = function correctedPeek(color, options) {
+    const message = options?.data?.message
+    const replacement = BUILDER_TOASTS.find(([before]) => before === message)?.[1]
+    return peek.call(
+      this,
+      color,
+      replacement ? { ...options, data: { ...options.data, message: replacement } } : options,
+    )
+  }
+}
+
 export const onInit = () => {
+  correctToasts().catch(() => {})
   customElements
     .whenDefined('umb-workspace-package-builder')
     .then(patch)

package/plugin/branding/localization-en.js

@@ -106,6 +106,14 @@ export default {
     searchUmbracoIssues: 'Search Crombolo issues',
     searchUmbracoIssuesOnGithub: 'Search Crombolo issues on GitHub',
   },
+  redirectUrls: {
+    // Followed by `CROMBOLO_TRACK_REDIRECTS`, which `vendor:backoffice` puts in
+    // place of the .NET setting; it tracks when true, the inverse of Umbraco's.
+    disableUrlTrackerInstruction:
+      "Redirect URL tracking is set in the site's environment. To turn it off, set this variable to false:",
+    enableUrlTrackerInstruction:
+      "Redirect URL tracking is set in the site's environment. To turn it on, set this variable to true, or remove it:",
+  },
   defaultdialogs: {
     linkYourConfirm:
       'You are about to link your Crombolo and {0} accounts and you will be redirected to {0} to complete the process.',

package/plugin/branding/sign-in.js

@@ -66,7 +66,38 @@ class CromboloAuthProviderElement extends LitElement {
 
 if (!customElements.get(TAG)) customElements.define(TAG, CromboloAuthProviderElement)
 
+/**
+ * Signing in again after a timeout closes its modal twice.
+ *
+ * `umb-app-auth-modal` submits when the session reports itself authorised, and
+ * `umb-auth-view` calls the same submit as its `onSuccess` once
+ * `makeAuthorizationRequest` returns. Whichever runs first closes the modal and
+ * destroys its value state, so the second's `value = { success: true }` throws
+ * `_subject is undefined` — and the view shows that as a sign-in error, though
+ * the editor is signed in. The second assignment has nothing left to say, so it
+ * is dropped. Patched on the element's prototype, as `tsx-editors.js` patches
+ * upstream, rather than in the vendored bundle.
+ */
+async function guardTimedOutSignIn() {
+  const Modal = await customElements.whenDefined('umb-app-auth-modal')
+  let descriptor
+  for (let proto = Modal.prototype; proto && !descriptor; proto = Object.getPrototypeOf(proto))
+    descriptor = Object.getOwnPropertyDescriptor(proto, 'value')
+  if (!descriptor?.set) return
+  const { get, set } = descriptor
+  Object.defineProperty(Modal.prototype, 'value', {
+    configurable: true,
+    get,
+    set(value) {
+      if (this.__cromboloSubmitted) return
+      set.call(this, value)
+      this.__cromboloSubmitted = true
+    },
+  })
+}
+
 export const onInit = (_host, extensionRegistry) => {
+  void guardTimedOutSignIn()
   extensionRegistry.unregister(VENDORED)
   extensionRegistry.register({
     type: 'authProvider',

package/plugin/branding/theme.css

@@ -68,6 +68,8 @@
   --uui-color-header-surface: var(--crombolo-orange);
   --uui-color-header-contrast: rgb(84 50 31 / 80%);
   --uui-color-header-contrast-emphasis: var(--crombolo-cocoa);
+  /* The active section's marker, dark so it stands out from the white submenu below. */
+  --crombolo-header-current: var(--crombolo-orange-text);
 
   /* Pure white panels on a warm off-white page, so cards still separate. */
   --uui-color-background: var(--crombolo-cream);

package/plugin/bundles-created-overview.js

@@ -101,7 +101,7 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
           version 1.0.0.
         </p>
         <uui-input
-          label="Package name"
+          label="Name"
           placeholder=${pkg?.name ?? ''}
           .value=${this._draft.name}
           @input=${(event) => (this._draft = { ...this._draft, name: event.target.value })}></uui-input>
@@ -166,38 +166,47 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     // look empty on every page change.
     return html`
       <uui-button
-        look="primary"
+        color="default"
+        look="outline"
         href=${`${BUILDER_PATH}/create`}
-        label=${this.localize.term('packager_createPackage')}></uui-button>
+        label="Create"></uui-button>
       ${
         this._loading
           ? html`<div id="loader"><uui-loader></uui-loader></div>`
           : this._items.length === 0
             ? html`<h2 id="empty">${this.localize.term('packager_noPackagesCreated')}</h2>`
             : html`
-            <uui-box headline="Created bundles" style="--uui-box-default-padding:0;">
-              <uui-ref-list>
+            <uui-box headline="Created bundles">
+              <uui-table>
+                <uui-table-head>
+                  <uui-table-head-cell>Name</uui-table-head-cell>
+                  <uui-table-head-cell>Downloads as</uui-table-head-cell>
+                  <uui-table-head-cell></uui-table-head-cell>
+                </uui-table-head>
                 ${repeat(
                   this._items,
                   (item) => item.unique,
                   (item) => html`
-                    <uui-ref-node
-                      name=${item.name}
-                      detail=${this.#detail(item)}
-                      @open=${() => this.#open(item)}>
-                      <uui-action-bar slot="actions">
+                    <uui-table-row>
+                      <uui-table-cell>${item.name}</uui-table-cell>
+                      <uui-table-cell><code>${this.#detail(item)}</code></uui-table-cell>
+                      <uui-table-cell class="buttons">
+                        <uui-button look="secondary" label="Edit" @click=${() => this.#open(item)}></uui-button>
                         <uui-button
-                          @click=${() => this.#edit(item)}
-                          label="Package details"></uui-button>
+                          look="secondary"
+                          label="Name and version"
+                          @click=${() => this.#edit(item)}></uui-button>
                         <uui-button
-                          @click=${() => this.#remove(item)}
-                          label=${this.localize.term('general_delete')}></uui-button>
-                      </uui-action-bar>
-                    </uui-ref-node>
-                    ${this.#renderEditor(item)}
+                          look="secondary"
+                          color="danger"
+                          label=${this.localize.term('general_delete')}
+                          @click=${() => this.#remove(item)}></uui-button>
+                      </uui-table-cell>
+                    </uui-table-row>
                   `,
                 )}
-              </uui-ref-list>
+              </uui-table>
+              ${this._items.map((item) => this.#renderEditor(item))}
             </uui-box>
           `
       }
@@ -238,6 +247,10 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     .problem {
       color: var(--uui-color-danger);
     }
+    .buttons {
+      white-space: nowrap;
+      text-align: right;
+    }
   `
 }
 

package/plugin/bundles-installed.js

@@ -10,6 +10,9 @@
  * What it lists instead is the site's bundle dependencies, which is what
  * "installed" means here: what each one adds, whether its content has been
  * added to this site, and whether its server features are switched on.
+ *
+ * Two columns: the bundles on the left, filtered as you type; the one chosen
+ * on the right, with its details and the button that uninstalls it.
  */
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
@@ -41,6 +44,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     _busy: { state: true },
     _notice: { state: true },
     _installs: { state: true },
+    _filter: { state: true },
+    _selected: { state: true },
   }
 
   constructor() {
@@ -50,6 +55,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     this._busy = ''
     this._notice = ''
     this._installs = true
+    this._filter = ''
+    this._selected = ''
   }
 
   connectedCallback() {
@@ -63,6 +70,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       const result = await listInstalled()
       this._items = result.items ?? []
       this._installs = result.installs !== false
+      if (!this._items.some((item) => item.packageName === this._selected))
+        this._selected = this._items[0]?.packageName ?? ''
     } catch (error) {
       this._notice = error instanceof Error ? error.message : String(error)
     } finally {
@@ -83,72 +92,98 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     }
   }
 
+  #pick(item) {
+    this._selected = item.packageName
+    this.requestUpdate()
+  }
+
+  get #shown() {
+    const words = this._filter.trim().toLowerCase()
+    if (!words) return this._items
+    return this._items.filter((item) =>
+      [item.name, item.packageName, item.description].some((text) =>
+        text?.toLowerCase().includes(words),
+      ),
+    )
+  }
+
   render() {
     if (this._loading) return html`<div id="loader"><uui-loader></uui-loader></div>`
-
+    if (this._items.length === 0)
+      return html`
+        ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+        <uui-box headline="No bundles installed">
+          <p>Install one from the Marketplace tab, and it appears here.</p>
+        </uui-box>
+      `
+    const selected = this._items.find((item) => item.packageName === this._selected)
+    const shown = this.#shown
     return html`
       ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+      <div id="columns">
+        <uui-box headline="Installed bundles" style="--uui-box-default-padding:0;">
+          <div id="filter">
+            <uui-input
+              label="Filter"
+              placeholder="Filter"
+              .value=${this._filter}
+              @input=${(event) => {
+                this._filter = event.target.value
+              }}>
+              <uui-icon name="icon-search" slot="prepend"></uui-icon>
+            </uui-input>
+          </div>
+          ${
+            shown.length === 0
+              ? html`<p class="empty">No bundle matches.</p>`
+              : html`<uui-ref-list>
+                  ${repeat(
+                    shown,
+                    (item) => item.packageName,
+                    (item) => html`<uui-ref-node
+                      name=${item.name}
+                      detail=${`${item.packageName} ${item.version}`}
+                      selectable
+                      select-only
+                      ?selected=${item.packageName === this._selected}
+                      @selected=${() => this.#pick(item)}
+                      @deselected=${() => this.#pick(item)}
+                      @open=${() => this.#pick(item)}></uui-ref-node>`,
+                  )}
+                </uui-ref-list>`
+          }
+        </uui-box>
+        ${selected ? this.#details(selected) : nothing}
+      </div>
+    `
+  }
+
+  #details(item) {
+    return html`<uui-box headline=${item.name}>
+      ${item.description ? html`<p>${item.description}</p>` : nothing}
+      <dl>
+        <dt>npm package</dt>
+        <dd><code>${item.packageName}</code></dd>
+        <dt>Version</dt>
+        <dd>${item.version}</dd>
+        <dt>Adds</dt>
+        <dd class="carries">${carriesTags(item.carries)}</dd>
+        <dt>On this site</dt>
+        <dd class="status">${status(item)}</dd>
+        <dt>Works with</dt>
+        <dd>Crombolo ${item.peerRange}</dd>
+      </dl>
       ${
-        this._items.length === 0
-          ? html`
-            <uui-box headline="No bundles installed">
-              <p>
-                A bundle is one of this site's npm dependencies. Install one from the
-                Marketplace tab, or with <code>bun add</code> in the site directory, and it
-                appears here.
-              </p>
-            </uui-box>
-          `
-          : html`
-            <uui-box headline="Installed bundles">
-              <uui-table>
-                <uui-table-head>
-                  <uui-table-head-cell>Name</uui-table-head-cell>
-                  <uui-table-head-cell>npm package</uui-table-head-cell>
-                  <uui-table-head-cell>Version</uui-table-head-cell>
-                  <uui-table-head-cell>Adds</uui-table-head-cell>
-                  <uui-table-head-cell>On this site</uui-table-head-cell>
-                  <uui-table-head-cell></uui-table-head-cell>
-                </uui-table-head>
-                ${repeat(
-                  this._items,
-                  (item) => item.packageName,
-                  (item) => html`
-                    <uui-table-row>
-                      <uui-table-cell>${item.name}</uui-table-cell>
-                      <uui-table-cell><code>${item.packageName}</code></uui-table-cell>
-                      <uui-table-cell>${item.version}</uui-table-cell>
-                      <uui-table-cell class="carries">${carriesTags(item.carries)}</uui-table-cell>
-                      <uui-table-cell class="status">${status(item)}</uui-table-cell>
-                      <uui-table-cell>
-                        ${
-                          this._installs
-                            ? html`<uui-button
-                                look="secondary"
-                                color="danger"
-                                label="Uninstall"
-                                .state=${this._busy === item.packageName ? 'waiting' : undefined}
-                                @click=${() => this.#uninstall(item)}></uui-button>`
-                            : nothing
-                        }
-                      </uui-table-cell>
-                    </uui-table-row>
-                  `,
-                )}
-              </uui-table>
-              <p class="note">
-                ${
-                  this._installs
-                    ? html`An install writes this site's <code>package.json</code> and
-                        <code>bun.lock</code>. Commit both to keep it across deployments.`
-                    : html`Packages are added and removed by changing this site's
-                        <code>package.json</code> and deploying, so every server has the same ones.`
-                }
-              </p>
-            </uui-box>
-          `
+        this._installs
+          ? html`<uui-button
+              look="primary"
+              color="danger"
+              label="Uninstall"
+              .state=${this._busy === item.packageName ? 'waiting' : undefined}
+              @click=${() => this.#uninstall(item)}></uui-button>`
+          : html`<p class="note">This site adds and removes bundles with a deploy, so every server has the same ones.</p>`
       }
-    `
+    </uui-box>`
   }
 
   static styles = css`
@@ -167,10 +202,42 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       border-left: 3px solid var(--uui-color-positive, #2bc37c);
       background: var(--uui-color-surface-alt, #f3f3f5);
     }
+    #columns {
+      display: grid;
+      grid-template-columns: minmax(240px, 1fr) 2fr;
+      gap: var(--uui-size-layout-1, 24px);
+      align-items: start;
+    }
+    @media (max-width: 800px) {
+      #columns {
+        grid-template-columns: 1fr;
+      }
+    }
+    #filter {
+      padding: var(--uui-size-space-4, 12px);
+    }
+    #filter uui-input {
+      width: 100%;
+    }
+    .empty {
+      padding: 0 var(--uui-size-space-4, 12px) var(--uui-size-space-4, 12px);
+    }
     p {
       max-width: 60ch;
       line-height: 1.5;
     }
+    dl {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: var(--uui-size-space-3, 9px) var(--uui-size-space-5, 18px);
+      margin: 0 0 var(--uui-size-space-5, 18px);
+    }
+    dt {
+      font-weight: 700;
+    }
+    dd {
+      margin: 0;
+    }
     .carries {
       display: flex;
       gap: var(--uui-size-space-2, 6px);
@@ -179,7 +246,6 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       display: block;
     }
     .note {
-      margin-top: var(--uui-size-space-5, 18px);
       opacity: 0.8;
       font-size: 0.9em;
     }