rimecms 1.0.0 → 1.1.0

package/dist/fields/text/component/TextInline.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { TextAreaFieldBuilder } from '../../textarea/index.js';
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import { capitalize } from '../../../util/string.js';
+  import type { TextFieldBuilder } from '../index.js';
+
+  type Props = {
+    path: string;
+    config: TextFieldBuilder | TextAreaFieldBuilder;
+    form: DocumentFormContext;
+    /** The element drawn: `h2`, `p`… `span` by default. */
+    as?: string;
+    class?: string;
+  };
+  const { path, config, form, as = 'span', class: className }: Props = $props();
+
+  const field = $derived(form.useField<string>(path, config));
+  /** A textarea keeps its lines; a text is one. */
+  const multiline = $derived(config.type === 'textarea');
+  let element = $state<HTMLElement>();
+
+  // The value goes into the element only when it differs from what the element shows: the caret
+  // stays where it is while typing, and a change made in the inspector shows here. The element
+  // has no children of Svelte's to lose.
+  $effect(() => {
+    const value = field.value ?? '';
+    // eslint-disable-next-line svelte/no-dom-manipulating
+    if (element && element.textContent !== value) element.textContent = value;
+  });
+
+  function oninput() {
+    if (!element) return;
+    // Emptied, the element keeps no stray line break, so its placeholder shows again.
+    // eslint-disable-next-line svelte/no-dom-manipulating
+    if (!element.textContent) element.replaceChildren();
+    field.value = element.textContent ?? '';
+  }
+
+  /** In a text, Enter adds nothing. */
+  function onkeydown(event: KeyboardEvent) {
+    if (!multiline && event.key === 'Enter') event.preventDefault();
+  }
+
+  /** Pasted into a text, line breaks become spaces. */
+  function onpaste(event: ClipboardEvent) {
+    if (multiline) return;
+    event.preventDefault();
+    const text = (event.clipboardData?.getData('text/plain') ?? '').replace(/\s*\r?\n\s*/g, ' ');
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(document.createTextNode(text));
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    oninput();
+  }
+</script>
+
+<!-- A text edited where a block render draws it: the render's own element, its tag and its class. -->
+<svelte:element
+  this={as}
+  bind:this={element}
+  class="rz-text-inline {className ?? ''}"
+  contenteditable={field.editable ? 'plaintext-only' : 'false'}
+  role="textbox"
+  tabindex="0"
+  aria-multiline={multiline}
+  aria-label={config.get.label || capitalize(config.name)}
+  data-multiline={multiline ? '' : null}
+  data-placeholder={config.get.placeholder || capitalize(config.name)}
+  data-error={field.error ? '' : null}
+  {oninput}
+  {onkeydown}
+  {onpaste}
+></svelte:element>
+
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
+
+/* 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. */
+/* The render's own text: no frame of its own while edited, as a rich text in place. */
+  .rz-text-inline {
+    border-radius: var(--rz-radius-sm);
+    outline: none;
+    cursor: text;
+
+    &[data-multiline] {
+      white-space: pre-wrap;
+    }
+    &[data-error] {
+      outline: 1px solid var(--rz-danger);
+      outline-offset: 2px;
+    }
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--rz-fg-subtle);
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/fields/text/component/TextInline.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TextAreaFieldBuilder } from '../../textarea/index.js';
+import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+import type { TextFieldBuilder } from '../index.js';
+type Props = {
+    path: string;
+    config: TextFieldBuilder | TextAreaFieldBuilder;
+    form: DocumentFormContext;
+    /** The element drawn: `h2`, `p`… `span` by default. */
+    as?: string;
+    class?: string;
+};
+declare const TextInline: import("svelte").Component<Props, {}, "">;
+type TextInline = ReturnType<typeof TextInline>;
+export default TextInline;

package/dist/fields/textarea/component/TextArea.svelte

@@ -28,7 +28,7 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/fields/tree/component/TreeBlock.svelte

@@ -164,7 +164,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -184,7 +184,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     border-radius: var(--rz-radius-xl);
   }
 
@@ -197,8 +197,8 @@
     background-color: transparent;
   }
 
-  /* Inside a group, a block or a stage card: a hairline, no second fill. */
-  :global(:is(.rz-group-field__content, .rz-block__fields, .rz-stage__fields)) .rz-tree-item {
+  /* Inside a group, a block or the inspector: a hairline, no second fill. */
+  :global(:is(.rz-group-field__content, .rz-block__fields, .rz-inspector__fields)) .rz-tree-item {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--rz-border);
   }

package/dist/index.d.ts

@@ -1,14 +1,7 @@
-import { getI18nContext, setI18nContext } from './core/i18n/context.js';
-import i18n, { createI18n, t__ } from './core/i18n/index.js';
-import { cache } from './core/plugins/cache/index.js';
-import { openSse } from './core/plugins/sse/index.js';
-import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
-import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
-import LiveProvider from './panel/components/sections/live/Provider.svelte';
+import i18n, { t__ } from './core/i18n/index.js';
 export type { Dictionaries, I18n, PanelLanguage, Translate } from './core/i18n/index.js';
 export { definePlugin } from './core/plugins/index.js';
-export type { SSEEvent, SSEHandler } from './core/plugins/sse/index.js';
-export { cache, createI18n, getI18nContext, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, setI18nContext, t__ };
+export { i18n, t__ };
 declare module 'rimecms' {
     interface RegisterCollection {
     }

package/dist/index.js

@@ -1,9 +1,4 @@
-import { getI18nContext, setI18nContext } from './core/i18n/context.js';
-import i18n, { createI18n, t__ } from './core/i18n/index.js';
-import { cache } from './core/plugins/cache/index.js';
-import { openSse } from './core/plugins/sse/index.js';
-import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
-import LiveEdit from './panel/components/sections/live/LiveEdit.svelte';
-import LiveProvider from './panel/components/sections/live/Provider.svelte';
+// rimecms: what a config and the panel import. A site page imports rimecms/public.
+import i18n, { t__ } from './core/i18n/index.js';
 export { definePlugin } from './core/plugins/index.js';
-export { cache, createI18n, getI18nContext, i18n, LiveConsumer, LiveEdit, LiveProvider, openSse, setI18nContext, t__ };
+export { i18n, t__ };

package/dist/{panel/components/sections/live → live}/Consumer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
-  import { getLiveContext } from '../../../context/live.svelte.js';
-  import type { WithRelationPopulated } from '../../../../core/fields/types.js';
+  import { getLiveContext } from './context.svelte.js';
+  import type { WithRelationPopulated } from '../core/fields/types.js';
   import type { Snippet } from 'svelte';
 
   let { child, data } = $props<{

package/dist/{panel/components/sections/live → live}/Consumer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithRelationPopulated } from '../../../../core/fields/types.js';
+import type { WithRelationPopulated } from '../core/fields/types.js';
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
     props: {

package/dist/{panel/components/sections/live → live}/LiveEdit.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T">
   import { browser } from '$app/environment';
   import { page } from '$app/state';
-  import { getLiveContext } from '../../../context/live.svelte.js';
-  import { normalizeFieldPath } from '../../../../util/string.js';
+  import { getLiveContext } from './context.svelte.js';
+  import { normalizeFieldPath } from '../util/string.js';
   import { onDestroy, type Snippet } from 'svelte';
 
   type Props = {

package/dist/{panel/components/sections/live → live}/Provider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import { setLiveContext } from '../../../context/live.svelte.js';
+  import { setLiveContext } from './context.svelte.js';
   import { onMount, type Snippet } from 'svelte';
 
   const { children }: { children: Snippet } = $props();

package/dist/{panel/context/live.svelte.d.ts → live/context.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GenericDoc } from '../../core/prototype/types.js';
+import type { GenericDoc } from '../core/prototype/types.js';
 import type { BeforeNavigate } from '@sveltejs/kit';
 export declare const LIVE_KEY: unique symbol;
 /**

package/dist/{panel/context/live.svelte.js → live/context.svelte.js}

@@ -1,9 +1,9 @@
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
-import { PARAMS } from '../../core/constants.js';
+import { PARAMS } from '../core/constants.js';
 import { getContext, setContext } from 'svelte';
-import { getValueAtPath, setValueAtPath } from '../../util/object.js';
-import { populate } from '../util/populate.js';
+import { getValueAtPath, setValueAtPath } from '../util/object.js';
+import { populate } from '../fields/relation/populate.js';
 export const LIVE_KEY = Symbol('rime.live');
 function createStore(href) {
     let enabled = $state(false);

package/dist/panel/components/fields/Error.svelte

@@ -27,7 +27,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/fields/FieldsPreview.svelte

@@ -45,7 +45,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/fields/FieldsPreviewTrigger.svelte

@@ -10,7 +10,7 @@
   {@render children()}
 </button>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/fields/Hint.svelte

@@ -23,7 +23,7 @@
   </p>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/fields/setting.css

@@ -3,9 +3,9 @@
  * Rows that follow each other share one card, a hairline between them.
  *
  *   ╭────────────────────────────────────╮
- *   │ Show in the navigation        ━●  │
+ *   │ Show in the navigation        ━●   │
  *   ├────────────────────────────────────┤
- *   │ Hide from search engines      ●━  │
+ *   │ Hide from search engines      ●━   │
  *   ╰────────────────────────────────────╯
  */
 
@@ -13,7 +13,7 @@
   background-color: var(--rz-bg-raised);
   box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
   border-radius: var(--rz-radius-xl);
 }
 
@@ -33,8 +33,8 @@
   margin-top: var(--rz-size-0-5);
 }
 
-/* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
-:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-stage__fields)
+/* Inside a group, a block, a tree item or the inspector: a hairline, no second fill. */
+:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-inspector__fields)
   .rz-setting {
   background-color: transparent;
   box-shadow: 0 0 0 1px var(--rz-border);
@@ -72,7 +72,7 @@
 }
 
 /* Without a fill, the earlier row's edge is the hairline: the later one hides its own. */
-:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-stage__fields)
+:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-inspector__fields)
   .rz-render-fields__field--full:is([data-type='toggle'], [data-type='checkbox']):has(
     > .rz-setting[data-visible]
   )

package/dist/panel/components/sections/auth/AuthForm.svelte

@@ -25,7 +25,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -68,7 +68,7 @@
       background-color: var(--rz-bg-raised);
       box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
 
       @media (min-width: 1024px) {
         margin: 1rem;

package/dist/panel/components/sections/collection/Avatar.svelte

@@ -20,7 +20,7 @@
 
 <span class="rz-avatar rz-avatar--{size}" aria-hidden="true">{initials}</span>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/bulk-upload/FileDrop.svelte

@@ -83,7 +83,7 @@
   />
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/bulk-upload/PageDrop.svelte

@@ -111,7 +111,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -142,7 +142,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     font-variation-settings: 'wght' 500;
     font-weight: 500;
     display: flex;
@@ -158,7 +158,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     position: fixed;
     right: var(--rz-size-4);
     bottom: var(--rz-size-4);

package/dist/panel/components/sections/collection/bulk-upload/UploadProgress.svelte

@@ -25,7 +25,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/folder/Folder.svelte

@@ -29,7 +29,7 @@
   {@render children()}
 </h3>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/folder/FolderWithActions.svelte

@@ -210,7 +210,7 @@
 
 <FolderEdit bind:open={editFolderDialogOpen} {folder} {collection} />
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -230,7 +230,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: flex;
     width: 100%;
     height: calc(10.5 * var(--rz-unit));

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte

@@ -137,7 +137,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/header/DisplayMode.svelte

@@ -30,7 +30,7 @@
   {/each}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -69,7 +69,6 @@
 
     &[aria-pressed='true'] {
       background-color: var(--rz-bg-knob);
-      box-shadow: var(--rz-shadow-knob);
       color: var(--rz-fg);
     }
 

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -59,7 +59,7 @@
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -85,7 +85,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     border-radius: var(--rz-radius-lg);
     overflow: hidden;
 

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -59,7 +59,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -110,7 +110,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/tree/CollectionTree.svelte

@@ -122,7 +122,7 @@
   {/if}
 {/key}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte

@@ -99,7 +99,7 @@
   </div>
 {/key}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -47,7 +47,7 @@
   }
 
   .rz-upload-preview-cell {
-    --size: var(--rz-upload-preview-cell-size, var(--rz-size-9));
+    --size: var(--rz-upload-preview-cell-size, var(--rz-size-8));
     display: flex;
     width: var(--size);
     height: var(--size);

package/dist/panel/components/sections/commands/CommandButton.svelte

@@ -42,7 +42,7 @@
   </Button>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/AuthAPIKeyDialog.svelte

@@ -55,7 +55,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/AuthFooter.svelte

@@ -77,7 +77,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -97,7 +97,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: grid;
     gap: var(--rz-size-5);
     padding: var(--rz-size-4) var(--rz-size-3-5);

package/dist/panel/components/sections/document/AutoSaveBanner.svelte

@@ -86,7 +86,7 @@
   </div>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -122,7 +122,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
   }
   .rz-auto-save-banner__actions {
     display: flex;

package/dist/panel/components/sections/document/ButtonStatus.svelte

@@ -103,7 +103,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/ChangeSlugDialog.svelte

@@ -106,7 +106,7 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

package/dist/panel/components/sections/document/DocumentChildren.svelte

@@ -73,7 +73,7 @@
   </section>
 {/if}
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -129,7 +129,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     display: grid;
     overflow: hidden;
     border-radius: var(--rz-radius-lg);