@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/llm-model-DrswiczZ.js

@@ -0,0 +1,64 @@
+import "./chunk-Rp0pCe6z.js";
+import { sr as DEFAULT_FALLBACK_MODELS } from "./runtime-common-ClpqhbwG.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { D as markdownEscape } from "./helpers-BN6ReMzK.js";
+import { S as BoxelSelect } from "./components-Ct_agx0G.js";
+import { s as Component } from "./card-api-Dzje0smT.js";
+import { t as string_default } from "./string-BHZZwNlZ.js";
+//#region ../base/llm-model.gts
+var LLM_MODEL_OPTIONS = DEFAULT_FALLBACK_MODELS.map((m) => ({
+	value: m.modelId,
+	label: m.displayName
+}));
+var LLMModelEdit = class extends Component {
+	options = LLM_MODEL_OPTIONS;
+	get selected() {
+		let current = this.args.model;
+		if (!current) return null;
+		return this.options.find((option) => option.value === current) ?? {
+			value: current,
+			label: current
+		};
+	}
+	onSelect = (option) => {
+		this.args.set?.(option?.value ?? null);
+	};
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "8kxu7Jvj",
+			"block": "[[[8,[32,0],null,[[\"@placeholder\",\"@options\",\"@selected\",\"@onChange\",\"@disabled\"],[\"Select LLM model\",[30,0,[\"options\"]],[30,0,[\"selected\"]],[30,0,[\"onSelect\"]],[52,[30,1],false,true]]],[[\"default\"],[[[[1,\"\\n  \"],[1,[30,2,[\"label\"]]],[1,\"\\n\"]],[2]]]]]],[\"@canEdit\",\"option\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/base/llm-model.gts",
+			"scope": () => [BoxelSelect],
+			"isStrictMode": true
+		}), this);
+	}
+};
+var LLMModelField = class extends string_default {
+	static displayName = "LLM Model";
+	static edit = LLMModelEdit;
+	static markdown = class Markdown extends Component {
+		get text() {
+			let value = this.args.model;
+			if (value == null || value === "") return "";
+			return markdownEscape(DEFAULT_FALLBACK_MODELS.find((m) => m.modelId === value)?.displayName ?? value);
+		}
+		static {
+			setComponentTemplate(templateFactory({
+				"id": "XAigsjbt",
+				"block": "[[[1,[30,0,[\"text\"]]]],[],[]]",
+				"moduleName": "/home/runner/work/boxel/boxel/packages/base/llm-model.gts",
+				"isStrictMode": true
+			}), this);
+		}
+	};
+};
+(globalThis.__boxelBundledBaseScopedCSS ??= {})["llm-model"] = {
+	"css": [],
+	"imports": ["card-api", "string"]
+};
+(globalThis.__boxelBundledBaseIdentities ??= {})["llm-model"] = { "default": LLMModelField };
+//#endregion
+export { LLMModelField as default };

package/bundled-test-harness/assets/login-C-EIG0-Q.css

@@ -0,0 +1,543 @@
+
+  /* zero specificity default sizing */
+  [data-scopedcss-2a525b4516-7b3b0da76c]:where(.boxel-loading-indicator) {
+    --loading-indicator-size: var(
+      --boxel-loading-indicator-size,
+      var(--boxel-icon-sm)
+    );
+    --loading-indicator-color: var(
+      --boxel-loading-indicator-color,
+      currentColor
+    );
+    --icon-color: var(--loading-indicator-color);
+    display: inline-block;
+    width: var(--loading-indicator-size);
+    height: var(--loading-indicator-size);
+    flex-shrink: 0;
+  }
+
+  svg[data-scopedcss-2a525b4516-7b3b0da76c] {
+    display: block;
+    width: var(--loading-indicator-size);
+    height: var(--loading-indicator-size);
+  }
+
+  g[data-scopedcss-2a525b4516-7b3b0da76c] {
+    stroke: var(--icon-color, currentColor);
+  }
+
+  /* Only animate if the user has not said that they want reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    svg[data-scopedcss-2a525b4516-7b3b0da76c] {
+      animation: var(--boxel-infinite-spin-animation);
+    }
+  }
+
+  @keyframes boxel-spin-data-scopedcss-2a525b4516-7b3b0da76c {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @layer boxelComponentL1 {
+    /* Button */
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-loading-indicator-size: var(
+        --boxel-button-loading-icon-size,
+        var(--boxel-icon-xs)
+      );
+
+      display: inline-flex;
+      justify-content: center;
+      height: min-content;
+      align-items: center;
+      border-radius: var(
+        --boxel-button-border-radius,
+        var(--radius, var(--boxel-border-radius))
+      );
+      transition: var(
+        --boxel-button-transition,
+        var(--boxel-transition-properties)
+      );
+
+      /* kind variants + disabled state */
+      border: var(--boxel-button-border, none);
+      color: var(--boxel-button-text-color);
+      background-color: var(--boxel-button-color);
+
+      /* size variants */
+      font: var(--boxel-button-font, 700 var(--boxel-font-sm));
+      font-family: inherit;
+      min-height: var(--boxel-button-min-height);
+      min-width: var(--boxel-button-min-width);
+      padding: var(--boxel-button-padding);
+      letter-spacing: var(--boxel-button-letter-spacing, var(--boxel-lsp));
+      box-shadow: var(--boxel-button-box-shadow);
+    }
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not(.rectangular) {
+      border-radius: var(--boxel-button-border-radius, 100px);
+    }
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:is(.pill) {
+      border-radius: var(
+        --boxel-button-border-radius,
+        var(--boxel-border-radius-pill)
+      );
+    }
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover {
+      background-color: color-mix(
+        in oklab,
+        var(--boxel-button-color) 90%,
+        transparent
+      );
+    }
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:focus-visible {
+      outline-color: var(--ring, var(--boxel-highlight));
+      outline-offset: 2px;
+    }
+
+    .loading-indicator[data-scopedcss-087c0205a8-290bc269b4] {
+      /* boxel-ui passes this as the indicator's @color. */
+      --boxel-loading-indicator-color: var(--boxel-button-text-color);
+      margin-right: var(
+        --boxel-button-loading-indicator-gap,
+        var(--boxel-sp-xxs)
+      );
+    }
+
+    /* select disabled buttons and links that don't have href */
+
+    .boxel-button[data-scopedcss-087c0205a8-290bc269b4]:disabled:not(.loading),
+    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not([href]),
+    a.boxel-button[href=''][data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-box-shadow: none;
+      background-color: var(
+        --boxel-button-disabled-background,
+        var(--boxel-button-color)
+      );
+      border: var(--boxel-button-disabled-border, var(--boxel-button-border));
+      color: var(
+        --boxel-button-disabled-foreground,
+        var(--boxel-button-text-color)
+      );
+      opacity: var(--boxel-button-disabled-opacity, 0.5);
+      cursor: default;
+    }
+
+    /* the a element does not have a disabled attribute. Clicking will still trigger event listeners */
+    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:not([href]),
+    a.boxel-button[href=''][data-scopedcss-087c0205a8-290bc269b4] {
+      pointer-events: none;
+    }
+
+    /*
+      loading state.
+      this should only be relevant for buttons - links shouldn't need it.
+      We want to preserve the "normal" styling of the button but not allow interaction
+    */
+    .loading[data-scopedcss-087c0205a8-290bc269b4] {
+      pointer-events: none;
+    }
+
+    /* overwrite the global style for links in global.css */
+    a.boxel-button[data-scopedcss-087c0205a8-290bc269b4]:hover {
+      color: var(--boxel-button-text-color);
+    }
+
+    /**
+    * Kind variants - variants that control the colors on a button
+    *
+    * The @kind argument on the button component should create a corresponding class with format
+    * kind-@kind
+    *
+    * Classes for the @kind argument can control the following properties:
+    *
+    * --boxel-button-color (css "background-color" property)
+    * --boxel-button-border (css shorthand "border" property)
+    * --boxel-button-text-color (css "color" property)
+    *
+    */
+    .kind-default[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-color: var(
+        --boxel-button-default-background,
+        var(--background)
+      );
+      --boxel-button-text-color: var(
+        --boxel-button-default-foreground,
+        var(--foreground)
+      );
+      --boxel-button-border: 1px solid
+        var(--boxel-button-default-border, var(--border));
+    }
+    .kind-default[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-default[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-color: var(
+        --boxel-button-default-active-background,
+        var(--accent)
+      );
+      --boxel-button-text-color: var(
+        --boxel-button-default-active-foreground,
+        var(--accent-foreground)
+      );
+      --boxel-button-border: 1px solid
+        var(--boxel-button-default-active-border, var(--border));
+    }
+
+    .kind-primary[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-color: var(
+        --boxel-button-primary-background,
+        var(--primary)
+      );
+      --boxel-button-text-color: var(
+        --boxel-button-primary-foreground,
+        var(--primary-foreground)
+      );
+    }
+    .kind-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-color: var(
+        --boxel-button-primary-active-background,
+        var(--primary)
+      );
+    }
+
+    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-color: var(
+        --boxel-button-secondary-background,
+        var(--secondary)
+      );
+      --boxel-button-text-color: var(
+        --boxel-button-secondary-foreground,
+        var(--secondary-foreground)
+      );
+      --boxel-button-border: 1px solid
+        var(--boxel-button-secondary-border, var(--secondary));
+    }
+    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-secondary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-border: 1px solid
+        var(--boxel-button-secondary-active-border, var(--secondary));
+    }
+
+    .kind-muted[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-color: var(--muted);
+      --boxel-button-text-color: var(--foreground);
+    }
+    .kind-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover {
+      background-color: color-mix(
+        in oklab,
+        var(--muted) 96%,
+        var(--foreground)
+      );
+    }
+
+    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-color: var(--destructive);
+      --boxel-button-text-color: var(--destructive-foreground);
+    }
+    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-destructive[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-color: var(
+        --boxel-button-destructive-active-background,
+        var(--destructive)
+      );
+    }
+
+    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4] {
+      /* transparent background and border */
+      --boxel-button-color: var(--boxel-button-ghost-background, transparent);
+      --boxel-button-text-color: var(
+        --boxel-button-ghost-foreground,
+        inherit
+      );
+    }
+    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-text-only[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-color: color-mix(
+        in oklab,
+        currentColor 10%,
+        transparent
+      );
+      --boxel-button-text-color: currentColor;
+    }
+
+    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4] {
+      /* always dark */
+      --boxel-button-color: var(--boxel-dark);
+      --boxel-button-text-color: var(--boxel-light);
+    }
+    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .kind-primary-dark[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      --boxel-button-color: color-mix(
+        in oklab,
+        var(--boxel-dark) 80%,
+        var(--boxel-light)
+      );
+    }
+
+    /**
+    * Size variants - variants that control the size and spacing of a button
+    *
+    * The @size argument on the button component should create a corresponding class with format
+    * size-@size
+    *
+    * Classes for the @size argument can control the following properties:
+    *
+    * --boxel-button-padding
+    * --boxel-button-min-width
+    * --boxel-button-min-height
+    * --boxel-button-font
+    * --boxel-button-letter-spacing
+    * --boxel-loading-indicator-size
+    *
+    */
+
+    .size-extra-small[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
+      --boxel-button-min-height: var(--boxel-button-xs);
+      --boxel-button-min-width: 5rem;
+      --boxel-button-loading-icon-size: var(--boxel-icon-2xs);
+      --boxel-button-font: 500 var(--boxel-font-xs);
+      --boxel-button-letter-spacing: var(--boxel-lsp-lg);
+    }
+    .size-extra-small.rectangular[data-scopedcss-087c0205a8-290bc269b4] {
+      border-radius: var(--boxel-border-radius-sm);
+    }
+
+    .size-small[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-sm);
+      --boxel-button-min-height: var(--boxel-button-sm);
+      --boxel-button-min-width: 5rem;
+    }
+    .size-small.rectangular[data-scopedcss-087c0205a8-290bc269b4] {
+      border-radius: var(--boxel-border-radius-sm);
+    }
+
+    .size-base[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-xl);
+      --boxel-button-min-height: var(--boxel-button-sm);
+      --boxel-button-min-width: 5rem;
+    }
+
+    /* tall but thinner button */
+    .size-tall[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: var(--boxel-sp-2xs) var(--boxel-sp-lg);
+      --boxel-button-min-height: var(--boxel-button-tall);
+      --boxel-button-min-width: 5rem;
+      --boxel-button-letter-spacing: var(--boxel-lsp-xs);
+    }
+
+    /*
+      extra tall button mainly used in mobile screens
+      touchable as it's bigger
+      */
+    .size-touch[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-lg);
+      --boxel-button-min-height: var(--boxel-button-touch);
+      --boxel-button-min-width: 5rem;
+      --boxel-button-loading-icon-size: var(--boxel-icon-sm);
+      --boxel-button-font: 600 var(--boxel-font);
+      --boxel-button-letter-spacing: var(--boxel-lsp-xs);
+    }
+
+    /* auto size properties & smallest padding size */
+    .size-auto[data-scopedcss-087c0205a8-290bc269b4] {
+      --boxel-button-padding: 2px;
+    }
+
+    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4],
+    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4],
+    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4] {
+      min-height: initial;
+      min-width: initial;
+      padding-block: 0;
+      padding-inline: 0;
+      background: none;
+      border: none;
+      border-radius: var(--boxel-border-radius-xs);
+      font-family: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      box-shadow: none;
+    }
+    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4] {
+      color: var(--boxel-button-link-foreground, var(--foreground));
+    }
+    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .boxel-button.kind-link[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      color: var(--boxel-button-link-active-foreground, var(--foreground));
+      text-decoration: underline;
+    }
+    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4] {
+      color: var(--boxel-button-link-primary-foreground, var(--primary));
+    }
+    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .boxel-button.kind-link-primary[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      color: var(
+        --boxel-button-link-primary-active-foreground,
+        color-mix(in oklab, var(--primary) 80%, black)
+      );
+    }
+    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4] {
+      color: var(
+        --boxel-button-link-muted-foreground,
+        var(--muted-foreground)
+      );
+    }
+    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):hover,
+    .boxel-button.kind-link-muted[data-scopedcss-087c0205a8-290bc269b4]:not(:disabled):active {
+      color: var(
+        --boxel-button-link-muted-active-foreground,
+        var(--foreground)
+      );
+    }
+  }
+
+  .auth-btn[data-scopedcss-110d79932d-0ba5950cda] {
+    width: 100%;
+  }
+  .auth-btn[data-scopedcss-110d79932d-0ba5950cda] .boxel-loading-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* Until the frame reports the height of its fields, it takes the
+     height they will have, worked out from the same tokens, so nothing
+     around it moves when they arrive. A layout that changes that height
+     sets --credential-fields-height. */
+  .credential-fields[data-scopedcss-cc21998a3e-6534d31eb3] {
+    --credential-layout: wide;
+    --_control: calc(
+      var(--boxel-outline-width) * 2 + var(--boxel-form-control-height)
+    );
+    --_label: calc(var(--boxel-body-font-size) * 1.1);
+    --_auth-field: calc(
+      var(--boxel-sp) + var(--_label) + var(--boxel-sp-4xs) +
+        var(--_control)
+    );
+    position: relative;
+    display: block;
+    width: 100%;
+    height: var(--credential-fields-height, var(--_reserved, 0));
+  }
+  .credential-fields--login[data-scopedcss-cc21998a3e-6534d31eb3],
+  .credential-fields--cli-login[data-scopedcss-cc21998a3e-6534d31eb3],
+  .credential-fields--register[data-scopedcss-cc21998a3e-6534d31eb3],
+  .credential-fields--reset[data-scopedcss-cc21998a3e-6534d31eb3] {
+    --_reserved: calc(var(--_auth-field) * 2);
+  }
+  .credential-fields--change-password[data-scopedcss-cc21998a3e-6534d31eb3] {
+    --_reserved: calc(
+      var(--_control) * 3 + var(--settings-modal-gap, 0px) * 2
+    );
+  }
+  .credential-fields--confirm-password[data-scopedcss-cc21998a3e-6534d31eb3] {
+    --_reserved: calc(var(--boxel-sp-4xs) + var(--_control));
+  }
+  .credential-fields-frame[data-scopedcss-cc21998a3e-6534d31eb3] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: transparent;
+  }
+
+  form[data-scopedcss-980806eb28-619fcb723e] {
+    display: flex;
+    flex-direction: column;
+  }
+  .title[data-scopedcss-980806eb28-619fcb723e] {
+    font: 600 var(--boxel-font-md);
+    color: var(--foreground);
+    margin-bottom: var(--boxel-sp-sm);
+    padding: 0;
+  }
+  .subtitle[data-scopedcss-980806eb28-619fcb723e] {
+    margin: 0 0 var(--boxel-sp-lg);
+    color: var(--foreground);
+    font: var(--boxel-font-sm);
+    line-height: 1.4;
+  }
+  .forgot-password[data-scopedcss-980806eb28-619fcb723e] {
+    --host-outline-offset: 2px;
+    margin-top: var(--boxel-sp-4xs);
+    margin-bottom: var(--boxel-sp-lg);
+    margin-left: auto;
+  }
+  .google-button[data-scopedcss-980806eb28-619fcb723e] {
+    margin-top: var(--boxel-sp-sm);
+    gap: var(--boxel-sp-xs);
+  }
+  .google-g[data-scopedcss-980806eb28-619fcb723e] {
+    width: 1.125rem;
+    height: 1.125rem;
+    flex-shrink: 0;
+  }
+  .divider[data-scopedcss-980806eb28-619fcb723e] {
+    display: flex;
+    align-items: center;
+    gap: var(--boxel-sp-sm);
+    margin: var(--boxel-sp-lg) 0 var(--boxel-sp-xs);
+  }
+  .divider[data-scopedcss-980806eb28-619fcb723e]::before,
+  .divider[data-scopedcss-980806eb28-619fcb723e]::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.18);
+  }
+  .divider-label[data-scopedcss-980806eb28-619fcb723e] {
+    color: var(--muted-foreground);
+    font: 600 var(--boxel-font-xs);
+    letter-spacing: var(--boxel-lsp-lg);
+    text-transform: uppercase;
+  }
+  .error[data-scopedcss-980806eb28-619fcb723e] {
+    color: var(--boxel-error-100);
+    padding: 0;
+    font: 500 var(--boxel-font-xs);
+    margin: var(--boxel-sp-2xs) auto 0 auto;
+  }
+  .register-prompt[data-scopedcss-980806eb28-619fcb723e] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--boxel-sp-3xs);
+    margin: var(--boxel-sp) 0 0;
+    font: 500 var(--boxel-font-sm);
+  }
+  .register-prompt-text[data-scopedcss-980806eb28-619fcb723e] {
+    color: var(--muted-foreground);
+  }
+  .register-link[data-scopedcss-980806eb28-619fcb723e] {
+    --host-outline-offset: 2px;
+  }
+
+  .centered-loading[data-scopedcss-3c09b9d01d-34c5be2bbd] {
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--boxel-sp);
+    text-align: center;
+  }
+  .loading-title[data-scopedcss-3c09b9d01d-34c5be2bbd] {
+    font: 600 var(--boxel-font-md);
+    color: var(--foreground);
+  }
+  .loading-spinner[data-scopedcss-3c09b9d01d-34c5be2bbd] {
+    --boxel-loading-indicator-size: var(--boxel-icon-md);
+    --loading-indicator-color: var(--boxel-highlight);
+  }
+  .error[data-scopedcss-3c09b9d01d-34c5be2bbd] {
+    color: var(--boxel-error-100);
+    padding: 0;
+    font: 500 var(--boxel-font-xs);
+    margin: var(--boxel-sp-2xs) auto 0 auto;
+  }