@ketvietlab/design-system 0.1.25 → 0.1.30

package/dist/primitives/actions/styles.css

@@ -6,7 +6,7 @@
     min-height: var(--kv-control-height);
     align-items: center;
     justify-content: center;
-    gap: 0.4375rem;
+    gap: var(--kv-space-2);
     padding-inline: var(--kv-space-3);
     border: 1px solid var(--kv-border-default);
     border-radius: var(--kv-radius-sm);
@@ -113,6 +113,7 @@
 
   :where([data-kv-design-system]) [data-ui="action-leading"] {
     display: inline-grid;
+    flex: none;
     width: 1rem;
     height: 1rem;
     place-items: center;
@@ -127,6 +128,7 @@
   }
 
   :where([data-kv-design-system]) [data-ui="action-spinner"] {
+    flex: none;
     width: 0.8rem;
     height: 0.8rem;
     border: 2px solid currentcolor;

package/dist/primitives/feedback/styles.css

@@ -7,9 +7,13 @@
    * it just stops reading as "one line" for that one case.
    */
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] {
+    container: kv-notice / inline-size;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
+    /* `flex-start`, not `center`: once a narrow width wraps the message onto its
+       own line, centering would float the icon between the two lines instead of
+       beside the first one. */
+    align-items: flex-start;
     gap: var(--kv-space-1) var(--kv-space-2);
     padding: var(--kv-space-2) var(--kv-space-3);
     border: 1px solid var(--kv-color-line);
@@ -67,11 +71,12 @@
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-copy"] {
     display: flex;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     flex-wrap: wrap;
     align-items: baseline;
     column-gap: 0.3em;
     min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-title"] {
@@ -150,12 +155,12 @@
     text-transform: uppercase;
   }
 
-  @media (max-width: 42rem) {
-    /* Flex-wrap already reflows icon/copy/actions onto their own lines as
-       needed; only the auto margin — meant to pin actions to the far end of
-       a shared row — needs to give way once actions wrap onto a row alone. */
+  @container kv-notice (max-width: 28rem) {
+    /* Keep the message readable in narrow panels as well as mobile screens. */
     :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-actions"] {
+      flex-basis: 100%;
       margin-left: 0;
+      padding-inline-start: calc(var(--kv-space-4) + var(--kv-space-2));
     }
   }
 }

package/dist/primitives/field/index.d.ts

@@ -18,6 +18,11 @@ export type FieldProps = {
     control?: JSXChild;
     type?: 'text' | 'email' | 'tel' | 'number' | 'decimal' | 'password' | 'time' | 'color' | 'date' | 'datetime-local' | 'month' | 'week' | 'select' | 'textarea' | 'checkbox' | 'checkbox-group' | 'radio';
     value?: string | number | boolean | null;
+    /** Embedded controls share the frame of a compound field. */
+    labelHidden?: boolean;
+    /** Keep the selected value accessible while showing only the select chevron. */
+    selectionHidden?: boolean;
+    appearance?: 'default' | 'embedded';
     placeholder?: string | null;
     required?: boolean;
     disabled?: boolean;

package/dist/primitives/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAID,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cA0LzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAID,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cA4LzC,CAAA"}

package/dist/primitives/field/index.js

@@ -29,6 +29,6 @@ export const Field = (props) => {
         return (_jsxs("div", { "data-ui": "field", "data-kind": "checkbox-group", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", "data-orientation": props.optionsOrientation === 'vertical' ? 'vertical' : null, role: "group", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.name ?? option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "checkbox", name: option.name ?? `${props.name}[]`, value: option.value, checked: option.checked === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
     if (props.type === 'radio')
         return (_jsxs("div", { "data-ui": "field", "data-kind": "radio", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", "data-orientation": props.optionsOrientation === 'vertical' ? 'vertical' : null, role: "radiogroup", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "radio", name: props.name, value: option.value, checked: String(props.value ?? '') === option.value, required: props.required === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
-    return (_jsxs("label", { "data-ui": "field", "data-kind": props.type ?? 'text', "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), for: props.id, children: [props.type === 'checkbox' && NativeFieldControl(props, describedBy), label, props.type !== 'checkbox' && NativeFieldControl(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
+    return (_jsxs("label", { "data-ui": "field", "data-kind": props.type ?? 'text', "data-label-hidden": props.labelHidden ? 'true' : null, "data-selection-hidden": props.selectionHidden ? 'true' : null, "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), for: props.id, children: [props.type === 'checkbox' && NativeFieldControl(props, describedBy), label, props.type !== 'checkbox' && NativeFieldControl(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
 };
 //# sourceMappingURL=index.js.map

package/dist/primitives/field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/field/native-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-control.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/native-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,eAAO,MAAM,kBAAkB,UAAW,UAAU,eAAe,MAAM,GAAG,IAAI,KAAG,cAgElF,CAAA"}
+{"version":3,"file":"native-control.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/native-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,eAAO,MAAM,kBAAkB,UAAW,UAAU,eAAe,MAAM,GAAG,IAAI,KAAG,cAmElF,CAAA"}

package/dist/primitives/field/native-control.js

@@ -4,9 +4,9 @@ export const NativeFieldControl = (props, describedBy) => {
     if (props.control !== undefined)
         return _jsx(_Fragment, { children: props.control });
     if (props.type === 'textarea')
-        return (_jsx("textarea", { "data-ui": "field-control", id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
+        return (_jsx("textarea", { "data-ui": "field-control", "data-appearance": props.appearance === 'embedded' ? 'embedded' : null, id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
     if (props.type === 'select')
-        return (_jsx("select", { "data-ui": "field-control", id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, disabled: option.disabled === true, children: option.label }))) }));
-    return (_jsx("input", { "data-ui": "field-control", id: props.id, type: props.type === 'decimal' ? 'number' : (props.type ?? 'text'), name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, min: props.min, max: props.max, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: props.autocomplete ?? 'off', step: props.type === 'decimal' ? (props.step ?? 'any') : (props.step ?? null) }));
+        return (_jsx("select", { "data-ui": "field-control", "data-appearance": props.appearance === 'embedded' ? 'embedded' : null, id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, disabled: option.disabled === true, children: option.label }))) }));
+    return (_jsx("input", { "data-ui": "field-control", "data-appearance": props.appearance === 'embedded' ? 'embedded' : null, id: props.id, type: props.type === 'decimal' ? 'number' : (props.type ?? 'text'), name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, min: props.min, max: props.max, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: props.autocomplete ?? 'off', step: props.type === 'decimal' ? (props.step ?? 'any') : (props.step ?? null) }));
 };
 //# sourceMappingURL=native-control.js.map

package/dist/primitives/field/native-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-control.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/field/native-control.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"native-control.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/field/native-control.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/field/styles.css

@@ -77,6 +77,33 @@
     color: var(--kv-input-placeholder);
   }
 
+  /* Keep the native select and its keyboard/picker behaviour; the field owns
+     the chevron so its inset, colour and alignment match the other controls. */
+  :where([data-kv-design-system]) select[data-ui="field-control"] {
+    appearance: none;
+    padding-inline-end: var(--kv-space-8);
+    text-overflow: ellipsis;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-kind="select"]:has(> select)::after {
+    content: "";
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    width: var(--kv-space-1-5);
+    height: var(--kv-space-1-5);
+    margin-inline-end: var(--kv-space-3);
+    border-right: 1px solid currentcolor;
+    border-bottom: 1px solid currentcolor;
+    color: var(--kv-text-secondary);
+    transform: translateY(-25%) rotate(45deg);
+    pointer-events: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-kind="select"]:has(> select:disabled)::after {
+    color: var(--kv-text-disabled);
+  }
+
   :where([data-kv-design-system]) [data-ui="field-control"]:hover:not(:focus-visible, :disabled) {
     border-color: var(--kv-input-border-hover);
     background: var(--kv-input-bg-hover);
@@ -105,6 +132,7 @@
   :where([data-kv-design-system]) input[type="checkbox"][data-ui="field-control"] {
     width: 1rem;
     min-height: 1rem;
+    margin: 0;
     accent-color: var(--kv-color-accent);
   }
 
@@ -113,7 +141,8 @@
     padding: var(--kv-space-1);
   }
 
-  :where([data-kv-design-system]) [data-ui="field"][data-invalid="true"] > [data-ui="field-control"] {
+  :where([data-kv-design-system]) [data-ui="field"][data-invalid="true"] > [data-ui="field-control"],
+  :where([data-kv-design-system]) [data-ui="field-control"][aria-invalid="true"] {
     border-color: var(--kv-color-danger);
   }
 
@@ -131,7 +160,12 @@
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: flex-start;
-    justify-content: center;
+    justify-content: flex-start;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="field"]:has(> [data-ui="field-options"][data-orientation="vertical"]) {
+    align-items: start;
   }
 
   :where([data-kv-design-system]) [data-ui="field-option"] {
@@ -145,6 +179,7 @@
   :where([data-kv-design-system]) [data-ui="field-option-input"] {
     width: 1rem;
     min-height: 1rem;
+    margin: 0;
     flex: 0 0 auto;
     accent-color: var(--kv-color-accent);
   }
@@ -165,4 +200,91 @@
     font-size: var(--kv-text-xs);
     font-weight: 700;
   }
+
+  /* LAYOUT.md L7: a label sits beside its control from tablet width up and above
+     it below that, and above it in any narrow column (a side panel, a record
+     aside) whatever the viewport. Whatever holds the fields is the container, so
+     every field in one column switches together; a field never measures itself,
+     or half-row and full-row fields of one form would disagree. A lone checkbox
+     keeps its label beside the box. */
+  :where([data-kv-design-system]) :has(> [data-ui="field"]) {
+    container-type: inline-size;
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="select"]:has(> select)::after,
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="select"] > select[data-ui="field-control"] {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    :where([data-kv-design-system]) [data-ui="field"]:not([data-kind="checkbox"]) > * {
+      grid-column: 1 / -1;
+      grid-row: auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="textarea"] > [data-ui="field-label"] {
+      padding-top: 0;
+    }
+  }
+
+  @container (max-width: 28rem) {
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="select"]:has(> select)::after,
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="select"] > select[data-ui="field-control"] {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    :where([data-kv-design-system]) [data-ui="field"]:not([data-kind="checkbox"]) > * {
+      grid-column: 1 / -1;
+      grid-row: auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="field"][data-kind="textarea"] > [data-ui="field-label"] {
+      padding-top: 0;
+    }
+  }
+  :where([data-kv-design-system]) [data-ui="field-control"][data-appearance="embedded"] {
+    min-height: calc(var(--kv-control-height) - 2px);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+  :where([data-kv-design-system]) [data-ui="field"][data-label-hidden="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  :where([data-kv-design-system]) [data-ui="field"][data-label-hidden="true"] > [data-ui="field-label"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-kv-design-system])
+    [data-ui="field"][data-label-hidden="true"][data-kind="select"]
+    > select[data-ui="field-control"],
+  :where([data-kv-design-system]) [data-ui="field"][data-label-hidden="true"] > [data-ui="field-control"],
+  :where([data-kv-design-system])
+    [data-ui="field"][data-label-hidden="true"][data-kind="select"]:has(> select)::after {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  :where([data-kv-design-system])
+    [data-ui="field"][data-selection-hidden="true"]
+    > select[data-ui="field-control"] {
+    color: transparent;
+    padding-inline: 0;
+    text-overflow: clip;
+  }
+  :where([data-kv-design-system]) [data-ui="field"][data-selection-hidden="true"] > select > option {
+    color: var(--kv-input-text);
+    background: var(--kv-input-bg);
+  }
+  :where([data-kv-design-system])
+    [data-ui="field"][data-selection-hidden="true"][data-kind="select"]:has(> select)::after {
+    justify-self: center;
+    margin-inline-end: 0;
+  }
 }

package/dist/primitives/progress/styles.css

@@ -1,6 +1,7 @@
 @layer ket.app {
   :where([data-kv-design-system]) [data-ui="progress"] {
     display: grid;
+    min-width: 0;
     gap: var(--kv-space-2);
   }
 
@@ -11,9 +12,11 @@
     gap: var(--kv-space-3);
     color: var(--kv-text-secondary);
     font-size: var(--kv-text-sm);
+    overflow-wrap: anywhere;
   }
 
   :where([data-kv-design-system]) [data-ui="progress-value"] {
+    flex: none;
     color: var(--kv-text-muted);
     font-variant-numeric: tabular-nums;
   }

package/dist/primitives/status/index.d.ts

@@ -1,5 +1,16 @@
 import type { TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
+export declare const HOOKS: readonly ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code', 'text', 'media-label', 'media-label-image', 'media-label-copy'];
+/** Plain information; use badges only when a state or exception needs emphasis. */
+export declare const Text: (props: {
+    children: string;
+    tone?: 'default' | 'muted';
+}) => TemplateResult;
+/** A readable row name with optional media. Empty collections do not pay for an unused image column. */
+export declare const MediaLabel: (props: {
+    label: string;
+    src?: string;
+    reserveImage?: boolean;
+}) => TemplateResult;
 export type Tone = 'neutral' | 'info' | 'positive' | 'warning' | 'danger';
 export declare const Badge: (props: {
     label: string;

package/dist/primitives/status/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAE7F,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEzE,eAAO,MAAM,KAAK,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAS7E,CAAA;AAED,eAAO,MAAM,GAAG,UAAW;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,KAAG,cAIpE,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAMvC,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAUtF,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIxE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,aAAa,EACb,mBAAmB,EACnB,kBAAkB,CACV,CAAA;AAEV,mFAAmF;AACnF,eAAO,MAAM,IAAI,UAAW;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAI9E,CAAA;AAED,wGAAwG;AACxG,eAAO,MAAM,UAAU,UAAW;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,KAAG,cASH,CAAA;AAED,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEzE,eAAO,MAAM,KAAK,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAS7E,CAAA;AAED,eAAO,MAAM,GAAG,UAAW;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,KAAG,cAIpE,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAMvC,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAUtF,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIxE,CAAA"}

package/dist/primitives/status/index.js

@@ -1,5 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-export const HOOKS = ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
+export const HOOKS = [
+    'badge',
+    'tag',
+    'tag-remove',
+    'count-badge',
+    'avatar',
+    'code',
+    'text',
+    'media-label',
+    'media-label-image',
+    'media-label-copy',
+];
+/** Plain information; use badges only when a state or exception needs emphasis. */
+export const Text = (props) => (_jsx("span", { "data-ui": "text", "data-tone": props.tone ?? 'default', children: props.children }));
+/** A readable row name with optional media. Empty collections do not pay for an unused image column. */
+export const MediaLabel = (props) => (_jsxs("span", { "data-ui": "media-label", children: [props.src || props.reserveImage ? (_jsx("span", { "data-ui": "media-label-image", "aria-hidden": "true", children: props.src ? _jsx("img", { src: props.src, alt: "", loading: "lazy", decoding: "async" }) : null })) : null, _jsx("span", { "data-ui": "media-label-copy", children: props.label })] }));
 export const Badge = (props) => (_jsx("span", { "data-ui": "badge", "data-pattern": "badge", "data-tone": props.tone ?? 'neutral', "data-value": props.value ?? '', children: props.label }));
 export const Tag = (props) => (_jsxs("span", { "data-ui": "tag", children: [props.label, !!props.removeHref && (_jsx("a", { "data-ui": "tag-remove", href: props.removeHref, "aria-label": props.removeLabel ?? `Remove ${props.label}`, children: "\u00D7" }))] }));
 export const CountBadge = (props) => (_jsx("span", { "data-ui": "count-badge", role: "status", "aria-label": props.label, children: String(props.count) }));

package/dist/primitives/status/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAI7F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAqD,EAAkB,EAAE,CAAC,CAC9F,0BACU,OAAO,kBACF,OAAO,eACT,KAAK,CAAC,IAAI,IAAI,SAAS,gBACtB,KAAK,CAAC,KAAK,IAAI,EAAE,YAE5B,KAAK,CAAC,KAAK,GACP,CACR,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAInB,EAAkB,EAAE,CAAC,CACpB,2BAAc,KAAK,aAChB,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CACrB,uBACU,YAAY,EACpB,IAAI,EAAE,KAAK,CAAC,UAAU,gBACV,KAAK,CAAC,WAAW,IAAI,UAAU,KAAK,CAAC,KAAK,EAAE,uBAGtD,CACL,IACI,CACR,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAkB,EAAE,CAAC,CACrF,0BAAc,aAAa,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC9D,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACf,CACR,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,CAAA;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CACvG,0BACU,QAAQ,kBACH,QAAQ,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,KAAK,EAAE,KAAK,CAAC,IAAI,iBACL,MAAM,YAEjB,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAChB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAiD,EAAkB,EAAE,CAAC,CACzF,0BAAc,MAAM,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,YACrD,KAAK,CAAC,KAAK,GACP,CACR,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/status/styles.css

@@ -1,4 +1,32 @@
 @layer ket.app {
+  :where([data-kv-design-system]) [data-ui="text"][data-tone="muted"] {
+    color: var(--kv-text-secondary);
+  }
+  :where([data-kv-design-system]) [data-ui="media-label"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+    min-width: 0;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  :where([data-kv-design-system]) [data-ui="media-label-image"] {
+    display: inline-flex;
+    width: var(--kv-space-6);
+    height: var(--kv-space-6);
+    flex: 0 0 var(--kv-space-6);
+  }
+  :where([data-kv-design-system]) [data-ui="media-label-image"] img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--kv-radius-sm);
+  }
+  :where([data-kv-design-system]) [data-ui="media-label-copy"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"] {
     display: inline-flex;
     min-height: 1.4rem;
@@ -6,7 +34,7 @@
     gap: 0.3125rem;
     padding: 0.125rem 0.4375rem;
     border: 1px solid transparent;
-    border-radius: var(--kv-radius-sm);
+    border-radius: var(--kv-radius-full);
     background: color-mix(in srgb, var(--kv-text-main) 7%, transparent);
     color: var(--kv-text-secondary);
     font-size: var(--kv-text-xs);
@@ -38,12 +66,15 @@
 
   :where([data-kv-design-system]) [data-ui="tag"] {
     display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
     min-height: 1.6rem;
     align-items: center;
     gap: var(--kv-space-1);
     padding-inline: var(--kv-space-2);
     border: 1px solid var(--kv-color-line);
-    border-radius: var(--kv-radius-sm);
+    border-radius: var(--kv-radius-full);
     background: var(--kv-color-surface);
     font-size: var(--kv-text-xs);
     font-weight: 650;
@@ -51,6 +82,7 @@
 
   :where([data-kv-design-system]) [data-ui="tag-remove"] {
     display: grid;
+    flex: none;
     width: 1rem;
     height: 1rem;
     place-items: center;

package/dist/record/display/index.d.ts

@@ -7,12 +7,18 @@ export type KeyValueProps = {
     emptyLabel?: string;
 };
 export declare const KeyValue: (props: KeyValueProps) => TemplateResult;
+/**
+ * `layout="strip"` lays the pairs out in one row divided by hairlines, the
+ * metadata strip of LAYOUT.md L7 (due date, SLA, owner under a record title).
+ * It has no box around it; `columns` applies to the grid layout only.
+ */
 export declare const DescriptionList: (props: {
     label?: string;
     items: readonly (KeyValueProps & {
         id: string;
     })[];
     columns?: 1 | 2 | 3;
+    layout?: 'grid' | 'strip';
 }) => TemplateResult;
 export type PersonProps = {
     name: string;

package/dist/record/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAE7D,eAAO,MAAM,KAAK,YAChB,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,QAAQ,CACA,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACrF,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAK/C,CAAA;AAED,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,CAAC,aAAa,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CACpB,KAAG,cAUH,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CACrC,CAAA;AACD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAQ3C,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,KAAG,cAmBH,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAI/E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAE7D,eAAO,MAAM,KAAK,YAChB,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,QAAQ,CACA,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACrF,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAK/C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,CAAC,aAAa,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;IAClD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC1B,KAAG,cAeH,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CACrC,CAAA;AACD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAQ3C,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,KAAG,cAmBH,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAI/E,CAAA"}

package/dist/record/display/index.js

@@ -12,7 +12,12 @@ export const HOOKS = [
     'status',
 ];
 export const KeyValue = (props) => (_jsxs("div", { "data-ui": "key-value", children: [_jsx("dt", { "data-ui": "key-value-label", children: props.label }), _jsx("dd", { "data-ui": "key-value-value", children: props.value ?? props.emptyLabel ?? '—' })] }));
-export const DescriptionList = (props) => (_jsx("dl", { "data-ui": "description-list", "aria-label": props.label, "data-columns": String(props.columns ?? 2), children: each(props.items, (item) => item.id, (item) => (_jsx(KeyValue, { ...item }))) }));
+/**
+ * `layout="strip"` lays the pairs out in one row divided by hairlines, the
+ * metadata strip of LAYOUT.md L7 (due date, SLA, owner under a record title).
+ * It has no box around it; `columns` applies to the grid layout only.
+ */
+export const DescriptionList = (props) => (_jsx("dl", { "data-ui": "description-list", "aria-label": props.label, "data-columns": String(props.columns ?? 2), "data-layout": props.layout === 'strip' ? 'strip' : null, children: each(props.items, (item) => item.id, (item) => (_jsx(KeyValue, { ...item }))) }));
 export const Person = (props) => (_jsxs("span", { "data-ui": "person", "data-pattern": "person", children: [_jsx(Avatar, { name: props.name, size: props.size }), _jsxs("span", { "data-ui": "person-body", children: [props.href ? _jsx("a", { href: props.href, children: props.name }) : _jsx("strong", { children: props.name }), props.detail !== undefined && _jsx("small", { children: props.detail })] })] }));
 export const AvatarGroup = (props) => {
     const visible = props.people.slice(0, props.max ?? 4);

package/dist/record/display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kCAAmC,CAAA;AAGjE,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,kBAAkB;IAClB,WAAW;IACX,iBAAiB;IACjB,iBAAiB;IACjB,QAAQ;IACR,aAAa;IACb,cAAc;IACd,QAAQ;CACA,CAAA;AAGV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,CAChE,0BAAa,WAAW,aACtB,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAM,EAChD,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,IAAI,GAAG,GAAM,IACvE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAI/B,EAAkB,EAAE,CAAC,CACpB,wBAAY,kBAAkB,gBAAa,KAAK,CAAC,KAAK,kBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,YAC7F,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,QAAQ,OAAK,IAAI,GAAI,CACvB,CACF,GACE,CACN,CAAA;AAQD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,2BAAc,QAAQ,kBAAc,QAAQ,aAC1C,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC9C,2BAAc,aAAa,aACxB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,2BAAS,KAAK,CAAC,IAAI,GAAU,EAClF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAQ,KAAK,CAAC,MAAM,GAAS,IACvD,IACF,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAI3B,EAAkB,EAAE;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACtD,OAAO,CACL,2BAAc,cAAc,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,aAC9D,IAAI,CACH,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EACrB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAC9B,CACF,EACA,SAAS,GAAG,CAAC,IAAI,CAChB,gBAAM,IAAI,EAAC,KAAK,gBAAa,GAAG,SAAS,cAAc,EAAE,KAAK,EAAE,GAAG,SAAS,cAAc,kBACtF,MAAM,CAAC,SAAS,CAAC,IACd,CACR,IACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsD,EAAkB,EAAE,CAAC,CAChG,0BAAc,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,MAAM,YACxC,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,GAC1C,CACR,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":"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"}

package/dist/record/display/styles.css

@@ -13,6 +13,31 @@
     --kv-description-columns: 3;
   }
 
+  :where([data-kv-design-system]) [data-ui="description-list"][data-layout="strip"] {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: var(--kv-space-3);
+    column-gap: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="description-list"][data-layout="strip"] > [data-ui="key-value"] {
+    min-width: 8rem;
+    padding-inline: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="description-list"][data-layout="strip"]
+    > [data-ui="key-value"]:first-child {
+    padding-inline-start: 0;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="description-list"][data-layout="strip"]
+    > [data-ui="key-value"]
+    + [data-ui="key-value"] {
+    border-inline-start: 1px solid var(--kv-panel-border);
+  }
+
   :where([data-kv-design-system]) [data-ui="key-value"] {
     display: grid;
     min-width: 0;

package/dist/record/formatted-values/index.d.ts

@@ -12,7 +12,8 @@ export declare const FormattedNumber: (props: {
     maximumFractionDigits?: number;
 }) => TemplateResult;
 export declare const FormattedMoney: (props: {
-    value: number;
+    /** Decimal text preserves database precision beyond Number.MAX_SAFE_INTEGER. */
+    value: number | string;
     currency: string;
     locale?: string;
 }) => TemplateResult;

package/dist/record/formatted-values/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,eAAO,MAAM,aAAa,UAAW;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG,cAiBH,CAAA;AAED,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,KAAG,cAOH,CAAA;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,KAAG,cAMH,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,eAAO,MAAM,aAAa,UAAW;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,KAAG,cAiBH,CAAA;AAED,eAAO,MAAM,eAAe,UAAW;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,KAAG,cAOH,CAAA;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,gFAAgF;IAChF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,KAAG,cAOH,CAAA"}

package/dist/record/formatted-values/index.js

@@ -17,5 +17,6 @@ export const FormattedNumber = (props) => (_jsx("data", { "data-ui": "formatted-
         minimumFractionDigits: props.minimumFractionDigits,
         maximumFractionDigits: props.maximumFractionDigits,
     }).format(props.value) }));
-export const FormattedMoney = (props) => (_jsx("data", { "data-ui": "formatted-money", value: String(props.value), "data-currency": props.currency, children: new Intl.NumberFormat(props.locale ?? 'vi-VN', { style: 'currency', currency: props.currency }).format(props.value) }));
+export const FormattedMoney = (props) => (_jsx("data", { "data-ui": "formatted-money", value: String(props.value), "data-currency": props.currency, children: new Intl.NumberFormat(props.locale ?? 'vi-VN', { style: 'currency', currency: props.currency })
+        .format(props.value) }));
 //# sourceMappingURL=index.js.map

package/dist/record/formatted-values/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAI7B,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACxG,MAAM,KAAK,GACT,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,IAAI;QACN,IAAI,CAAC,cAAc,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3C,IAAI,CAAC,UAAU,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QACzG,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;IAC7B,OAAO,CACL,0BAAc,gBAAgB,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,YAChE,SAAS,GACL,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAK/B,EAAkB,EAAE,CAAC,CACpB,0BAAc,kBAAkB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,YACxD,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE;QAC9C,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;QAClD,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;KACnD,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACjB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAkB,EAAE,CAAC,CACpB,0BAAc,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAiB,KAAK,CAAC,QAAQ,YACtF,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CACrG,KAAK,CAAC,KAAK,CACZ,GACI,CACR,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/formatted-values/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAU,CAAA;AAEvF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAI7B,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACxG,MAAM,KAAK,GACT,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,IAAI;QACN,IAAI,CAAC,cAAc,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3C,IAAI,CAAC,UAAU,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QACzG,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;IAC7B,OAAO,CACL,0BAAc,gBAAgB,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,YAChE,SAAS,GACL,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAK/B,EAAkB,EAAE,CAAC,CACpB,0BAAc,kBAAkB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,YACxD,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE;QAC9C,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;QAClD,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;KACnD,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACjB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAK9B,EAAkB,EAAE,CAAC,CACpB,0BAAc,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAiB,KAAK,CAAC,QAAQ,YAErF,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;SAC5F,MACJ,CAAC,KAAK,CAAC,KAAK,CAAC,GACT,CACR,CAAA"}