@lapismd/design-core 0.1.2 → 0.3.0

package/dist/shared/forms/chip-autocomplete/ChipAutocomplete.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import "./ChipAutocomplete.css";
+  import XIcon from "@lucide/svelte/icons/x";
+  import type { ComponentProps } from "svelte";
+
+  import * as Tooltip from "../../shadcn/tooltip/index.js";
+  import AutocompleteInput from "../autocomplete-input/AutocompleteInput.svelte";
+
+  type SuggestionPortalProps = ComponentProps<
+    typeof AutocompleteInput
+  >["portalProps"];
+
+  let {
+    value = [],
+    suggestions = [],
+    label = "Tags",
+    showLabel = true,
+    placeholder = "Add item...",
+    id = undefined,
+    embedded = false,
+    uppercase = true,
+    suggestionPortalProps = undefined,
+    /** Validation message; forwarded to AutocompleteInput and marks the chip box. */
+    error = null,
+    onChange = () => {},
+  }: {
+    value?: string[];
+    suggestions?: string[];
+    label?: string;
+    showLabel?: boolean;
+    placeholder?: string;
+    id?: string;
+    embedded?: boolean;
+    uppercase?: boolean;
+    /** Optional portal configuration for the suggestion popover. */
+    suggestionPortalProps?: SuggestionPortalProps;
+    error?: string | null;
+    onChange?: (items: string[]) => void | Promise<void>;
+  } = $props();
+
+  let inputValue = $state("");
+  const fallbackInputId = `chip-autocomplete-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? fallbackInputId);
+  const normalizedItems = $derived(
+    value.map((item) => item.trim()).filter(Boolean),
+  );
+  const availableSuggestions = $derived.by(() => {
+    const existing = new Set(normalizedItems.map((item) => item.toLowerCase()));
+    const seen = new Set<string>();
+    return suggestions
+      .map((suggestion) => suggestion.trim())
+      .filter(Boolean)
+      .filter((suggestion) => {
+        const key = suggestion.toLowerCase();
+        if (existing.has(key) || seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+  });
+
+  function commitItem(rawValue = inputValue) {
+    const item = rawValue.trim().replace(/^,+|,+$/g, "");
+    if (!item) return;
+    if (
+      normalizedItems.some(
+        (current) => current.toLowerCase() === item.toLowerCase(),
+      )
+    ) {
+      inputValue = "";
+      return;
+    }
+    void onChange([...normalizedItems, item]);
+    inputValue = "";
+  }
+
+  function removeItem(item: string) {
+    void onChange(normalizedItems.filter((current) => current !== item));
+  }
+
+  function removeLastItem() {
+    if (normalizedItems.length) removeItem(normalizedItems.at(-1) ?? "");
+  }
+
+  function focusAutocompleteInput(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    if (target.closest("button")) return;
+    if (!(event.currentTarget instanceof HTMLElement)) return;
+    event.currentTarget.querySelector("input")?.focus();
+  }
+</script>
+
+<Tooltip.Provider delayDuration={200}>
+  <div
+    class={`chip-autocomplete ${embedded ? "is-embedded" : ""} ${uppercase ? "" : "is-normal-case"}`}
+    data-ui-component="chip-autocomplete"
+    data-ui-part="chip-autocomplete"
+  >
+    {#if showLabel}
+      <label for={inputId}>{label}</label>
+    {/if}
+    <div
+      class="chip-autocomplete-box"
+      role="group"
+      aria-label={label}
+      data-invalid={error ? "" : undefined}
+      onpointerdown={focusAutocompleteInput}
+    >
+      {#each normalizedItems as item (item)}
+        <Tooltip.Root>
+          <span class="chip">
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span class="chip-label" {...props}>{item}</span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <button
+              type="button"
+              aria-label={`Remove ${item}`}
+              onmousedown={(event) => event.stopPropagation()}
+              onclick={(event) => {
+                event.stopPropagation();
+                removeItem(item);
+              }}
+            >
+              <XIcon size={12} strokeWidth={2} aria-hidden="true" />
+            </button>
+          </span>
+          <Tooltip.Content
+            side="top"
+            sideOffset={4}
+            class="chip-tooltip-content"
+          >
+            {item}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      {/each}
+      <div class="chip-input">
+        <AutocompleteInput
+          id={inputId}
+          bind:value={inputValue}
+          suggestions={availableSuggestions}
+          {placeholder}
+          ariaLabel={label}
+          {error}
+          commitOnComma
+          commitOnBlur
+          commitOnTab
+          portalProps={suggestionPortalProps}
+          onCommit={commitItem}
+          onEmptyBackspace={removeLastItem}
+        />
+      </div>
+    </div>
+  </div>
+</Tooltip.Provider>

package/dist/shared/forms/chip-autocomplete/ChipAutocomplete.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./ChipAutocomplete.css";
+import type { ComponentProps } from "svelte";
+import AutocompleteInput from "../autocomplete-input/AutocompleteInput.svelte";
+type SuggestionPortalProps = ComponentProps<typeof AutocompleteInput>["portalProps"];
+type $$ComponentProps = {
+    value?: string[];
+    suggestions?: string[];
+    label?: string;
+    showLabel?: boolean;
+    placeholder?: string;
+    id?: string;
+    embedded?: boolean;
+    uppercase?: boolean;
+    /** Optional portal configuration for the suggestion popover. */
+    suggestionPortalProps?: SuggestionPortalProps;
+    error?: string | null;
+    onChange?: (items: string[]) => void | Promise<void>;
+};
+declare const ChipAutocomplete: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipAutocomplete = ReturnType<typeof ChipAutocomplete>;
+export default ChipAutocomplete;

package/dist/shared/forms/chip-autocomplete/index.d.ts

@@ -0,0 +1 @@
+export { default as ChipAutocomplete } from "./ChipAutocomplete.svelte";

package/dist/shared/forms/chip-autocomplete/index.js

@@ -0,0 +1 @@
+export { default as ChipAutocomplete } from "./ChipAutocomplete.svelte";

package/dist/shared/forms/code-editor/CodeEditor.css

@@ -0,0 +1,42 @@
+@import "../form.tokens.css";
+
+.cvstudio-code-editor {
+  --mira-code-editor-background: var(--ui-form-code-background);
+  --mira-code-editor-foreground: var(--ui-form-foreground);
+  --mira-code-editor-border: var(--ui-form-border);
+  --mira-code-editor-radius: 0.4rem;
+  --mira-code-editor-focus-ring: var(--ui-form-accent);
+  --mira-code-editor-gutter-background: var(--mira-code-editor-background);
+  --mira-code-editor-active-line: var(--ui-form-active-line);
+  --mira-code-editor-selection: var(--ui-form-selection-strong);
+  --mira-code-editor-popover: var(--ui-form-popover);
+  --mira-code-editor-search-input-hover-border: var(--ui-form-accent);
+  --mira-code-editor-search-muted: var(--ui-form-muted);
+  --mira-code-editor-syntax-keyword: var(--cv-code-keyword, #5b21b6);
+  --mira-code-editor-syntax-keyword-weight: 600;
+  --mira-code-editor-syntax-number: var(--cv-code-constant, #0e726a);
+  --mira-code-editor-syntax-string: var(--cv-code-string, #92400e);
+  --mira-code-editor-syntax-variable: var(--cv-code-function, #075985);
+  --mira-code-editor-syntax-type: var(--cv-code-type, #6b21a8);
+  --mira-code-editor-syntax-property: var(--cv-code-property, #1d4ed8);
+  --mira-code-editor-syntax-comment: var(--ui-form-muted);
+  --mira-code-editor-syntax-invalid: var(--destructive, #dc2626);
+  --mira-font-mono: var(
+    --studio-font-mono,
+    var(
+      --font-mono,
+      "Source Code Pro Variable",
+      "Source Code Pro",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      monospace
+    )
+  );
+
+  margin: 2px;
+  min-width: 0;
+}

package/dist/shared/forms/code-editor/CodeEditor.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import "./CodeEditor.css";
+  import { linter, lintGutter } from "@codemirror/lint";
+  import type { Extension } from "@codemirror/state";
+  import { MiraCodeEditor } from "@lapismd/mira";
+
+  import { createCodeEditorLanguageExtension } from "./code-editor-language";
+  import { parserDiagnostics } from "./code-editor-syntax";
+
+  let {
+    value = $bindable(""),
+    language = "ts",
+    placeholder = "Add Code",
+    minHeight = "10rem",
+    ariaLabel = "Code editor",
+    syntaxDiagnostics = true,
+    extensions = [],
+    onChange,
+  }: {
+    value?: string;
+    language?: string;
+    placeholder?: string;
+    minHeight?: string;
+    ariaLabel?: string;
+    /** Highlight parser-detected syntax errors without executing the code. */
+    syntaxDiagnostics?: boolean;
+    /** Optional host-provided CodeMirror extensions, such as IntelliSense. */
+    extensions?: Extension;
+    onChange?: (value: string) => void;
+  } = $props();
+
+  const syntaxDiagnosticsExtension: Extension = [
+    lintGutter(),
+    linter((view) => parserDiagnostics(view.state), { delay: 450 }),
+  ];
+
+  const editorExtensions = $derived.by<Extension>(() => [
+    createCodeEditorLanguageExtension(language),
+    syntaxDiagnostics ? syntaxDiagnosticsExtension : [],
+    extensions,
+  ]);
+</script>
+
+<div
+  class="cvstudio-code-editor"
+  data-ui-component="code-editor"
+  data-ui-part="code-editor"
+>
+  <MiraCodeEditor
+    bind:value
+    extensions={editorExtensions}
+    {placeholder}
+    {minHeight}
+    {ariaLabel}
+    variant="code"
+    surface="framed"
+    height="content"
+    onChange={(nextValue) => onChange?.(nextValue)}
+  />
+</div>

package/dist/shared/forms/code-editor/CodeEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./CodeEditor.css";
+import type { Extension } from "@codemirror/state";
+type $$ComponentProps = {
+    value?: string;
+    language?: string;
+    placeholder?: string;
+    minHeight?: string;
+    ariaLabel?: string;
+    /** Highlight parser-detected syntax errors without executing the code. */
+    syntaxDiagnostics?: boolean;
+    /** Optional host-provided CodeMirror extensions, such as IntelliSense. */
+    extensions?: Extension;
+    onChange?: (value: string) => void;
+};
+declare const CodeEditor: import("svelte").Component<$$ComponentProps, {}, "value">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/shared/forms/code-editor/code-editor-language.d.ts

@@ -0,0 +1,14 @@
+import type { Extension } from "@codemirror/state";
+export declare const codeEditorLanguageAliases: {
+    readonly javascript: readonly ["js", "javascript", "mjs", "cjs"];
+    readonly jsx: readonly ["jsx"];
+    readonly typescript: readonly ["ts", "typescript"];
+    readonly tsx: readonly ["tsx"];
+    readonly json: readonly ["json"];
+    readonly python: readonly ["python", "py"];
+    readonly java: readonly ["java"];
+    readonly kotlin: readonly ["kotlin", "kt", "kts"];
+    readonly mermaid: readonly ["mermaid"];
+};
+export declare function normalizeCodeEditorLanguage(value: string): string;
+export declare function createCodeEditorLanguageExtension(language: string): Extension;

package/dist/shared/forms/code-editor/code-editor-language.js

@@ -0,0 +1,43 @@
+import { java } from "@codemirror/lang-java";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { python } from "@codemirror/lang-python";
+import { StreamLanguage } from "@codemirror/language";
+import { kotlin } from "@codemirror/legacy-modes/mode/clike";
+import { mermaid } from "codemirror-lang-mermaid";
+export const codeEditorLanguageAliases = {
+    javascript: ["js", "javascript", "mjs", "cjs"],
+    jsx: ["jsx"],
+    typescript: ["ts", "typescript"],
+    tsx: ["tsx"],
+    json: ["json"],
+    python: ["python", "py"],
+    java: ["java"],
+    kotlin: ["kotlin", "kt", "kts"],
+    mermaid: ["mermaid"],
+};
+export function normalizeCodeEditorLanguage(value) {
+    return value.trim().toLowerCase();
+}
+export function createCodeEditorLanguageExtension(language) {
+    const normalized = normalizeCodeEditorLanguage(language);
+    if (codeEditorLanguageAliases.mermaid.includes(normalized))
+        return mermaid();
+    if (codeEditorLanguageAliases.json.includes(normalized))
+        return json();
+    if (codeEditorLanguageAliases.javascript.includes(normalized))
+        return javascript();
+    if (codeEditorLanguageAliases.jsx.includes(normalized))
+        return javascript({ jsx: true });
+    if (codeEditorLanguageAliases.typescript.includes(normalized))
+        return javascript({ typescript: true });
+    if (codeEditorLanguageAliases.tsx.includes(normalized))
+        return javascript({ jsx: true, typescript: true });
+    if (codeEditorLanguageAliases.python.includes(normalized))
+        return python();
+    if (codeEditorLanguageAliases.java.includes(normalized))
+        return java();
+    if (codeEditorLanguageAliases.kotlin.includes(normalized))
+        return StreamLanguage.define(kotlin);
+    return [];
+}

package/dist/shared/forms/code-editor/code-editor-syntax.d.ts

@@ -0,0 +1,7 @@
+import type { EditorState } from "@codemirror/state";
+import type { Diagnostic } from "@codemirror/lint";
+/**
+ * Turns parser error nodes into CodeMirror diagnostics without executing code.
+ * The active language parser is supplied by the editor state.
+ */
+export declare function parserDiagnostics(state: EditorState): Diagnostic[];

package/dist/shared/forms/code-editor/code-editor-syntax.js

@@ -0,0 +1,21 @@
+import { syntaxTree } from "@codemirror/language";
+/**
+ * Turns parser error nodes into CodeMirror diagnostics without executing code.
+ * The active language parser is supplied by the editor state.
+ */
+export function parserDiagnostics(state) {
+    const diagnostics = [];
+    syntaxTree(state).iterate({
+        enter: (node) => {
+            if (!node.type.isError)
+                return;
+            diagnostics.push({
+                from: node.from,
+                to: Math.max(node.from + 1, node.to),
+                severity: "error",
+                message: "Syntax error",
+            });
+        },
+    });
+    return diagnostics;
+}

package/dist/shared/forms/code-editor/index.d.ts

@@ -0,0 +1 @@
+export { default as CodeEditor } from "./CodeEditor.svelte";

package/dist/shared/forms/code-editor/index.js

@@ -0,0 +1 @@
+export { default as CodeEditor } from "./CodeEditor.svelte";

package/dist/shared/forms/code-highlighter/CodeHighlighter.css

@@ -0,0 +1,54 @@
+@import "../form.tokens.css";
+
+[data-ui-component="code-highlighter"] {
+  width: 100%;
+}
+
+[data-ui-part="code-highlighter-pre"] {
+  min-width: 100%;
+  margin: 0;
+  border: 1px solid var(--ui-form-border);
+  border-radius: var(--ui-form-radius);
+  background: var(--ui-form-code-background);
+  color: var(--ui-form-foreground);
+  font-family: var(--ui-form-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1.625;
+  padding: 0.75rem;
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-comment {
+  color: var(--ui-form-muted);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-keyword {
+  color: var(--ui-form-code-keyword, #5b21b6);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-string {
+  color: var(--ui-form-code-string, #92400e);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-value {
+  color: var(--ui-form-code-value, #0e726a);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-function {
+  color: var(--ui-form-code-function, #075985);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-property {
+  color: var(--ui-form-code-property, #1d4ed8);
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-operator {
+  color: var(--ui-form-code-operator, var(--ui-form-foreground));
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-punctuation {
+  color: var(--ui-form-code-punctuation, var(--ui-form-muted));
+}
+
+[data-ui-part="code-highlighter-pre"] .ui-form-code-invalid {
+  color: var(--destructive);
+}

package/dist/shared/forms/code-highlighter/CodeHighlighter.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import "./CodeHighlighter.css";
+  import type { Parser } from "@lezer/common";
+  import { highlightCode } from "@lezer/highlight";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+
+  import { codeHighlighter } from "./code-highlighter";
+
+  type HighlightSegment = {
+    text: string;
+    className: string;
+  };
+
+  let {
+    code,
+    parser,
+    ariaLabel = "Highlighted source",
+  }: {
+    /** The display-ready source text. This component does not edit it. */
+    code: string;
+    /** A Lezer parser for the language represented by `code`. */
+    parser: Parser;
+    /** Labels the read-only source region. The enclosing scroll area is keyboard-reachable. */
+    ariaLabel?: string;
+  } = $props();
+
+  const segments = $derived.by(() => {
+    const next: HighlightSegment[] = [];
+
+    highlightCode(
+      code,
+      parser.parse(code),
+      codeHighlighter,
+      (text, classes) => {
+        next.push({ text, className: classes });
+      },
+      () => {
+        next.push({ text: "\n", className: "" });
+      },
+    );
+
+    return next;
+  });
+</script>
+
+<div data-ui-component="code-highlighter" data-ui-part="code-highlighter">
+  <ScrollArea.Root orientation="horizontal">
+    <pre
+      data-ui-component="code-highlighter"
+      data-ui-part="code-highlighter-pre"
+      class="ui-code-highlighter"
+      role="region"
+      aria-label={ariaLabel}>{#each segments as segment, index (index)}{#if segment.className}<span
+            class={segment.className}>{segment.text}</span
+          >{:else}{segment.text}{/if}{/each}</pre>
+  </ScrollArea.Root>
+</div>

package/dist/shared/forms/code-highlighter/CodeHighlighter.svelte.d.ts

@@ -0,0 +1,13 @@
+import "./CodeHighlighter.css";
+import type { Parser } from "@lezer/common";
+type $$ComponentProps = {
+    /** The display-ready source text. This component does not edit it. */
+    code: string;
+    /** A Lezer parser for the language represented by `code`. */
+    parser: Parser;
+    /** Labels the read-only source region. The enclosing scroll area is keyboard-reachable. */
+    ariaLabel?: string;
+};
+declare const CodeHighlighter: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeHighlighter = ReturnType<typeof CodeHighlighter>;
+export default CodeHighlighter;

package/dist/shared/forms/code-highlighter/code-highlighter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Read-only syntax classes for {@link CodeHighlighter}. Class names are stable
+ * so the rendered source can use the shared `--ui-form-code-*` palette without a
+ * live editor view. Tag mapping mirrors `CodeEditor` highlight coverage.
+ */
+export declare const codeHighlighter: import("@lezer/highlight").Highlighter;

package/dist/shared/forms/code-highlighter/code-highlighter.js

@@ -0,0 +1,35 @@
+import { tagHighlighter, tags } from "@lezer/highlight";
+/**
+ * Read-only syntax classes for {@link CodeHighlighter}. Class names are stable
+ * so the rendered source can use the shared `--ui-form-code-*` palette without a
+ * live editor view. Tag mapping mirrors `CodeEditor` highlight coverage.
+ */
+export const codeHighlighter = tagHighlighter([
+    { tag: [tags.comment, tags.meta], class: "ui-form-code-comment" },
+    {
+        tag: [tags.keyword, tags.atom, tags.bool],
+        class: "ui-form-code-keyword",
+    },
+    {
+        tag: [tags.string, tags.regexp, tags.escape, tags.special(tags.string)],
+        class: "ui-form-code-string",
+    },
+    { tag: tags.number, class: "ui-form-code-value" },
+    {
+        tag: [tags.propertyName, tags.definition(tags.propertyName), tags.typeName],
+        class: "ui-form-code-function",
+    },
+    {
+        tag: [
+            tags.link,
+            tags.variableName,
+            tags.local(tags.variableName),
+            tags.special(tags.variableName),
+            tags.definition(tags.variableName),
+        ],
+        class: "ui-form-code-property",
+    },
+    { tag: tags.operator, class: "ui-form-code-operator" },
+    { tag: tags.punctuation, class: "ui-form-code-punctuation" },
+    { tag: tags.invalid, class: "ui-form-code-invalid" },
+]);

package/dist/shared/forms/code-highlighter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CodeHighlighter } from "./CodeHighlighter.svelte";
+export { codeHighlighter } from "./code-highlighter";

package/dist/shared/forms/code-highlighter/index.js

@@ -0,0 +1,2 @@
+export { default as CodeHighlighter } from "./CodeHighlighter.svelte";
+export { codeHighlighter } from "./code-highlighter";

package/dist/shared/forms/collapsible-item-list/CollapsibleItemList.css

@@ -0,0 +1,99 @@
+@import "../form.tokens.css";
+
+.cv-form-item-list {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.cv-form-item-list > header {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--ui-form-border);
+  padding: 0 0 0.2rem;
+}
+
+.cv-form-item-list-toggle,
+.cv-form-item-list-add {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--ui-form-muted);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.cv-form-item-list-toggle {
+  position: relative;
+  min-width: 0;
+  min-height: 1.5rem;
+  justify-self: stretch;
+  color: var(--ui-form-foreground);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.cv-form-item-list-toggle :global(svg) {
+  position: absolute;
+  top: 50%;
+  left: -1.35rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--ui-form-muted);
+  translate: 0 -50%;
+}
+
+.cv-form-item-list-toggle[aria-expanded="false"] :global(svg) {
+  rotate: -90deg;
+}
+
+.cv-form-item-list > header > small {
+  display: inline-flex;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--ui-form-selection);
+  color: var(--ui-form-accent);
+  font-size: 0.7rem;
+  font-weight: 750;
+}
+
+.cv-form-item-list-add {
+  gap: 0.25rem;
+  width: fit-content;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 0.15rem;
+}
+
+.cv-form-item-list-add :global(svg) {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.cv-form-item-list-toggle:hover,
+.cv-form-item-list-toggle:focus-visible,
+.cv-form-item-list-add:hover,
+.cv-form-item-list-add:focus-visible {
+  color: var(--ui-form-foreground);
+  outline: 0;
+}
+
+.cv-form-item-list-body {
+  display: grid;
+  gap: 0.35rem;
+  padding-left: 1rem;
+}
+
+.cv-form-item-list-content {
+  min-width: 0;
+}