@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/patterns/pipeline/index.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../../primitives/status.tsx';
+export declare const HOOKS: readonly ['pipeline', 'pipeline-step', 'pipeline-arrow', 'pipeline-step-label', 'pipeline-step-value', 'pipeline-step-node'];
+export type PipelineStep = {
+    id: string;
+    label: string;
+    value: string | number;
+    href?: string | null;
+    tone?: Tone;
+};
+/**
+ * A process read left to right: the stages of a thing, and how many are sitting
+ * in each one.
+ *
+ * Not a `Progress`, which answers "how far along is this one record". This
+ * answers "where is the work piling up", so every stage carries its own count
+ * and none of them is a percentage of the others — a stage can hold more than
+ * the one before it, and a bar that normalised them would say the opposite.
+ *
+ * An ordered list, because the order is the meaning. The connecting rail and the
+ * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
+ * and `pipeline-arrow`; both are decoration for an order the markup already
+ * states, which is why the arrow carries no text to announce.
+ */
+export declare const Pipeline: (props: {
+    label: string;
+    steps: readonly PipelineStep[];
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/pipeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/pipeline/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAEvD,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,CACZ,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAqBnF,CAAA"}

package/dist/patterns/pipeline/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'pipeline',
+    'pipeline-step',
+    'pipeline-arrow',
+    'pipeline-step-label',
+    'pipeline-step-value',
+    'pipeline-step-node',
+];
+/**
+ * A process read left to right: the stages of a thing, and how many are sitting
+ * in each one.
+ *
+ * Not a `Progress`, which answers "how far along is this one record". This
+ * answers "where is the work piling up", so every stage carries its own count
+ * and none of them is a percentage of the others — a stage can hold more than
+ * the one before it, and a bar that normalised them would say the opposite.
+ *
+ * An ordered list, because the order is the meaning. The connecting rail and the
+ * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
+ * and `pipeline-arrow`; both are decoration for an order the markup already
+ * states, which is why the arrow carries no text to announce.
+ */
+export const Pipeline = (props) => (_jsx("ol", { "data-ui": "pipeline", "aria-label": props.label, children: each(props.steps, (step) => step.id, (step) => (_jsxs("li", { "data-ui": "pipeline-step", "data-tone": step.tone ?? 'neutral', children: [_jsx("span", { "data-ui": "pipeline-arrow", "aria-hidden": "true" }), step.href ? (_jsx("a", { "data-ui": "pipeline-step-label", href: step.href, children: step.label })) : (_jsx("span", { "data-ui": "pipeline-step-label", children: step.label })), _jsx("span", { "data-ui": "pipeline-step-value", children: String(step.value) }), _jsx("span", { "data-ui": "pipeline-step-node", "aria-hidden": "true" })] }))) }));
+//# sourceMappingURL=index.js.map

package/dist/patterns/pipeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/pipeline/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,qBAAqB;IACrB,qBAAqB;IACrB,oBAAoB;CACZ,CAAA;AAUV;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CACpG,wBAAY,UAAU,gBAAa,KAAK,CAAC,KAAK,YAC3C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,yBAAY,eAAe,eAAY,IAAI,CAAC,IAAI,IAAI,SAAS,aAC3D,0BAAc,gBAAgB,iBAAa,MAAM,GAAG,EACnD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,uBAAW,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAC7C,IAAI,CAAC,KAAK,GACT,CACL,CAAC,CAAC,CAAC,CACF,0BAAc,qBAAqB,YAAE,IAAI,CAAC,KAAK,GAAQ,CACxD,EACD,0BAAc,qBAAqB,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,EAC/D,0BAAc,oBAAoB,iBAAa,MAAM,GAAG,IACrD,CACN,CACF,GACE,CACN,CAAA"}

package/dist/patterns/pipeline/styles.css

@@ -0,0 +1,168 @@
+@layer ket.app {
+  /* A process read left to right. The rail is drawn as two half-lines per step
+     rather than one line behind the row, so it starts at the first node and stops
+     at the last instead of running off both ends of the grid. */
+  :where([data-kv-design-system]) [data-ui="pipeline"] {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"] {
+    position: relative;
+    display: grid;
+    padding-bottom: var(--kv-space-5);
+    justify-items: center;
+    gap: var(--kv-space-1);
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]::before,
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]::after {
+    position: absolute;
+    bottom: 0.3125rem;
+    height: 1px;
+    background: var(--kv-color-line-strong);
+    content: "";
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]::before {
+    left: 0;
+    right: 50%;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]::after {
+    left: 50%;
+    right: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]:first-child::before,
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]:last-child::after {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step-node"] {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 50%;
+    background: var(--kv-text-muted);
+    translate: -50% 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"][data-tone="info"] [data-ui="pipeline-step-node"] {
+    background: var(--kv-color-info);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="pipeline-step"][data-tone="positive"]
+    [data-ui="pipeline-step-node"] {
+    background: var(--kv-color-positive);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="pipeline-step"][data-tone="warning"]
+    [data-ui="pipeline-step-node"] {
+    background: var(--kv-color-warning);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="pipeline-step"][data-tone="danger"]
+    [data-ui="pipeline-step-node"] {
+    background: var(--kv-color-danger);
+  }
+
+  /* Two borders rotated into a chevron, sat on the column boundary. Drawn rather
+     than written, because the order is already in the markup and an arrow
+     character here would be read out between every pair of stages. */
+  :where([data-kv-design-system]) [data-ui="pipeline-arrow"] {
+    position: absolute;
+    top: 0.25rem;
+    left: 0;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-top: 1.5px solid var(--kv-text-muted);
+    border-right: 1.5px solid var(--kv-text-muted);
+    rotate: 45deg;
+    translate: -50% 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step"]:first-child [data-ui="pipeline-arrow"] {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step-label"] {
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) a[data-ui="pipeline-step-label"]:hover {
+    color: var(--kv-text-main);
+    text-decoration: underline;
+  }
+
+  :where([data-kv-design-system]) [data-ui="pipeline-step-value"] {
+    color: var(--kv-text-main);
+    font-size: var(--kv-text-2xl);
+    font-weight: var(--kv-weight-bold);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+  }
+
+  /* Too narrow for four columns, so the rail turns and runs down the left. The
+     stages keep their order and their counts; only the axis changes. */
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="pipeline"] {
+      grid-auto-columns: auto;
+      grid-auto-flow: row;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step"] {
+      padding-bottom: var(--kv-space-3);
+      padding-left: var(--kv-space-6);
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      justify-items: start;
+      text-align: left;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step"]::before,
+    :where([data-kv-design-system]) [data-ui="pipeline-step"]::after {
+      left: 0.3125rem;
+      right: auto;
+      width: 1px;
+      height: 50%;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step"]::before {
+      top: 0;
+      bottom: auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step"]::after {
+      top: 50%;
+      bottom: auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step-node"] {
+      top: 50%;
+      bottom: auto;
+      left: 0.3125rem;
+      translate: -50% -50%;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-arrow"] {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="pipeline-step-value"] {
+      font-size: var(--kv-text-lg);
+    }
+  }
+}

package/dist/patterns/pipeline.d.ts

@@ -1,29 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-import type { Tone } from '../primitives/status.tsx';
-export declare const HOOKS: readonly ['pipeline', 'pipeline-step', 'pipeline-arrow', 'pipeline-step-label', 'pipeline-step-value', 'pipeline-step-node'];
-export type PipelineStep = {
-    id: string;
-    label: string;
-    value: string | number;
-    href?: string | null;
-    tone?: Tone;
-};
-/**
- * A process read left to right: the stages of a thing, and how many are sitting
- * in each one.
- *
- * Not a `Progress`, which answers "how far along is this one record". This
- * answers "where is the work piling up", so every stage carries its own count
- * and none of them is a percentage of the others — a stage can hold more than
- * the one before it, and a bar that normalised them would say the opposite.
- *
- * An ordered list, because the order is the meaning. The connecting rail and the
- * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
- * and `pipeline-arrow`; both are decoration for an order the markup already
- * states, which is why the arrow carries no text to announce.
- */
-export declare const Pipeline: (props: {
-    label: string;
-    steps: readonly PipelineStep[];
-}) => TemplateResult;
+export * from './pipeline/index.tsx';
 //# sourceMappingURL=pipeline.d.ts.map

package/dist/patterns/pipeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,CACZ,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAqBnF,CAAA"}
+{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/patterns/pipeline.js

@@ -1,26 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-export const HOOKS = [
-    'pipeline',
-    'pipeline-step',
-    'pipeline-arrow',
-    'pipeline-step-label',
-    'pipeline-step-value',
-    'pipeline-step-node',
-];
-/**
- * A process read left to right: the stages of a thing, and how many are sitting
- * in each one.
- *
- * Not a `Progress`, which answers "how far along is this one record". This
- * answers "where is the work piling up", so every stage carries its own count
- * and none of them is a percentage of the others — a stage can hold more than
- * the one before it, and a bar that normalised them would say the opposite.
- *
- * An ordered list, because the order is the meaning. The connecting rail and the
- * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
- * and `pipeline-arrow`; both are decoration for an order the markup already
- * states, which is why the arrow carries no text to announce.
- */
-export const Pipeline = (props) => (_jsx("ol", { "data-ui": "pipeline", "aria-label": props.label, children: each(props.steps, (step) => step.id, (step) => (_jsxs("li", { "data-ui": "pipeline-step", "data-tone": step.tone ?? 'neutral', children: [_jsx("span", { "data-ui": "pipeline-arrow", "aria-hidden": "true" }), step.href ? (_jsx("a", { "data-ui": "pipeline-step-label", href: step.href, children: step.label })) : (_jsx("span", { "data-ui": "pipeline-step-label", children: step.label })), _jsx("span", { "data-ui": "pipeline-step-value", children: String(step.value) }), _jsx("span", { "data-ui": "pipeline-step-node", "aria-hidden": "true" })] }))) }));
+export * from './pipeline/index.js';
 //# sourceMappingURL=pipeline.js.map

package/dist/patterns/pipeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,qBAAqB;IACrB,qBAAqB;IACrB,oBAAoB;CACZ,CAAA;AAUV;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CACpG,wBAAY,UAAU,gBAAa,KAAK,CAAC,KAAK,YAC3C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,yBAAY,eAAe,eAAY,IAAI,CAAC,IAAI,IAAI,SAAS,aAC3D,0BAAc,gBAAgB,iBAAa,MAAM,GAAG,EACnD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,uBAAW,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAC7C,IAAI,CAAC,KAAK,GACT,CACL,CAAC,CAAC,CAAC,CACF,0BAAc,qBAAqB,YAAE,IAAI,CAAC,KAAK,GAAQ,CACxD,EACD,0BAAc,qBAAqB,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,EAC/D,0BAAc,oBAAoB,iBAAa,MAAM,GAAG,IACrD,CACN,CACF,GACE,CACN,CAAA"}
+{"version":3,"file":"pipeline.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAsB,CAAA"}

package/dist/patterns/record-form/index.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { ActionVariant } from '../../primitives/actions.tsx';
+import type { FieldProps } from '../../primitives/field.tsx';
+export declare const HOOKS: readonly ['record-form', 'form-errors', 'form-grid', 'form-actions'];
+export type RecordFormProps = {
+    id?: string | null;
+    action: string;
+    method?: 'get' | 'post';
+    fields: readonly FieldProps[];
+    submitLabel: string;
+    submitVariant?: ActionVariant;
+    cancelHref?: string | null;
+    cancelLabel?: string | null;
+    errors?: readonly string[];
+    hidden?: Record<string, string>;
+};
+export declare const RecordForm: (props: RecordFormProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/record-form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-form/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAEzF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cA+CnD,CAAA"}

package/dist/patterns/record-form/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { ActionGroup, Button, LinkButton } from '../../primitives/actions.js';
+import { Field } from '../../primitives/field.js';
+export const HOOKS = ['record-form', 'form-errors', 'form-grid', 'form-actions'];
+export const RecordForm = (props) => (_jsxs("form", { "data-ui": "record-form", id: props.id ?? undefined, action: props.action, method: props.method ?? 'post', children: [Object.entries(props.hidden ?? {}).map(([name, value]) => (_jsx("input", { type: "hidden", name: name, value: value }))), !!props.errors?.length && (_jsx("ul", { "data-ui": "form-errors", role: "alert", children: each(props.errors, (error, index) => `${index}:${error}`, (error) => (_jsx("li", { children: error }))) })), _jsx("div", { "data-ui": "form-grid", children: each(props.fields, (field) => field.id, (field) => (_jsx(Field, { ...field }))) }), _jsx("div", { "data-ui": "form-actions", children: _jsx(ActionGroup, { actions: [
+                    _jsx(Button, { label: props.submitLabel, variant: props.submitVariant ?? 'primary', type: "submit" }),
+                    ...(props.cancelHref
+                        ? [
+                            _jsx(LinkButton, { label: props.cancelLabel ?? 'Cancel', href: props.cancelHref, variant: "tertiary" }),
+                        ]
+                        : []),
+                ] }) })] }));
+//# sourceMappingURL=index.js.map

package/dist/patterns/record-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/record-form/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AAE9E,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA4B,CAAA;AAGlD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAezF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,CACpE,2BACU,aAAa,EACrB,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,SAAS,EACzB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,aAE7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACzD,gBAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAClD,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,CACzB,wBAAY,aAAa,EAAC,IAAI,EAAC,OAAO,YACnC,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,EACrC,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,uBAAK,KAAK,GAAM,CACjB,CACF,GACE,CACN,EACD,yBAAa,WAAW,YACrB,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,EACnB,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,KAAC,KAAK,OAAK,KAAK,GAAI,CACrB,CACF,GACG,EACN,yBAAa,cAAc,YACzB,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG;oBAC7F,GAAG,CAAC,KAAK,CAAC,UAAU;wBAClB,CAAC,CAAC;4BACE,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,QAAQ,EACpC,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,OAAO,EAAC,UAAU,GAClB;yBACH;wBACH,CAAC,CAAC,EAAE,CAAC;iBACR,GACD,GACE,IACD,CACR,CAAA"}

package/dist/patterns/record-form/styles.css

@@ -0,0 +1,175 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="record-form"] {
+    display: grid;
+    min-width: 0;
+    container-type: inline-size;
+    container-name: record-form;
+    gap: var(--kv-gap-field-group);
+  }
+
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="table-scroll"][data-responsive="stack"] {
+      overflow: hidden;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] > [data-ui="table"] {
+      display: block;
+      min-width: 0;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] > [data-ui="table"] > thead {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] > [data-ui="table"] > tbody {
+      display: block;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="row"] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+      padding: var(--kv-space-3);
+      border-bottom: 1px solid var(--kv-table-border);
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="row"]:last-child {
+      border-bottom: 0;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="group-row"],
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="group-pager"] {
+      display: block;
+      height: auto;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="group-cell"],
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="group-pager"] td {
+      display: block;
+      width: 100%;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="cell"] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--kv-space-2);
+      width: 100%;
+      min-width: 0;
+      max-width: none;
+      height: auto;
+      padding: var(--kv-space-2) 0;
+      border: 0;
+      white-space: normal;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="cell"]::before {
+      content: attr(data-label);
+      color: var(--kv-text-muted);
+      font-size: var(--kv-text-sm);
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="cell"]:first-child {
+      display: block;
+      font-weight: var(--kv-weight-semibold);
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="cell"]:first-child::before {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="select-cell"] {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: var(--kv-space-2) 0;
+      border: 0;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="cell"][data-linked="true"] {
+      padding: 0;
+    }
+
+    :where([data-kv-design-system]) [data-responsive="stack"] [data-ui="row-link"] {
+      min-height: auto;
+      padding: var(--kv-space-2) 0;
+    }
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="query"] {
+      flex-wrap: wrap;
+    }
+
+    :where([data-kv-design-system]) [data-ui="list-search"] {
+      flex: 1 1 8rem;
+      width: auto;
+      min-width: 0;
+      max-width: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="filters"] {
+      flex: 1 0 100%;
+      width: 100%;
+      min-width: 0;
+      order: 3;
+    }
+
+    :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="tail"] {
+      display: contents;
+    }
+
+    :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="meta"] {
+      margin-left: auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="list-actions"],
+    :where([data-kv-design-system]) [data-ui="bulk-action-list"],
+    :where([data-kv-design-system]) [data-ui="pager-actions"],
+    :where([data-kv-design-system]) [data-ui="pager-pages"] {
+      justify-content: flex-start;
+    }
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-errors"] {
+    display: grid;
+    gap: var(--kv-space-1);
+    margin: 0;
+    padding: var(--kv-space-3) var(--kv-space-3) var(--kv-space-3) 2rem;
+    border: 1px solid var(--kv-color-danger);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-color-danger-soft);
+    color: var(--kv-color-danger);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-grid"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--kv-gap-form-row) var(--kv-gap-field-group);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-grid"] [data-ui="field"][data-span="full"] {
+    grid-column: 1 / -1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-actions"] {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--kv-space-4);
+    border-top: 1px solid var(--kv-panel-divider);
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system]) [data-ui="form-grid"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-grid"] [data-ui="field"] {
+      grid-column: 1;
+    }
+  }
+}

package/dist/patterns/record-form.d.ts

@@ -1,18 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-import type { ActionVariant } from '../primitives/actions.tsx';
-import type { FieldProps } from '../primitives/field.tsx';
-export declare const HOOKS: readonly ['record-form', 'form-errors', 'form-grid', 'form-actions'];
-export type RecordFormProps = {
-    id?: string | null;
-    action: string;
-    method?: 'get' | 'post';
-    fields: readonly FieldProps[];
-    submitLabel: string;
-    submitVariant?: ActionVariant;
-    cancelHref?: string | null;
-    cancelLabel?: string | null;
-    errors?: readonly string[];
-    hidden?: Record<string, string>;
-};
-export declare const RecordForm: (props: RecordFormProps) => TemplateResult;
+export * from './record-form/index.tsx';
 //# sourceMappingURL=record-form.d.ts.map

package/dist/patterns/record-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-form.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD,eAAO,MAAM,KAAK,YAAI,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAEzF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cA+CnD,CAAA"}
+{"version":3,"file":"record-form.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/patterns/record-form.js

@@ -1,14 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-import { ActionGroup, Button, LinkButton } from '../primitives/actions.js';
-import { Field } from '../primitives/field.js';
-export const HOOKS = ['record-form', 'form-errors', 'form-grid', 'form-actions'];
-export const RecordForm = (props) => (_jsxs("form", { "data-ui": "record-form", id: props.id ?? undefined, action: props.action, method: props.method ?? 'post', children: [Object.entries(props.hidden ?? {}).map(([name, value]) => (_jsx("input", { type: "hidden", name: name, value: value }))), !!props.errors?.length && (_jsx("ul", { "data-ui": "form-errors", role: "alert", children: each(props.errors, (error, index) => `${index}:${error}`, (error) => (_jsx("li", { children: error }))) })), _jsx("div", { "data-ui": "form-grid", children: each(props.fields, (field) => field.id, (field) => (_jsx(Field, { ...field }))) }), _jsx("div", { "data-ui": "form-actions", children: _jsx(ActionGroup, { actions: [
-                    _jsx(Button, { label: props.submitLabel, variant: props.submitVariant ?? 'primary', type: "submit" }),
-                    ...(props.cancelHref
-                        ? [
-                            _jsx(LinkButton, { label: props.cancelLabel ?? 'Cancel', href: props.cancelHref, variant: "tertiary" }),
-                        ]
-                        : []),
-                ] }) })] }));
+export * from './record-form/index.js';
 //# sourceMappingURL=record-form.js.map

package/dist/patterns/record-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-form.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,0BAA2B,CAAA;AAE3E,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAyB,CAAA;AAG/C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAezF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,CACpE,2BACU,aAAa,EACrB,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,SAAS,EACzB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,aAE7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACzD,gBAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAClD,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,CACzB,wBAAY,aAAa,EAAC,IAAI,EAAC,OAAO,YACnC,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,EACrC,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,uBAAK,KAAK,GAAM,CACjB,CACF,GACE,CACN,EACD,yBAAa,WAAW,YACrB,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,EACnB,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,KAAC,KAAK,OAAK,KAAK,GAAI,CACrB,CACF,GACG,EACN,yBAAa,cAAc,YACzB,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG;oBAC7F,GAAG,CAAC,KAAK,CAAC,UAAU;wBAClB,CAAC,CAAC;4BACE,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,QAAQ,EACpC,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,OAAO,EAAC,UAAU,GAClB;yBACH;wBACH,CAAC,CAAC,EAAE,CAAC;iBACR,GACD,GACE,IACD,CACR,CAAA"}
+{"version":3,"file":"record-form.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAyB,CAAA"}

package/dist/patterns/record-page/index.d.ts

@@ -0,0 +1,31 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import { type PageIdentityKind } from '../page-shell.tsx';
+export declare const HOOKS: readonly ['record-page', 'record-page-context', 'record-page-header', 'record-page-title-row', 'record-page-heading', 'record-page-title', 'record-page-subline', 'record-page-status', 'record-page-description', 'record-page-actions', 'record-page-meta', 'record-page-controller', 'record-page-navigation', 'record-page-layout', 'record-page-body', 'record-page-aside'];
+export type RecordPageSlots = {
+    header: string;
+    body: string;
+    fragmentTitle?: string;
+};
+export type RecordPageProps = {
+    title: string;
+    body: JSXChild;
+    context?: JSXChild;
+    variant?: 'operational';
+    width?: 'default' | 'wide';
+    scope?: string | null;
+    description?: string | null;
+    status?: JSXChild;
+    actions?: JSXChild;
+    meta?: JSXChild;
+    controller?: JSXChild;
+    navigation?: JSXChild;
+    aside?: JSXChild;
+    asideLabel?: string | null;
+    slots?: RecordPageSlots;
+};
+type RecordPageKind = Extract<PageIdentityKind, 'record-page' | 'form-page'>;
+export declare const recordPage: (props: RecordPageProps, compatibilityKind?: RecordPageKind) => TemplateResult;
+/** One durable subject: create, edit, inspect or advance its workflow. */
+export declare const RecordPage: (props: RecordPageProps) => TemplateResult;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/record-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,CACX,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,KAAK,cAAc,GAAG,OAAO,CAAC,gBAAgB,EAAE,aAAa,GAAG,WAAW,CAAC,CAAA;AAE5E,eAAO,MAAM,UAAU,UAAW,eAAe,sBAAsB,cAAc,KAAG,cAsCvF,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAAmC,CAAA"}

package/dist/patterns/record-page/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { pageIdentityContent } from '../page-shell.js';
+export const HOOKS = [
+    'record-page',
+    'record-page-context',
+    'record-page-header',
+    'record-page-title-row',
+    'record-page-heading',
+    'record-page-title',
+    'record-page-subline',
+    'record-page-status',
+    'record-page-description',
+    'record-page-actions',
+    'record-page-meta',
+    'record-page-controller',
+    'record-page-navigation',
+    'record-page-layout',
+    'record-page-body',
+    'record-page-aside',
+];
+export const recordPage = (props, compatibilityKind) => {
+    const kind = compatibilityKind ?? 'record-page';
+    if (props.slots?.fragmentTitle !== undefined)
+        return (_jsxs("ket-fragments", { "data-title": props.slots.fragmentTitle, children: [_jsx("template", { "data-ket-slot": props.slots.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), _jsx("template", { "data-ket-slot": props.slots.body, children: props.body })] }));
+    return (_jsxs("section", { "data-ui": kind, "data-scope": props.scope ?? null, "data-has-aside": String(props.aside !== undefined), "data-variant": props.variant ?? null, "data-width": props.width ?? 'default', "data-pattern": "record", children: [props.context !== undefined && _jsx("div", { "data-ui": `${kind}-context`, children: props.context }), _jsx("header", { "data-ui": `${kind}-header`, "data-ket-slot": props.slots?.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), props.controller !== undefined && _jsx("div", { "data-ui": `${kind}-controller`, children: props.controller }), props.navigation !== undefined && _jsx("div", { "data-ui": `${kind}-navigation`, children: props.navigation }), _jsxs("div", { "data-ui": `${kind}-layout`, children: [_jsx("div", { "data-ui": `${kind}-body`, "data-ket-slot": props.slots?.body, children: props.body }), props.aside !== undefined && (_jsx("aside", { "data-ui": `${kind}-aside`, "aria-label": props.asideLabel ?? null, children: props.aside }))] })] }));
+};
+/** One durable subject: create, edit, inspect or advance its workflow. */
+export const RecordPage = (props) => recordPage(props);
+//# sourceMappingURL=index.js.map