@ticatec/topside-elements 1.0.0

package/dist/layouts/form_field/FormField.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { Direction } from "../../types";
+interface Props {
+    style?: string;
+    theme?: string;
+    label: string;
+    label$style?: string;
+    labelSuffix?: string;
+    label$alignment?: 'center' | 'top';
+    autoHeight?: boolean;
+    required?: boolean;
+    /** 标签与控件的排布方向 */
+    direction?: Direction;
+    class?: string;
+    children: Snippet;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/layouts/form_field/README.md

@@ -0,0 +1,252 @@
+# FormField Component
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `layout` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A form-field wrapper that places a label next to (or above) a single child control, with required-marker, suffix, alignment, and auto-height support. The richer sibling of [CriteriaField](../criteria_field/README.md) — supports both vertical and horizontal layouts, inherits layout from context, and is designed for editing forms (not just filter rows).
+
+## Features
+
+- **Two layouts**: `vertical` (label above field) or `horizontal` (label left of field) — defaults from context, override via prop
+- **Required indicator**: red `*` rendered before the label
+- **Label suffix**: `:` by default; pass `labelSuffix=""` to drop it
+- **Label alignment in horizontal mode**: `center` (default, vertically centered) or `top` (useful for textareas)
+- **Auto-height**: `autoHeight={true}` makes the field fill its container's height — for MemoEditor and similar tall controls
+- **Label styling hook**: `label$style` for inline CSS on just the label
+- **Theme hook**: `data-theme="{theme}"` on the outer wrapper
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import FormField from '@ticatec/topside-elements/FormField';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import FormField from '@ticatec/topside-elements/FormField';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+</script>
+
+<FormField label="Username" required>
+  <TextEditor placeholder="Enter username" />
+</FormField>
+```
+
+The default layout comes from `getLayoutMode()` (Svelte context). If no ancestor has called `setLayoutMode(...)`, it falls back to `'vertical'`.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|-------|-------------|
+| `label` | `string` | _(required)_ | Label text. `labelSuffix` is appended directly to this string inside the same `<span>`. |
+| `required` | `boolean` | `false` | Renders a red `*` before the label text |
+| `labelSuffix` | `string` | `':'` | String appended after the label text. Pass `""` to drop the colon. |
+| `label$alignment` | `'center' \| 'top'` | `'center'` | Label vertical alignment **in horizontal direction only**. `top` aligns the label with the field's first line (useful for textareas). Ignored in vertical direction. |
+| `label$style` | `string \| undefined` | `undefined` | Inline CSS on the label `<div>` |
+| `autoHeight` | `boolean` | `false` | Makes the outer wrapper and content area `height: 100%`. The field flexes to fill height in vertical direction. |
+| `direction` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | Layout mode. Defaults from context, falls back to `'vertical'`. |
+| `style` | `string` | `''` | Inline CSS on the outer wrapper |
+| `class` | `string` | `''` | Extra CSS class on the outer wrapper (in addition to `topside-form-field {direction}`) |
+| `theme` | `string \| undefined` | `undefined` | Set as `data-theme` on the outer wrapper |
+| `children` | `Snippet` |  | The actual form control |
+
+## Layout
+
+Controlled by `direction` (or context). Two modes:
+
+### Vertical (default)
+
+```text
+┌──────────────────────────┐
+│ .field-label   "*Label:" │   ← full width, single line, ellipsis
+├──────────────────────────┤
+│ .field          {children} │  ← full width, flex: 0 0 auto
+└──────────────────────────┘
+```
+
+The `.form-content` is `flex-direction: column`. With `autoHeight={true}`, the field flexes vertically to fill the parent.
+
+### Horizontal
+
+```text
+┌────────────────┬─────────────────────────┐
+│ .field-label   │ .field     {children}    │
+│  "*Label:"     │                           │
+└────────────────┴─────────────────────────┘
+   flex-shrink:0    flex: 1 1 auto
+   width: label-width token
+```
+
+The `.form-content` is `flex-direction: row`. Label width is driven by `--topside-form-field-label-width`. The field absorbs remaining space.
+
+### `autoHeight={true}` behavior
+
+| Layout | What happens |
+|--------|--------------|
+| Vertical | Outer wrapper becomes `height: 100%`; the `.field` becomes `flex: 1 1 auto` so the child control stretches to fill |
+| Horizontal | Outer wrapper becomes `height: 100%`; `.field` becomes `height: 100%`; label wraps (`white-space: wrap`) |
+
+Useful for `MemoEditor` and other tall controls that should fill their container.
+
+## Examples
+
+### Required Field
+
+```svelte
+<FormField label="Email" required>
+  <TextEditor type="email" placeholder="user@example.com" />
+</FormField>
+```
+
+### Top-Aligned Label (for Textareas)
+
+```svelte
+<FormField label="Description" label$alignment="top" direction="horizontal">
+  <MemoEditor placeholder="Enter description..." rows={6} />
+</FormField>
+```
+
+Without `label$alignment="top"`, the label centers vertically against the textarea, which looks odd.
+
+### Custom Label Style
+
+```svelte
+<FormField
+  label="Important Field"
+  label$style="color: #007acc; font-weight: 600;"
+>
+  <TextEditor placeholder="Enter value" />
+</FormField>
+```
+
+### Auto-Height MemoEditor
+
+```svelte
+<div style="height: 320px;">
+  <FormField label="Notes" autoHeight direction="vertical">
+    <MemoEditor placeholder="Enter notes..." />
+  </FormField>
+</div>
+```
+
+The MemoEditor fills the 320px container.
+
+### Forced Horizontal Layout (Ignores Context)
+
+```svelte
+<FormField label="Code" direction="horizontal" labelSuffix="">
+  <TextEditor bind:value={code} />
+</FormField>
+```
+
+### Login Form
+
+```svelte
+<script>
+  import FormField from '@ticatec/topside-elements/FormField';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+  import Button from '@ticatec/topside-elements/Button';
+
+  let username = $state('');
+  let password = $state('');
+</script>
+
+<div style="max-width: 400px;">
+  <FormField label="Username" required>
+    <TextEditor bind:value={username} placeholder="Enter username" />
+  </FormField>
+
+  <FormField label="Password" required>
+    <TextEditor bind:value={password} type="password" placeholder="Enter password" />
+  </FormField>
+
+  <Button type="primary" label="Login" onclick={handleSubmit} />
+</div>
+```
+
+## DOM Structure & CSS
+
+Rendered output (horizontal mode shown):
+
+```html
+<div class="topside-form-field horizontal {className}" data-theme="..." style="...">
+  <div class="form-content">
+    <div class="field-label" style="{label$style}">
+      <!-- only when required={true} -->
+      <span class="required-indicator">*</span>
+      <span>{label}{labelSuffix}</span>
+    </div>
+    <div class="field">
+      <!-- children -->
+    </div>
+  </div>
+</div>
+```
+
+When `autoHeight={true}`, the outer wrapper also gets `class:fit-height`.
+
+### CSS Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--topside-form-field-padding` | `4px 6px` | Outer wrapper padding |
+| `--topside-field-gap` | `8px` | Gap between label and field |
+| `--topside-form-field-label-color` | (theme font color) | Label text color |
+| `--topside-form-field-required-indicator-color` | (theme danger color) | Color of the `*` marker |
+| `--topside-form-field-label-width` | `auto` | **Horizontal only.** Width of the label column. |
+| `--topside-form-field-label-alignment` | `left` | **Horizontal only.** Label text-align. |
+
+### Built-in label styles
+
+```css
+.field-label {
+  color: var(--topside-form-field-label-color);
+  font-size: 0.9em;
+  font-weight: 500;
+  line-height: 1.1em;
+  user-select: none;            /* label text not selectable */
+  align-self: center;           /* default vertical alignment */
+
+  &.vert-top {
+    align-self: flex-start;     /* label$alignment='top' */
+    padding-top: 10px;
+  }
+}
+```
+
+## Behavior Notes
+
+- **Label is not associated with the field** via `<label for="...">`. Same a11y caveat as CriteriaField — see below.
+- **`labelSuffix` is glued to label** inside the same `<span>` — no separator space.
+- **Required `*` is rendered before the label**, not after. So `required` + `label="Name"` + `labelSuffix=":"` produces `*Name:`.
+- **Layout comes from context by default.** Ancestors can call `setLayoutMode('horizontal')` to flip the whole form. The `direction` prop overrides per-field.
+- **Label is non-selectable** (`user-select: none`) — different from CriteriaField, where labels are selectable.
+- **Long labels**: vertical mode truncates with `…`; horizontal mode wraps (`white-space: normal`) unless `autoHeight` is also on (then it becomes `white-space: wrap`).
+
+## Accessibility
+
+- The label is a plain `<div>` with the text inside a `<span>` — **not a real `<label>` element**. Screen readers won't associate it with the wrapped control.
+- For real form semantics, give the inner control an `id` and render a `<label for="...">` yourself, or accept the limitation for layout-only use cases.
+- The `*` required indicator has no ARIA tagging. Screen readers will read it as "asterisk". Pair with `aria-required="true"` on the inner control.
+- No built-in error UI — render errors in your `children` snippet if needed.
+
+## Best Practices
+
+1. **Use context to set form-wide layout.** Call `setLayoutMode('horizontal' | 'vertical')` once at the form root; let FormField inherit.
+2. **Use `label$alignment="top"` in horizontal mode for tall controls** (textarea, code editor) so the label aligns with the first line.
+3. **Set `--topside-form-field-label-width` globally** so all horizontal labels in the form align consistently.
+4. **Use `autoHeight={true}`** for MemoEditor / code editors that should fill their container.
+5. **Required asterisks are visual only.** Add `aria-required="true"` to the inner control for screen-reader users.
+
+## Related Components
+
+- [CriteriaField](../criteria_field/README.md) — simpler sibling for filter forms (vertical-only, no required indicator)
+- [TextEditor](../../form/text_editor/README.md) — common child control
+- [MemoEditor](../../form/memo_editor/README.md) — multi-line editor; pair with `autoHeight`

package/dist/layouts/form_field/README_CN.md

@@ -0,0 +1,251 @@
+# FormField 表单字段组件
+
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `layout` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+表单字段 wrapper：在单个子控件旁边（或上方）放一个标签，支持必填标记、后缀、对齐方式、自动高度等。是 [CriteriaField](../criteria_field/README_CN.md) 的增强版 —— 同时支持纵向 / 横向布局，从 context 继承布局，专为编辑表单设计（不只是筛选行）。
+
+## 功能特性
+
+- **两种布局**：`vertical`（标签在上）或 `horizontal`（标签在左）—— 默认从 context 读，可 prop 覆盖
+- **必填标记**：标签前显示红色 `*`
+- **标签后缀**：默认 `:`；传 `labelSuffix=""` 去掉
+- **横向模式下的标签对齐**：`center`（默认，垂直居中）或 `top`（适用于 textarea）
+- **自动高度**：`autoHeight={true}` 让字段填满容器高度 —— 用于 MemoEditor 等高控件
+- **标签样式钩子**：`label$style` 仅作用于标签
+- **主题钩子**：外层 wrapper 暴露 `data-theme="{theme}"`
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```typescript
+import FormField from '@ticatec/topside-elements/FormField';
+```
+
+## 基本用法
+
+```svelte
+<script>
+  import FormField from '@ticatec/topside-elements/FormField';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+</script>
+
+<FormField label="用户名" required>
+  <TextEditor placeholder="输入用户名" />
+</FormField>
+```
+
+默认 layout 来自 `getLayoutMode()`（Svelte context）。如果祖先没调过 `setLayoutMode(...)`，fallback 是 `'vertical'`。
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `label` | `string` | _(必填)_ | 标签文字。`labelSuffix` 直接拼到这个字符串后面，渲染在同一个 `<span>` 里 |
+| `required` | `boolean` | `false` | 在标签文字前渲染红色 `*` |
+| `labelSuffix` | `string` | `':'` | 标签文字后追加的字符串。传 `""` 去掉冒号 |
+| `label$alignment` | `'center' \| 'top'` | `'center'` | **仅横向布局下**的标签垂直对齐。`top` 让标签对齐字段第一行（textarea 适用）。纵向模式下被忽略 |
+| `label$style` | `string \| undefined` | `undefined` | 标签 `<div>` 的内联 CSS |
+| `autoHeight` | `boolean` | `false` | 外层 wrapper 和内容区变 `height: 100%`。纵向布局下字段 flex 撑满高度 |
+| `direction` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | 布局模式。默认从 context 读，fallback `'vertical'` |
+| `style` | `string` | `''` | 外层 wrapper 的内联 CSS |
+| `class` | `string` | `''` | 追加到外层 wrapper 的额外 CSS 类（除 `topside-form-field {direction}` 之外） |
+| `theme` | `string \| undefined` | `undefined` | 设为外层 wrapper 的 `data-theme` |
+| `children` | `Snippet \| undefined` | `undefined` | 实际的表单控件 |
+
+## 布局
+
+由 `direction`（或 context）控制。两种模式：
+
+### Vertical（默认）
+
+```text
+┌──────────────────────────┐
+│ .field-label   "*标签：" │   ← 整宽，单行，溢出加省略号
+├──────────────────────────┤
+│ .field         {children} │  ← 整宽，flex: 0 0 auto
+└──────────────────────────┘
+```
+
+`.form-content` 是 `flex-direction: column`。开了 `autoHeight={true}` 后，字段纵向 flex 撑满父容器。
+
+### Horizontal
+
+```text
+┌────────────────┬─────────────────────────┐
+│ .field-label   │ .field     {children}    │
+│  "*标签："     │                           │
+└────────────────┴─────────────────────────┘
+   flex-shrink:0    flex: 1 1 auto
+   宽度: label-width 令牌
+```
+
+`.form-content` 是 `flex-direction: row`。标签宽度由 `--topside-form-field-label-width` 控制。字段吸收剩余空间。
+
+### `autoHeight={true}` 的行为
+
+| 布局 | 会发生什么 |
+|------|-----------|
+| 纵向 | 外层 wrapper 变 `height: 100%`；`.field` 变 `flex: 1 1 auto`，子控件拉伸填满 |
+| 横向 | 外层 wrapper 变 `height: 100%`；`.field` 变 `height: 100%`；标签换行（`white-space: wrap`） |
+
+适合 `MemoEditor` 和其他需要填满容器的高控件。
+
+## 示例
+
+### 必填字段
+
+```svelte
+<FormField label="邮箱" required>
+  <TextEditor type="email" placeholder="user@example.com" />
+</FormField>
+```
+
+### 顶部对齐标签（适用于 textarea）
+
+```svelte
+<FormField label="描述" label$alignment="top" direction="horizontal">
+  <MemoEditor placeholder="输入描述..." rows={6} />
+</FormField>
+```
+
+不传 `label$alignment="top"`，标签会相对 textarea 垂直居中，看起来很怪。
+
+### 自定义标签样式
+
+```svelte
+<FormField
+  label="重要字段"
+  label$style="color: #007acc; font-weight: 600;"
+>
+  <TextEditor placeholder="输入值" />
+</FormField>
+```
+
+### 自动高度 MemoEditor
+
+```svelte
+<div style="height: 320px;">
+  <FormField label="备注" autoHeight direction="vertical">
+    <MemoEditor placeholder="输入备注..." />
+  </FormField>
+</div>
+```
+
+MemoEditor 会填满 320px 容器。
+
+### 强制横向布局（忽略 context）
+
+```svelte
+<FormField label="代码" direction="horizontal" labelSuffix="">
+  <TextEditor bind:value={code} />
+</FormField>
+```
+
+### 登录表单
+
+```svelte
+<script>
+  import FormField from '@ticatec/topside-elements/FormField';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+  import Button from '@ticatec/topside-elements/Button';
+
+  let username = $state('');
+  let password = $state('');
+</script>
+
+<div style="max-width: 400px;">
+  <FormField label="用户名" required>
+    <TextEditor bind:value={username} placeholder="输入用户名" />
+  </FormField>
+
+  <FormField label="密码" required>
+    <TextEditor bind:value={password} type="password" placeholder="输入密码" />
+  </FormField>
+
+  <Button type="primary" label="登录" onclick={handleSubmit} />
+</div>
+```
+
+## DOM 结构与 CSS
+
+实际渲染（横向模式）：
+
+```html
+<div class="topside-form-field horizontal {className}" data-theme="..." style="...">
+  <div class="form-content">
+    <div class="field-label" style="{label$style}">
+      <!-- 仅 required={true} 时 -->
+      <span class="required-indicator">*</span>
+      <span>{label}{labelSuffix}</span>
+    </div>
+    <div class="field">
+      <!-- children -->
+    </div>
+  </div>
+</div>
+```
+
+`autoHeight={true}` 时，外层 wrapper 还会加 `class:fit-height`。
+
+### CSS 变量
+
+| 变量 | 默认值 | 描述 |
+|------|--------|------|
+| `--topside-form-field-padding` | `4px 6px` | 外层 wrapper 的 padding |
+| `--topside-field-gap` | `8px` | 标签与字段之间的间距 |
+| `--topside-form-field-label-color` | （主题文字色） | 标签文字色 |
+| `--topside-form-field-required-indicator-color` | （主题危险色） | `*` 标记的颜色 |
+| `--topside-form-field-label-width` | `auto` | **仅横向。** 标签列宽度 |
+| `--topside-form-field-label-alignment` | `left` | **仅横向。** 标签 text-align |
+
+### 标签内置样式
+
+```css
+.field-label {
+  color: var(--topside-form-field-label-color);
+  font-size: 0.9em;
+  font-weight: 500;
+  line-height: 1.1em;
+  user-select: none;            /* 标签不可选中 */
+  align-self: center;           /* 默认垂直对齐 */
+
+  &.vert-top {
+    align-self: flex-start;     /* label$alignment='top' */
+    padding-top: 10px;
+  }
+}
+```
+
+## 行为说明
+
+- **标签没有通过 `<label for="...">` 与字段关联**。同 CriteriaField 的 a11y 警告 —— 见下
+- **`labelSuffix` 直接粘在标签后**，渲染在同一个 `<span>` 里 —— 没有分隔空格
+- **必填 `*` 渲染在标签之前**，不是之后。所以 `required` + `label="姓名"` + `labelSuffix="："` 渲染成 `*姓名：`
+- **layout 默认从 context 读。** 祖先可以调 `setLayoutMode('horizontal')` 翻转整个表单。`direction` prop 单字段覆盖
+- **标签不可选中**（`user-select: none`）—— 跟 CriteriaField 不同（那里的标签是可选中的）
+- **长标签**：纵向模式用 `…` 截断；横向模式正常换行（`white-space: normal`），开了 `autoHeight` 后变成 `white-space: wrap`
+
+## 无障碍访问
+
+- 标签是普通 `<div>`，文字在 `<span>` 里 —— **不是真正的 `<label>` 元素**。屏幕阅读器不会把它和包裹的控件关联
+- 要真正的表单语义，给内部控件加 `id`，自己渲染 `<label for="...">`，或接受这个限制（纯布局场景）
+- `*` 必填标记没有 ARIA 标签。屏幕阅读器会读成"星号"。配合内部控件的 `aria-required="true"`
+
+## 最佳实践
+
+1. **用 context 设置表单级布局。** 表单根处调一次 `setLayoutMode('horizontal' | 'vertical')`，让 FormField 继承
+2. **横向模式下高控件用 `label$alignment="top"`**（textarea、代码编辑器），让标签对齐第一行
+3. **全局设 `--topside-form-field-label-width`**，让表单里所有横向标签对齐一致
+4. **MemoEditor / 代码编辑器用 `autoHeight={true}`**，让它们填满容器
+5. **必填星号只是视觉。** 给内部控件加 `aria-required="true"` 照顾屏幕阅读器用户
+
+## 相关组件
+
+- [CriteriaField](../criteria_field/README_CN.md) —— 筛选表单用的简化版（仅纵向、无必填标记）
+- [TextEditor](../../form/text_editor/README_CN.md) —— 常用子控件
+- [MemoEditor](../../form/memo_editor/README_CN.md) —— 多行编辑器，配合 `autoHeight`

package/dist/layouts/form_field/index.d.ts

@@ -0,0 +1,2 @@
+import FormField from "./FormField.svelte";
+export default FormField;

package/dist/layouts/form_field/index.js

@@ -0,0 +1,2 @@
+import FormField from "./FormField.svelte";
+export default FormField;

package/dist/layouts/form_panel/flex_form/CellField.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import FormField from "../../form_field";
+
+    interface Props {
+        span?: number;
+        label?: string;
+        style?: string;
+        label$style?: string;
+        required?: boolean;
+        theme?: string;
+        children?: Snippet;
+    }
+
+    let {
+        span = 1,
+        label = "Label",
+        style = '',
+        label$style = '',
+        required = false,
+        theme,
+        children
+    }: Props = $props();
+
+    const generateCss = (sp: number): string => {
+        if (isNaN(sp) || sp < 1) {
+            sp = 1;
+        } else if (sp > 12) {
+            sp = 12;
+        }
+        return `width: ${sp * 100 / 12}%`;
+    };
+
+    const cellCss = $derived(generateCss(span));
+    const combinedStyle = $derived(`${style}; ${cellCss}`);
+</script>
+
+<FormField {theme} {label} style={combinedStyle} {label$style} {required}>
+    {#if children}
+        {@render children()}
+    {/if}
+</FormField>

package/dist/layouts/form_panel/flex_form/CellField.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    span?: number;
+    label?: string;
+    style?: string;
+    label$style?: string;
+    required?: boolean;
+    theme?: string;
+    children?: Snippet;
+}
+declare const CellField: import("svelte").Component<Props, {}, "">;
+type CellField = ReturnType<typeof CellField>;
+export default CellField;

package/dist/layouts/form_panel/flex_form/EmptyCell.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    interface Props {
+        span?: number;
+    }
+
+    let {span = 1}: Props = $props();
+
+    const generateCss = (sp: number): string => {
+        if (isNaN(sp) || sp < 1) {
+            sp = 1;
+        } else if (sp > 12) {
+            sp = 12;
+        }
+        return `width: ${sp * 100 / 12}%`;
+    };
+
+    const cellCss = $derived(generateCss(span));
+</script>
+
+<div class="cell-field" style={cellCss}></div>
+
+<style>
+    .cell-field {
+        flex: 0 0 auto;
+    }
+</style>

package/dist/layouts/form_panel/flex_form/EmptyCell.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    span?: number;
+}
+declare const EmptyCell: import("svelte").Component<Props, {}, "">;
+type EmptyCell = ReturnType<typeof EmptyCell>;
+export default EmptyCell;

package/dist/layouts/form_panel/flex_form/FlexForm.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+
+    interface Props {
+        style?: string;
+        theme?: string;
+        children?: Snippet;
+    }
+
+    let {
+        style = '',
+        theme,
+        children
+    }: Props = $props();
+</script>
+
+<div class="flex-form" data-theme={theme} {style}>
+    <div>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .flex-form {
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+        padding: var(--topside-form-container-padding);
+    }
+
+    .flex-form > div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        position: relative;
+        justify-items: start;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+        flex-direction: row;
+        row-gap: var(--topside-form-row-gap);
+    }
+</style>

package/dist/layouts/form_panel/flex_form/FlexForm.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    style?: string;
+    theme?: string;
+    children?: Snippet;
+}
+declare const FlexForm: import("svelte").Component<Props, {}, "">;
+type FlexForm = ReturnType<typeof FlexForm>;
+export default FlexForm;