rimecms 0.33.0 → 1.0.0

package/dist/fields/blocks/component/picker/BlockTile.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { capitalize } from '../../../../util/string.js';
+  import { ToyBrick } from '@lucide/svelte';
+  import type { BlocksFieldBlock } from '../../index.js';
+
+  /**
+   * The inside of a type's tile: its thumbnail, or its icon, above its name and description. The
+   * element around it carries `rz-block-tile`: a button in the blocks editor, an item in the
+   * picker.
+   */
+  type Props = { block: BlocksFieldBlock };
+  const { block }: Props = $props();
+
+  const Thumbnail = $derived(block.thumbnail);
+  const Icon = $derived(block.icon ?? ToyBrick);
+</script>
+
+<span class="rz-block-tile__frame" data-thumbnail={Thumbnail ? '' : null}>
+  {#if Thumbnail}
+    <Thumbnail />
+  {:else}
+    <Icon size={18} />
+  {/if}
+</span>
+<span class="rz-block-tile__title">{block.label || capitalize(block.name)}</span>
+{#if block.description}
+  <span class="rz-block-tile__description">{block.description}</span>
+{/if}
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+/* A raised card, muted until hovered or picked. */
+  :global(.rz-block-tile) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-1-5);
+    min-width: 0;
+    padding: var(--rz-size-1-5) var(--rz-size-1-5) var(--rz-size-2);
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    border-radius: var(--rz-radius-xl);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+  }
+
+  :global(.rz-block-tile:hover),
+  :global(.rz-block-tile[data-selected]) {
+    background-image: linear-gradient(var(--rz-bg-hover) 0 0);
+    color: var(--rz-fg);
+  }
+
+  :global(.rz-block-tile[data-selected]) {
+    box-shadow:
+      0 0 0 1px var(--rz-accent-border),
+      var(--rz-shadow-raised);
+  }
+
+  :global(.rz-block-tile:focus-visible) {
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
+  }
+
+  /* 16:10, the thumbnail filling it, or the icon in its middle. */
+  .rz-block-tile__frame {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-subtle);
+
+    &[data-thumbnail] > :global(svg) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  :global(.rz-block-tile:hover) .rz-block-tile__frame,
+  :global(.rz-block-tile[data-selected]) .rz-block-tile__frame {
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-block-tile__title,
+  .rz-block-tile__description {
+    padding-inline: var(--rz-size-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-block-tile__title {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
+
+  .rz-block-tile__description {
+    margin-top: calc(-1 * var(--rz-unit));
+    font-size: var(--rz-text-xs);
+    color: var(--rz-fg-subtle);
+  }
+</style>

package/dist/fields/blocks/component/picker/BlockTile.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { BlocksFieldBlock } from '../../index.js';
+/**
+ * The inside of a type's tile: its thumbnail, or its icon, above its name and description. The
+ * element around it carries `rz-block-tile`: a button in the blocks editor, an item in the
+ * picker.
+ */
+type Props = {
+    block: BlocksFieldBlock;
+};
+declare const BlockTile: import("svelte").Component<Props, {}, "">;
+type BlockTile = ReturnType<typeof BlockTile>;
+export default BlockTile;

package/dist/fields/blocks/index.d.ts

@@ -1,10 +1,12 @@
-import type { FieldBuilder } from '../../core/fields/builders/field-builder.js';
+import type { FieldBuilder, FieldNode, ValueNode } from '../../core/fields/builders/field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { WithoutBuilders } from '../../core/fields/types.js';
+import type { GenericBlock } from '../../core/prototype/types.js';
 import type { Field, FormField } from '../types.js';
+import type { DocumentFormContext } from '../../panel/context/documentForm.svelte.js';
 import type { Dic } from '../../util/types.js';
 import type { IconProps } from '@lucide/svelte';
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 export declare const blocks: (name: string, blocks: BlockBuilder[]) => BlocksBuilder;
 export declare const block: (name: string) => BlockBuilder;
 export declare class BlocksBuilder extends FormFieldBuilder<BlocksField> {
@@ -15,9 +17,17 @@ export declare class BlocksBuilder extends FormFieldBuilder<BlocksField> {
             [x: string]: any;
         } | null;
     }, {}, "">;
+    /**
+     * `default`: the list of cards in the document form.
+     * `summary`: one row, `3 blocks · Edit`, with the blocks edited in focus mode.
+     */
+    layout(layout: 'default' | 'summary'): this;
     localized(): this;
     compile(): any;
     protected generateType(): string;
+    /** One branch per block type, at an index only a document can name, each a table of its own. */
+    protected nodes(): FieldNode[];
+    protected nodesFor(value: unknown): ValueNode[];
 }
 /**
  * Checks if a field is a blocks field.
@@ -27,7 +37,7 @@ export declare const isBlocksField: (field: Field) => field is BlocksField;
  * Checks if a field is a blocks field (raw type).
  */
 export declare const isBlocksFieldRaw: (field: Field) => field is BlocksFieldRaw;
-declare class BlockBuilder {
+export declare class BlockBuilder {
     block: BlocksFieldBlock;
     constructor(name: string);
     /**
@@ -37,8 +47,24 @@ declare class BlockBuilder {
      * block('home').icon(Home)
      */
     icon(component: Component<IconProps>): this;
-    image(url: string): this;
+    /**
+     * The block's picture in the pickers of types to add: a component drawing an `<svg>`, which
+     * fills a 16:10 frame. It draws with `currentColor`, so it follows the light and dark themes.
+     * Without one, the pickers show the icon.
+     * @example
+     * import HeroThumbnail from './thumbnails/Hero.svelte'
+     * block('hero').thumbnail(HeroThumbnail)
+     */
+    thumbnail(component: Component): this;
     renderTitle(render: BlocksFieldBlockRenderTitle): this;
+    /**
+     * The component drawn for the block on the stage of focus mode.
+     * It gets the block value, its path, its fields and the form, so it can show the value,
+     * resolve its relations with `populate` and mount panel fields with `RenderFields`.
+     * @example
+     * block('hero').fields(text('title'), richText('text')).render(HeroRender)
+     */
+    render(component: Component<BlockRenderProps>): this;
     description(description: string): this;
     label(label: string): this;
     fields(...fields: FieldBuilder<Field>[]): this;
@@ -46,9 +72,10 @@ declare class BlockBuilder {
         name: string;
         label?: string;
         description?: string;
-        image?: string;
         icon?: Component<IconProps>;
+        thumbnail?: Component;
         renderTitle?: BlocksFieldBlockRenderTitle;
+        render?: Component<BlockRenderProps>;
         fields: FieldBuilder<Field>[];
     };
     get name(): string;
@@ -58,24 +85,39 @@ declare class BlockBuilder {
 export type BlocksField = FormField & {
     type: 'blocks';
     tree?: boolean;
+    /** `summary`: one row in the form, the blocks edited in focus mode. */
+    layout?: 'default' | 'summary';
     blocks: BlockBuilder[];
 };
 export type BlocksFieldBlockRenderTitle = (args: {
     values: Dic;
     position: number;
 }) => string;
+/** What a block's render component receives. */
+export type BlockRenderProps = {
+    /** The block value, relations as `{ relationTo, documentId }`. */
+    block: GenericBlock;
+    /** `layout.sections.0` */
+    path: string;
+    /** The block's field builders, for `RenderFields`. */
+    fields: FieldBuilder<Field>[];
+    form: DocumentFormContext;
+    /** The block's nested lists, each block in its own selectable wrapper. `children('items')` for one list. */
+    children?: Snippet<[name?: string]>;
+};
 export type BlocksFieldBlock = {
     name: string;
     label?: string;
     description?: string;
-    image?: string;
     icon?: Component<IconProps>;
+    thumbnail?: Component;
     renderTitle?: BlocksFieldBlockRenderTitle;
+    render?: Component<BlockRenderProps>;
     fields: FieldBuilder<Field>[];
 };
 export type BlocksFieldRaw = FormField & {
     type: 'blocks';
     tree?: boolean;
+    layout?: 'default' | 'summary';
     blocks: WithoutBuilders<BlocksFieldBlock>[];
 };
-export {};

package/dist/fields/blocks/index.js

@@ -1,5 +1,5 @@
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
-import { toPascalCase } from '../../util/string.js';
+import { toPascalCase, joinMemberTypes } from '../../util/string.js';
 import dedent from 'dedent';
 import { number } from '../number/index.js';
 import { text } from '../text/index.js';
@@ -22,6 +22,14 @@ export class BlocksBuilder extends FormFieldBuilder {
     get cell() {
         return Cell;
     }
+    /**
+     * `default`: the list of cards in the document form.
+     * `summary`: one row, `3 blocks · Edit`, with the blocks edited in focus mode.
+     */
+    layout(layout) {
+        this.field.layout = layout;
+        return this;
+    }
     localized() {
         if (this.field.blocks.length === 0) {
             throw new Error('localized() must be called after blocks assignment');
@@ -30,18 +38,14 @@ export class BlocksBuilder extends FormFieldBuilder {
         // Set all descendant fields localized
         this.field.blocks = this.field.blocks.map((blockBuilder) => {
             // Add a locale prop in each block
-            const hasAlreadyLocale = !!blockBuilder.block.fields
-                .filter((field) => field instanceof FormFieldBuilder)
-                .find((field) => field.name === 'locale');
+            const hasAlreadyLocale = blockBuilder.block.fields.some((field) => field.name === 'locale');
             if (!hasAlreadyLocale) {
                 blockBuilder.block.fields.push(text('locale').hidden());
             }
             // In each block process fields
             blockBuilder.block.fields = blockBuilder.block.fields.map((field) => {
-                // If type / position / path field do not set as localized
-                // as it's a block property
-                if (field instanceof FormFieldBuilder &&
-                    ['position', 'type', 'path', 'locale'].includes(field.name)) {
+                // A block's own members are not content: type, position, path and locale stay as they are.
+                if (['position', 'type', 'path', 'locale'].includes(field.name)) {
                     return field;
                 }
                 // For all others fields set as localized
@@ -73,7 +77,7 @@ export class BlocksBuilder extends FormFieldBuilder {
             .map((block) => {
             const blockTypeName = `Block${toPascalCase(block.name)}`;
             blockNames.push(blockTypeName);
-            const fieldsType = block.get.fields.map((f) => f.use.generateType()).join(',');
+            const fieldsType = joinMemberTypes(block.get.fields.map((f) => f.use.generateType()));
             return dedent `
         //@shared:start ${blockTypeName}
         export type ${blockTypeName} = {
@@ -86,6 +90,32 @@ export class BlocksBuilder extends FormFieldBuilder {
             .join('\n');
         return `${blocksTypes}\n\n${this.name}: Array<${blockNames.join(' | ')}>,`;
     }
+    /** One branch per block type, at an index only a document can name, each a table of its own. */
+    nodes() {
+        return this.field.blocks.map((block) => ({
+            segment: `#:${block.name}`,
+            fields: block.get.fields,
+            storage: { kind: 'blocks', name: block.name }
+        }));
+    }
+    nodesFor(value) {
+        if (!Array.isArray(value))
+            return [];
+        return value.flatMap((item, index) => {
+            const block = this.field.blocks.find((candidate) => candidate.name === item?.type);
+            // Residual data for a block type the config no longer declares.
+            if (!block)
+                return [];
+            return [
+                {
+                    segment: `${index}:${block.name}`,
+                    fields: block.get.fields,
+                    storage: { kind: 'blocks', name: block.name },
+                    value: item
+                }
+            ];
+        });
+    }
 }
 /**
  * Checks if a field is a blocks field.
@@ -95,7 +125,7 @@ export const isBlocksField = (field) => field.type === 'blocks';
  * Checks if a field is a blocks field (raw type).
  */
 export const isBlocksFieldRaw = (field) => field.type === 'blocks';
-class BlockBuilder {
+export class BlockBuilder {
     block;
     constructor(name) {
         this.block = {
@@ -113,14 +143,33 @@ class BlockBuilder {
         this.block.icon = component;
         return this;
     }
-    image(url) {
-        this.block.image = url;
+    /**
+     * The block's picture in the pickers of types to add: a component drawing an `<svg>`, which
+     * fills a 16:10 frame. It draws with `currentColor`, so it follows the light and dark themes.
+     * Without one, the pickers show the icon.
+     * @example
+     * import HeroThumbnail from './thumbnails/Hero.svelte'
+     * block('hero').thumbnail(HeroThumbnail)
+     */
+    thumbnail(component) {
+        this.block.thumbnail = component;
         return this;
     }
     renderTitle(render) {
         this.block.renderTitle = render;
         return this;
     }
+    /**
+     * The component drawn for the block on the stage of focus mode.
+     * It gets the block value, its path, its fields and the form, so it can show the value,
+     * resolve its relations with `populate` and mount panel fields with `RenderFields`.
+     * @example
+     * block('hero').fields(text('title'), richText('text')).render(HeroRender)
+     */
+    render(component) {
+        this.block.render = component;
+        return this;
+    }
     description(description) {
         this.block.description = description;
         return this;

package/dist/fields/checkbox/component/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
+  import '../../../panel/components/fields/setting.css';
   import { Checkbox } from '../../../panel/components/ui/checkbox/index.js';
   import { slugify } from '../../../util/string.js';
   import type { CheckboxProps } from './props';
@@ -17,52 +18,25 @@
   const inputId = $derived(`${form.key}-${slugify(path)}`);
 </script>
 
-<fieldset class="rz-checkbox-field {config.get.className || ''}" use:fieldset={field}>
-  <div>
+<!-- A row of a card: the name and the hint, then the box. -->
+<fieldset class="rz-checkbox-field rz-setting {config.get.className || ''}" use:fieldset={field}>
+  <div class="rz-setting__row">
+    <div class="rz-setting__text">
+      <Field.LabelFor {config} for={inputId} />
+      <Field.Hint {config} />
+    </div>
     <Checkbox
       class="rz-checkbox-field__input {checkboxErrorClass}"
       checked={field.value}
       {onCheckedChange}
       id={inputId}
     />
-    <Field.LabelFor {config} for={inputId} />
   </div>
-  <Field.Hint {config} />
 </fieldset>
 
 <style>
-  .rz-checkbox-field {
-    margin-top: var(--rz-size-3);
-    margin-bottom: var(--rz-size-3);
-
-    :global {
-      .rz-field-hint {
-        margin-left: var(--rz-size-7);
-      }
-    }
-  }
-
-  .rz-checkbox-field > div {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
-  }
-
-  :global {
-    .rz-render-fields__field[data-type='checkbox']
-      + .rz-render-fields__field[data-type='checkbox'] {
-      .rz-checkbox-field {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .rz-checkbox-field__input {
-    width: var(--rz-size-5);
-    height: var(--rz-size-5);
-  }
-
-  .rz-checkbox--error {
-    background-color: hsl(var(--rz-color-alert));
+  .rz-checkbox-field :global(.rz-checkbox--error) {
+    border-color: var(--rz-danger);
+    background-color: var(--rz-danger);
   }
 </style>

package/dist/fields/checkbox/component/Checkbox.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../../../panel/components/fields/setting.css';
 import { Checkbox } from '../../../panel/components/ui/checkbox/index.js';
 import type { CheckboxProps } from './props';
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;

package/dist/fields/combobox/component/ComboBox.svelte

@@ -46,7 +46,7 @@
           {#if selected}
             {@render label(selected)}
           {:else}
-            {t__('fields.select')}
+            <span class="rz-combobox__placeholder">{t__('fields.select')}</span>
           {/if}
           <ChevronsUpDown class="rz-combobox__chevron" />
         </Button>
@@ -62,7 +62,7 @@
               class="rz-combobox__search"
             />
           {/if}
-          <Command.Empty>Nothing found.</Command.Empty>
+          <Command.Empty>{t__('common.nothing_found')}</Command.Empty>
           <Command.Group>
             {#each options as option, index (index)}
               <Command.Item
@@ -90,14 +90,44 @@
   <Field.Error error={field.error} />
 </fieldset>
 
-<style>
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+/* A well like an input: the picked option, or a quiet placeholder, then the chevron. */
   .rz-combobox-field :global {
     .rz-combobox__trigger.rz-button {
-      min-width: 200px;
-      height: var(--rz-size-11);
+      min-width: var(--rz-size-52);
+      height: var(--rz-input-height);
+      padding-inline: var(--rz-size-3) var(--rz-size-2-5);
       justify-content: space-between;
-      border: 1px solid var(--rz-input-border-color);
-      background-color: hsl(var(--rz-input-bg));
+      color: var(--rz-fg);
+      background-color: var(--rz-bg-well);
+      border: 1px solid var(--rz-border);
+      &:hover {
+    border-color: var(--rz-border-strong);
+  }
+      font-variation-settings: 'wght' 400;
+      font-weight: 400;
+      &:focus-visible {
+        outline: none;
+        border-color: var(--rz-accent-border);
+        box-shadow: 0 0 0 3px var(--rz-ring);
+      }
+    }
+    .rz-combobox__placeholder {
+      color: var(--rz-fg-subtle);
     }
   }
 </style>

package/dist/fields/combobox/component/combobox.css

@@ -3,16 +3,19 @@
   height: var(--rz-size-4);
   width: var(--rz-size-4);
   flex-shrink: 0;
-  opacity: 0.5;
+  color: var(--rz-fg-subtle);
 }
 
 .rz-combobox__content {
-  width: 200px;
+  width: var(--rz-size-52);
   max-height: calc(var(--rz-size-80) - 2px);
   overflow-y: auto;
-  border-radius: var(--rz-radius-md);
-  background-color: var(--rz-popover-bg);
-  padding: 0;
+  border-radius: var(--rz-radius-xl);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+  padding: var(--rz-size-1);
   .rz-command-input {
     padding-top: 0;
     padding-bottom: 0;
@@ -20,14 +23,27 @@
 }
 
 .rz-combobox__item {
-  height: var(--rz-size-11);
+  min-height: var(--rz-size-7);
   justify-content: space-between;
+  border-radius: var(--rz-radius-md);
+  font-size: var(--rz-text-md);
+}
+
+.rz-combobox__item[aria-selected='true'] {
+  background-color: var(--rz-bg-hover);
+}
+
+/* Nothing matches: one quiet line. */
+.rz-combobox__content .rz-command-empty {
+  padding: var(--rz-size-2) var(--rz-size-2-5);
+  color: var(--rz-fg-subtle);
+  font-size: var(--rz-text-sm);
 }
 
 .rz-combobox__check {
-  margin-right: var(--rz-size-2);
-  height: var(--rz-size-4);
-  width: var(--rz-size-4);
+  height: var(--rz-size-3-5);
+  width: var(--rz-size-3-5);
+  color: var(--rz-accent-text);
 }
 
 .rz-combobox__check--hidden {
@@ -37,5 +53,5 @@
 .rz-combobox__option-label {
   display: flex;
   align-items: center;
-  gap: var(--rz-size-3);
+  gap: var(--rz-size-2);
 }

package/dist/fields/date/component/Date.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t__ } from '../../../core/i18n/index.js';
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
   import { Button } from '../../../panel/components/ui/button/index.js';
@@ -44,7 +45,7 @@
     }
   }
 
-  const dateLabel = $derived(date ? locale.dateFormat(date) : 'Select a date');
+  const dateLabel = $derived(date ? locale.dateFormat(date) : t__('fields.select_date'));
 </script>
 
 <fieldset class="rz-date-field {config.get.className || ''}" use:fieldset={field}>
@@ -77,35 +78,65 @@
   <Field.Error error={field.error} />
 </fieldset>
 
-<style>
-  .rz-date-field :global {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-date-field :global {
     .rz-dialog-content.rz-date__dialog-content {
       width: 100px;
       padding: 12rem;
     }
+    /* A well like an input: an icon, then the date or a quiet placeholder. */
     .rz-date__button.rz-button {
-      width: 200px;
+      width: var(--rz-size-52);
       justify-content: flex-start;
-      border: var(--rz-border);
+      gap: var(--rz-size-2);
+      background-color: var(--rz-bg-well);
+      border: 1px solid var(--rz-border);
+      &:hover {
+    border-color: var(--rz-border-strong);
+  }
+      box-shadow: none;
       padding-left: var(--rz-size-3);
       padding-right: var(--rz-size-3);
       height: var(--rz-input-height);
       text-align: left;
-      font-weight: normal;
+      font-variation-settings: 'wght' 400;
+      font-weight: 400;
+      &:focus-visible {
+        outline: none;
+        border-color: var(--rz-accent-border);
+        box-shadow: 0 0 0 3px var(--rz-ring);
+      }
     }
 
     .rz-date__button[data-empty] {
-      color: hsl(var(--rz-color-fg) / 0.7);
+      color: var(--rz-fg-subtle);
     }
 
-    .rz-date__button[data-error] {
-      border-color: var(--rz-color-alert);
+    .rz-date__button.rz-button[data-error] {
+      outline: none;
+      border-color: var(--rz-danger);
+      box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
     }
 
     .rz-date__icon {
-      margin-right: var(--rz-size-2);
-      height: var(--rz-size-4);
-      width: var(--rz-size-4);
+      flex-shrink: 0;
+      height: var(--rz-size-3-5);
+      width: var(--rz-size-3-5);
+      color: var(--rz-fg-subtle);
     }
   }
 </style>