@wallarm-org/design-system 0.31.0 → 0.31.1

package/dist/components/Attribute/Attribute.d.ts

@@ -5,6 +5,13 @@ export interface AttributeProps extends HTMLAttributes<HTMLDivElement>, Testable
     ref?: Ref<HTMLDivElement>;
     /** Show skeleton placeholders instead of children */
     loading?: boolean;
+    /**
+     * When true, `AttributeValue` renders the em-dash placeholder instead of its
+     * children, and any `AttributeEmptyDescription` inside the tree renders
+     * (it returns `null` otherwise). Ignored while `loading` is true (skeleton
+     * wins).
+     */
+    isEmpty?: boolean;
     /**
      * Layout direction of the label and value.
      * - `vertical` (default): label above value

package/dist/components/Attribute/Attribute.js

@@ -1,22 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
+import { AttributeEmptyProvider } from "./AttributeEmptyContext.js";
 import { AttributeLoading } from "./AttributeLoading.js";
 import { AttributeOrientationProvider } from "./AttributeOrientationContext.js";
-const Attribute = ({ ref, loading = false, orientation = 'vertical', children, className, 'data-testid': testId, ...props })=>{
+const Attribute = ({ ref, loading = false, isEmpty = false, orientation = 'vertical', children, className, 'data-testid': testId, ...props })=>{
     const isHorizontal = 'horizontal' === orientation;
     return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx(AttributeOrientationProvider, {
             value: orientation,
-            children: /*#__PURE__*/ jsx("div", {
-                ...props,
-                ref: ref,
-                "data-testid": testId,
-                "data-slot": "attribute",
-                "data-orientation": orientation,
-                className: cn(isHorizontal ? 'flex flex-row items-start gap-4' : 'flex flex-col', className),
-                children: loading ? /*#__PURE__*/ jsx(AttributeLoading, {}) : children
+            children: /*#__PURE__*/ jsx(AttributeEmptyProvider, {
+                value: isEmpty,
+                children: /*#__PURE__*/ jsx("div", {
+                    ...props,
+                    ref: ref,
+                    "data-testid": testId,
+                    "data-slot": "attribute",
+                    "data-orientation": orientation,
+                    "data-empty": !loading && isEmpty ? '' : void 0,
+                    className: cn(isHorizontal ? 'flex flex-row items-start gap-4' : 'flex flex-col', className),
+                    children: loading ? /*#__PURE__*/ jsx(AttributeLoading, {}) : children
+                })
             })
         })
     });

package/dist/components/Attribute/AttributeEmptyContext.d.ts

@@ -0,0 +1,7 @@
+export declare const AttributeEmptyProvider: import("react").Provider<boolean>;
+/**
+ * Read whether the surrounding `Attribute` was rendered with `isEmpty`.
+ * Consumed by `AttributeValue` (forces the em-dash placeholder) and
+ * `AttributeEmptyDescription` (renders only when true).
+ */
+export declare const useAttributeEmpty: () => boolean;

package/dist/components/Attribute/AttributeEmptyContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+const AttributeEmptyContext = createContext(false);
+const AttributeEmptyProvider = AttributeEmptyContext.Provider;
+const useAttributeEmpty = ()=>useContext(AttributeEmptyContext);
+export { AttributeEmptyProvider, useAttributeEmpty };

package/dist/components/Attribute/AttributeEmptyDescription.d.ts

@@ -0,0 +1,25 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface AttributeEmptyDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+    children?: ReactNode;
+}
+/**
+ * Description shown only while the surrounding `Attribute` is in the
+ * `isEmpty` state. Renders `null` otherwise. Internally a thin conditional
+ * wrapper around `AttributeLabelDescription` — same layout, same styling,
+ * just gated by `isEmpty`.
+ *
+ * Typically placed inside `<AttributeLabel>`; works anywhere inside an
+ * `<Attribute>` since the visibility comes from context.
+ *
+ * ```tsx
+ * <Attribute isEmpty>
+ *   <AttributeLabel>
+ *     Owner
+ *     <AttributeEmptyDescription>Not yet assigned</AttributeEmptyDescription>
+ *   </AttributeLabel>
+ *   <AttributeValue />
+ * </Attribute>
+ * ```
+ */
+export declare const AttributeEmptyDescription: FC<AttributeEmptyDescriptionProps>;

package/dist/components/Attribute/AttributeEmptyDescription.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useAttributeEmpty } from "./AttributeEmptyContext.js";
+import { AttributeLabelDescription } from "./AttributeLabelDescription.js";
+const AttributeEmptyDescription = ({ ref, children, ...props })=>{
+    const isEmpty = useAttributeEmpty();
+    if (!isEmpty) return null;
+    return /*#__PURE__*/ jsx(AttributeLabelDescription, {
+        ...props,
+        ref: ref,
+        children: children
+    });
+};
+AttributeEmptyDescription.displayName = "AttributeEmptyDescription";
+export { AttributeEmptyDescription };

package/dist/components/Attribute/AttributeValue.js

@@ -3,21 +3,23 @@ import { Children } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Text } from "../Text/index.js";
+import { useAttributeEmpty } from "./AttributeEmptyContext.js";
 import { useAttributeOrientation } from "./AttributeOrientationContext.js";
-function isEmpty(children) {
-    return null == children || false === children || 0 === Children.count(children);
-}
+const isEmptyChildren = (children)=>null == children || false === children || 0 === Children.count(children);
 const AttributeValue = ({ ref, children, className, ...props })=>{
     const testId = useTestId('value');
     const orientation = useAttributeOrientation();
+    const isEmptyAttribute = useAttributeEmpty();
     const isHorizontal = 'horizontal' === orientation;
+    const hasEmptyChildren = isEmptyChildren(children);
+    const showPlaceholder = isEmptyAttribute || hasEmptyChildren;
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-testid": testId,
         "data-slot": "attribute-value",
         className: cn('flex items-center', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
-        children: isEmpty(children) ? /*#__PURE__*/ jsx(Text, {
+        children: showPlaceholder ? /*#__PURE__*/ jsx(Text, {
             size: "sm",
             color: "secondary",
             children: "—"

package/dist/components/Attribute/index.d.ts

@@ -3,6 +3,8 @@ export { AttributeActions, type AttributeActionsProps } from './AttributeActions
 export { AttributeActionsContent, type AttributeActionsContentProps, } from './AttributeActionsContent';
 export { AttributeActionsItem, type AttributeActionsItemProps } from './AttributeActionsItem';
 export { AttributeActionsTarget, type AttributeActionsTargetProps } from './AttributeActionsTarget';
+export { useAttributeEmpty } from './AttributeEmptyContext';
+export { AttributeEmptyDescription, type AttributeEmptyDescriptionProps, } from './AttributeEmptyDescription';
 export { AttributeLabel, type AttributeLabelProps } from './AttributeLabel';
 export { AttributeLabelDescription, type AttributeLabelDescriptionProps, } from './AttributeLabelDescription';
 export { AttributeLabelInfo, type AttributeLabelInfoProps } from './AttributeLabelInfo';

package/dist/components/Attribute/index.js

@@ -3,8 +3,10 @@ import { AttributeActions } from "./AttributeActions.js";
 import { AttributeActionsContent } from "./AttributeActionsContent.js";
 import { AttributeActionsItem } from "./AttributeActionsItem.js";
 import { AttributeActionsTarget } from "./AttributeActionsTarget.js";
+import { useAttributeEmpty } from "./AttributeEmptyContext.js";
+import { AttributeEmptyDescription } from "./AttributeEmptyDescription.js";
 import { AttributeLabel } from "./AttributeLabel.js";
 import { AttributeLabelDescription } from "./AttributeLabelDescription.js";
 import { AttributeLabelInfo } from "./AttributeLabelInfo.js";
 import { AttributeValue } from "./AttributeValue.js";
-export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue };
+export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, useAttributeEmpty };

package/dist/components/FilterInput/index.d.ts

@@ -1,5 +1,5 @@
 export { FilterInput, type FilterInputProps } from './FilterInput';
 export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
 export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
-export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, serializeExpression, } from './lib';
+export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, } from './lib';
 export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';

package/dist/components/FilterInput/index.js

@@ -1,5 +1,5 @@
 import { FilterInput } from "./FilterInput.js";
 import { FilterInputChip } from "./FilterInputField/index.js";
 import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
-import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
-export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };
+import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
+export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression };

package/dist/components/FilterInput/lib/applyKnownFieldHelpers.d.ts

@@ -3,19 +3,32 @@ import type { FieldMetadata } from '../types';
  * Decorate `fields` in place with design-system helpers for known field names.
  * `FilterInput` calls this on the `fields` prop before rendering.
  *
- * Reserved names and what they auto-attach (unless the consumer already
- * provided a value for that slot):
+ * Reserved names and what the design system owns:
  *
- * | `name`        | Attaches                                                                                   |
+ * | `name`        | DS owns                                                                                    |
  * | ------------- | ------------------------------------------------------------------------------------------ |
  * | `status_code` | HTTP status code: `acceptChar`, `normalize`, `getSuggestions`, `validate`, `serializeValue` |
  *
- * Consumer-supplied callbacks always win over the auto-wired ones. If the
- * backend uses a different name (e.g. `http_status_code`), the helpers are
- * NOT applied — the consumer must either rename the field to match or wire
- * the factories (`createStatusCode*`) manually.
+ * For reserved names, DS-supplied callbacks **override** any consumer-supplied
+ * value for the same slot. This is intentional: the field semantics (mask
+ * range `1XX..5XX`, accepted characters, backend form) are fixed by the
+ * design system. Consumer-supplied `options`/`getSuggestions` would otherwise
+ * fight the canonical mask UX.
+ *
+ * If the backend uses a different name (e.g. `http_status_code`), the helpers
+ * are NOT applied — the consumer must either rename the field to match or
+ * wire the factories (`createStatusCode*`) manually.
  *
  * The returned array has **reference-stable identity** when no field matches,
  * so downstream `useMemo` that depends on it does not invalidate unnecessarily.
  */
 export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];
+/**
+ * Look up the backend-form serializer for a reserved field name. Returns
+ * `undefined` for unknown names. Useful for consumers that hold their own
+ * expression shape (not DS `ExprNode`) but need to apply the same backend
+ * transform that the FilterInput's `serializeValue` slot would produce — so
+ * they can drive the lookup off the field name without hard-coding which
+ * names are reserved.
+ */
+export declare const getKnownFieldSerializer: (fieldName: string) => NonNullable<FieldMetadata["serializeValue"]> | undefined;

package/dist/components/FilterInput/lib/applyKnownFieldHelpers.js

@@ -17,13 +17,14 @@ const applyKnownFieldHelpers = (fields)=>{
         changed = true;
         return {
             ...field,
-            acceptChar: field.acceptChar ?? helpers.acceptChar,
-            normalize: field.normalize ?? helpers.normalize,
-            getSuggestions: field.getSuggestions ?? helpers.getSuggestions,
-            validate: field.validate ?? helpers.validate,
-            serializeValue: field.serializeValue ?? helpers.serializeValue
+            acceptChar: helpers.acceptChar,
+            normalize: helpers.normalize,
+            getSuggestions: helpers.getSuggestions,
+            validate: helpers.validate,
+            serializeValue: helpers.serializeValue
         };
     });
     return changed ? out : fields;
 };
-export { applyKnownFieldHelpers };
+const getKnownFieldSerializer = (fieldName)=>KNOWN_FIELD_HELPERS[fieldName]?.().serializeValue;
+export { applyKnownFieldHelpers, getKnownFieldSerializer };

package/dist/components/FilterInput/lib/index.d.ts

@@ -2,7 +2,7 @@ export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/con
 export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { applyAcceptChar } from './applyAcceptChar';
 export { applyFieldValueTransforms } from './applyFieldValueTransforms';
-export { applyKnownFieldHelpers } from './applyKnownFieldHelpers';
+export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
 export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
 export { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { buildContainerAnchoredRect, isMenuRelated } from './dom';

package/dist/components/FilterInput/lib/index.js

@@ -1,7 +1,7 @@
 import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
 import { applyAcceptChar } from "./applyAcceptChar.js";
 import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
-import { applyKnownFieldHelpers } from "./applyKnownFieldHelpers.js";
+import { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
 import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
 import { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
@@ -12,4 +12,4 @@ import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelec
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
-export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.30.0",
-  "generatedAt": "2026-04-28T07:50:53.965Z",
+  "version": "0.31.0",
+  "generatedAt": "2026-04-28T11:05:33.411Z",
   "components": [
     {
       "name": "Alert",
@@ -2073,6 +2073,13 @@
           "description": "Show skeleton placeholders instead of children",
           "defaultValue": "false"
         },
+        {
+          "name": "isEmpty",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "When true, `AttributeValue` renders the em-dash placeholder instead of its\nchildren, and any `AttributeEmptyDescription` inside the tree renders\n(it returns `null` otherwise). Ignored while `loading` is true (skeleton\nwins).",
+          "defaultValue": "false"
+        },
         {
           "name": "orientation",
           "type": "AttributeOrientation | undefined",
@@ -3238,6 +3245,281 @@
             }
           ]
         },
+        {
+          "name": "AttributeEmptyDescription",
+          "props": [
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        },
         {
           "name": "AttributeLabel",
           "props": [
@@ -4369,7 +4651,8 @@
         },
         {
           "name": "Empty",
-          "code": "() => (\n  <div className='w-[400px]'>\n    <Attribute>\n      <AttributeLabel>\n        Region\n        <AttributeLabelDescription>Not yet assigned</AttributeLabelDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n  </div>\n)"
+          "code": "() => (\n  <div className='w-[400px] flex flex-col gap-16'>\n    <Attribute>\n      <AttributeLabel>\n        Region\n        <AttributeLabelDescription>Manual composition</AttributeLabelDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n\n    <Attribute isEmpty>\n      <AttributeLabel>Region</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>This text is replaced by the em-dash placeholder</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute isEmpty>\n      <AttributeLabel>\n        Owner\n        <AttributeEmptyDescription>Not yet assigned</AttributeEmptyDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n\n    <Attribute isEmpty>\n      <AttributeLabel>\n        SSO provider\n        <AttributeEmptyDescription>\n          Not connected —{' '}\n          <Link href='#' size='md'>\n            set up integration\n          </Link>\n        </AttributeEmptyDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n  </div>\n)",
+          "description": "All empty-state variants in vertical orientation:\n  1. Manual composition — `AttributeLabelDescription` always visible, value\n     composed by the consumer (no `isEmpty` flag).\n  2. `isEmpty` alone — value becomes em-dash, `AttributeValue` children are\n     ignored, label stays bare.\n  3. `isEmpty` + `<AttributeEmptyDescription>` — description renders only\n     while `isEmpty` is true; outside that state it returns null.\n  4. Same as (3), with `ReactNode` content (text + link) inside the\n     description."
         },
         {
           "name": "Loading",
@@ -4427,6 +4710,11 @@
           "name": "HorizontalLoading",
           "code": "() => (\n  <div className='w-[400px] flex flex-col gap-8'>\n    <Attribute orientation='horizontal' loading>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n    <Attribute orientation='horizontal' loading>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n  </div>\n)"
         },
+        {
+          "name": "HorizontalEmpty",
+          "code": "() => (\n  <div className='w-[400px] flex flex-col gap-8'>\n    <Attribute orientation='horizontal'>\n      <AttributeLabel width={160}>\n        Region\n        <AttributeLabelDescription>Manual composition</AttributeLabelDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n\n    <Attribute orientation='horizontal' isEmpty>\n      <AttributeLabel width={160}>Region</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>This text is replaced by the em-dash placeholder</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal' isEmpty>\n      <AttributeLabel width={160}>\n        Owner\n        <AttributeEmptyDescription>Not yet assigned</AttributeEmptyDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n\n    <Attribute orientation='horizontal' isEmpty>\n      <AttributeLabel width={160}>\n        SSO provider\n        <AttributeEmptyDescription>\n          Not connected —{' '}\n          <Link href='#' size='md'>\n            set up integration\n          </Link>\n        </AttributeEmptyDescription>\n      </AttributeLabel>\n      <AttributeValue />\n    </Attribute>\n  </div>\n)",
+          "description": "All empty-state variants in horizontal orientation. Same four cases as\n`Empty`, just with `orientation='horizontal'` and `AttributeLabel width=160`\nto leave room for descriptions (DS clamp: 100..256px)."
+        },
         {
           "name": "HorizontalWithActions",
           "code": "() => (\n  <div className='w-[400px] flex flex-col gap-8'>\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions data-testid='attribute-horizontal-with-actions'>\n          <AttributeActionsTarget>\n            <Text size='sm'>142.198.167.52</Text>\n          </AttributeActionsTarget>\n          <AttributeActionsContent>\n            <AttributeActionsItem\n              onSelect={() => {\n                /* story mock */\n              }}\n            >\n              <Filter />\n              Investigate by this value\n            </AttributeActionsItem>\n            <AttributeActionsItem\n              onSelect={() => {\n                /* story mock */\n              }}\n            >\n              <Copy />\n              Copy value\n            </AttributeActionsItem>\n          </AttributeActionsContent>\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Badge color='red' variant='dotted'>\n              Blocked\n            </Badge>\n          </AttributeActionsTarget>\n          <AttributeActionsContent>\n            <AttributeActionsItem\n              onSelect={() => {\n                /* story mock */\n              }}\n            >\n              <Filter />\n              Investigate by this value\n            </AttributeActionsItem>\n            <AttributeActionsItem\n              onSelect={() => {\n                /* story mock */\n              }}\n            >\n              <Copy />\n              Copy value\n            </AttributeActionsItem>\n          </AttributeActionsContent>\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",