@picteus/extension-sdk 0.16.0 → 0.18.0

package/dist/generated/viewKit.js

@@ -58,14 +58,50 @@ export var TextIntensity;
     // High visual contrast / intense text color
     TextIntensity["high"] = "high";
 })(TextIntensity || (TextIntensity = {}));
-/** Representation style for short string values. */
-export var StringShortRepresentation;
-(function (StringShortRepresentation) {
-    // Standard plain text rendering
-    StringShortRepresentation["plain"] = "plain";
+/** Geometric shape representation for visual containers and indicators. */
+export var Shape;
+(function (Shape) {
+    // Circular container shape
+    Shape["circle"] = "circle";
+    // Square container shape
+    Shape["square"] = "square";
+})(Shape || (Shape = {}));
+/** Relative sizing scale for visual elements and indicators. */
+export var Size;
+(function (Size) {
+    // Compact small size
+    Size["small"] = "small";
+    // Standard medium size
+    Size["medium"] = "medium";
+    // Prominent large size
+    Size["large"] = "large";
+})(Size || (Size = {}));
+/** Visual presentation style for string values. */
+export var StringRepresentation;
+(function (StringRepresentation) {
+    // Standard inline text rendering
+    StringRepresentation["plain"] = "plain";
     // Visual chip / tag pill representation
-    StringShortRepresentation["chip"] = "chip";
-})(StringShortRepresentation || (StringShortRepresentation = {}));
+    StringRepresentation["chip"] = "chip";
+    // Multiline text with preserved whitespace and line breaks
+    StringRepresentation["multiline"] = "multiline";
+})(StringRepresentation || (StringRepresentation = {}));
+/** Visual separator rendered between sequential elements or items. */
+export var Separator;
+(function (Separator) {
+    // Vertical dividing bar
+    Separator["bar"] = "bar";
+    // Comma separator
+    Separator["comma"] = "comma";
+    // Bullet dot separator
+    Separator["dot"] = "dot";
+    // Forward slash separator
+    Separator["slash"] = "slash";
+    // Dash separator
+    Separator["dash"] = "dash";
+    // Space separator
+    Separator["space"] = "space";
+})(Separator || (Separator = {}));
 /** Supported syntax highlighting languages for formatted code blocks. */
 export var CodeLanguage;
 (function (CodeLanguage) {
@@ -76,6 +112,14 @@ export var CodeLanguage;
     // YAML format syntax
     CodeLanguage["yaml"] = "yaml";
 })(CodeLanguage || (CodeLanguage = {}));
+/** Visual presentation style for boolean values. */
+export var BooleanRepresentation;
+(function (BooleanRepresentation) {
+    // Standard inline text rendering (e.g. "true" / "false" or custom labels)
+    BooleanRepresentation["plain"] = "plain";
+    // Visual badge pill representation
+    BooleanRepresentation["badge"] = "badge";
+})(BooleanRepresentation || (BooleanRepresentation = {}));
 /** Visual color tone variants for badge pill representations. */
 export var BadgeVariant;
 (function (BadgeVariant) {
@@ -92,7 +136,7 @@ export var BadgeVariant;
 export var TimestampFormat;
 (function (TimestampFormat) {
     // Complete date and time display
-    TimestampFormat["full"] = "full";
+    TimestampFormat["datetime"] = "datetime";
     // Date-only display
     TimestampFormat["date"] = "date";
     // Time-only display
@@ -122,6 +166,14 @@ export var TableColumnAlign;
     // Right-aligned text
     TableColumnAlign["right"] = "right";
 })(TableColumnAlign || (TableColumnAlign = {}));
+/** Width mode for table columns. */
+export var TableColumnWidthMode;
+(function (TableColumnWidthMode) {
+    // Fixed width constraint
+    TableColumnWidthMode["fixed"] = "fixed";
+    // Maximum width upper bound constraint
+    TableColumnWidthMode["maximum"] = "maximum";
+})(TableColumnWidthMode || (TableColumnWidthMode = {}));
 /** Visual styling variants for hairline dividers. */
 export var DividerStyle;
 (function (DividerStyle) {
@@ -229,31 +281,31 @@ export class PrimitiveModifiersClass extends ViewKitNode {
     }
 }
 /**
- * Class implementation of the `StringShortElement` interface.
+ * Class implementation of the `StringElement` interface.
  *
  * @remarks
- * Short string primitive element.
- * Supports plain text or compact chip pill presentation.
+ * Universal textual string primitive element.
+ * Supports plain text, compact chip pill, or multiline pre-wrapped presentation.
  */
-export class StringShortElementClass extends BaseUiElement {
+export class StringElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `StringShortElement`.
+     * Discriminator identifier for `StringElement`.
      *
-     * @defaultValue "string-short"
+     * @defaultValue "string"
      */
-    type = "string-short";
+    type = "string";
     /** Text value */
     value;
     /**
      * Display representation mode
      *
-     * @defaultValue StringShortRepresentation.plain
+     * @defaultValue StringRepresentation.plain
      */
     representation;
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
     modifiers;
     /**
-     * Constructs a new `StringShortElementClass` instance.
+     * Constructs a new `StringElementClass` instance.
      *
      * @param value - Text value
      * @param options - Optional component settings. (representation (defaults to `plain`), modifiers).
@@ -261,36 +313,47 @@ export class StringShortElementClass extends BaseUiElement {
     constructor(value, options) {
         super();
         this.value = value;
-        this.representation = options?.representation ?? StringShortRepresentation.plain;
+        this.representation = options?.representation ?? StringRepresentation.plain;
         this.modifiers = options?.modifiers;
     }
 }
 /**
- * Class implementation of the `StringLongElement` interface.
+ * Class implementation of the `StringsElement` interface.
  *
  * @remarks
- * Multiline text block primitive element for descriptions, comments, or prose.
+ * Collection of textual string values rendered as a sequence of inline items or chips.
+ * Supports visual separators (comma, dot, slash, bar, dash, space) and copyable affordance.
  */
-export class StringLongElementClass extends BaseUiElement {
+export class StringsElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `StringLongElement`.
+     * Discriminator identifier for `StringsElement`.
      *
-     * @defaultValue "string-long"
+     * @defaultValue "strings"
      */
-    type = "string-long";
-    /** Text value */
-    value;
+    type = "strings";
+    /** Array of string values */
+    values;
+    /**
+     * Display representation mode (plain text or visual chips)
+     *
+     * @defaultValue StringRepresentation.plain
+     */
+    representation;
+    /** Optional visual separator rendered between sequential values */
+    separator;
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
     modifiers;
     /**
-     * Constructs a new `StringLongElementClass` instance.
+     * Constructs a new `StringsElementClass` instance.
      *
-     * @param value - Text value
-     * @param options - Optional component settings. (modifiers).
+     * @param values - Array of string values
+     * @param options - Optional component settings. (representation (defaults to `plain`), separator, modifiers).
      */
-    constructor(value, options) {
+    constructor(values, options) {
         super();
-        this.value = value;
+        this.values = values ? [...values] : [];
+        this.representation = options?.representation ?? StringRepresentation.plain;
+        this.separator = options?.separator;
         this.modifiers = options?.modifiers;
     }
 }
@@ -458,14 +521,14 @@ export class RatioElementClass extends BaseUiElement {
      * @defaultValue "ratio"
      */
     type = "ratio";
-    /** Aspect ratio textual expression */
+    /** Aspect ratio numerical expression */
     value;
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
     modifiers;
     /**
      * Constructs a new `RatioElementClass` instance.
      *
-     * @param value - Aspect ratio textual expression
+     * @param value - Aspect ratio numerical expression
      * @param options - Optional component settings. (modifiers).
      */
     constructor(value, options) {
@@ -474,32 +537,89 @@ export class RatioElementClass extends BaseUiElement {
         this.modifiers = options?.modifiers;
     }
 }
+/**
+ * Class implementation of the `DimensionsElement` interface.
+ *
+ * @remarks
+ * Image dimensions representation displaying formatted width and height in pixels.
+ */
+export class DimensionsElementClass extends BaseUiElement {
+    /**
+     * Discriminator identifier for `DimensionsElement`.
+     *
+     * @defaultValue "dimensions"
+     */
+    type = "dimensions";
+    /** Width in pixels */
+    width;
+    /** Height in pixels */
+    height;
+    /** Optional visual modifiers (copyable) */
+    modifiers;
+    /**
+     * Constructs a new `DimensionsElementClass` instance.
+     *
+     * @param width - Width in pixels
+     * @param height - Height in pixels
+     * @param options - Optional component settings. (modifiers).
+     */
+    constructor(width, height, options) {
+        super();
+        this.width = width;
+        this.height = height;
+        this.modifiers = options?.modifiers;
+    }
+}
 /**
  * Class implementation of the `ColourElement` interface.
  *
  * @remarks
- * Single color swatch representation with hex value and copy affordance.
+ * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
  */
 export class ColourElementClass extends BaseUiElement {
     /**
      * Discriminator identifier for `ColourElement`.
      *
-     * @defaultValue "color-swatch"
+     * @defaultValue "color"
      */
-    type = "color-swatch";
+    type = "color";
     /** Hexadecimal color code */
     value;
+    /** Optional descriptive color name label */
+    label;
+    /**
+     * Whether to display the textual color code or label next to the swatch
+     *
+     * @defaultValue true
+     */
+    showText;
+    /**
+     * Visual shape of the color indicator
+     *
+     * @defaultValue Shape.circle
+     */
+    shape;
+    /**
+     * Visual size of the color indicator
+     *
+     * @defaultValue Size.medium
+     */
+    size;
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
     modifiers;
     /**
      * Constructs a new `ColourElementClass` instance.
      *
      * @param value - Hexadecimal color code
-     * @param options - Optional component settings. (modifiers).
+     * @param options - Optional component settings. (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
      */
     constructor(value, options) {
         super();
         this.value = value;
+        this.label = options?.label;
+        this.showText = options?.showText ?? true;
+        this.shape = options?.shape ?? Shape.circle;
+        this.size = options?.size ?? Size.medium;
         this.modifiers = options?.modifiers;
     }
 }
@@ -609,49 +729,27 @@ export class NumberBoundedMeterElementClass extends BaseUiElement {
     }
 }
 /**
- * Class implementation of the `BooleanPlainElement` interface.
+ * Class implementation of the `BooleanElement` interface.
  *
  * @remarks
- * Plain boolean value representation (textual "true" / "false").
+ * Universal boolean primitive element.
+ * Supports standard plain text or badge pill presentation with customizable labels and variants.
  */
-export class BooleanPlainElementClass extends BaseUiElement {
+export class BooleanElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `BooleanPlainElement`.
+     * Discriminator identifier for `BooleanElement`.
      *
-     * @defaultValue "boolean-plain"
+     * @defaultValue "boolean"
      */
-    type = "boolean-plain";
+    type = "boolean";
     /** Boolean state value */
     value;
-    /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
-    modifiers;
-    /**
-     * Constructs a new `BooleanPlainElementClass` instance.
-     *
-     * @param value - Boolean state value
-     * @param options - Optional component settings. (modifiers).
-     */
-    constructor(value, options) {
-        super();
-        this.value = value;
-        this.modifiers = options?.modifiers;
-    }
-}
-/**
- * Class implementation of the `BooleanBadgeElement` interface.
- *
- * @remarks
- * Visual badge pill representation of a boolean state.
- */
-export class BooleanBadgeElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `BooleanBadgeElement`.
+     * Display representation mode
      *
-     * @defaultValue "boolean-badge"
+     * @defaultValue BooleanRepresentation.plain
      */
-    type = "boolean-badge";
-    /** Boolean state value */
-    value;
+    representation;
     /**
      * Custom display label when true (defaults to "true")
      *
@@ -665,7 +763,7 @@ export class BooleanBadgeElementClass extends BaseUiElement {
      */
     falseLabel;
     /**
-     * Badge color tone
+     * Badge color tone when rendered as badge
      *
      * @defaultValue BadgeVariant.neutral
      */
@@ -673,14 +771,15 @@ export class BooleanBadgeElementClass extends BaseUiElement {
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
     modifiers;
     /**
-     * Constructs a new `BooleanBadgeElementClass` instance.
+     * Constructs a new `BooleanElementClass` instance.
      *
      * @param value - Boolean state value
-     * @param options - Optional component settings. (trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
+     * @param options - Optional component settings. (representation (defaults to `plain`), trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
      */
     constructor(value, options) {
         super();
         this.value = value;
+        this.representation = options?.representation ?? BooleanRepresentation.plain;
         this.trueLabel = options?.trueLabel ?? "true";
         this.falseLabel = options?.falseLabel ?? "false";
         this.variant = options?.variant ?? BadgeVariant.neutral;
@@ -700,12 +799,12 @@ export class TimestampElementClass extends BaseUiElement {
      * @defaultValue "timestamp"
      */
     type = "timestamp";
-    /** ISO 8601 date string or epoch timestamp in milliseconds */
+    /** The timestamp in milliseconds */
     value;
     /**
      * Presentation date/time format
      *
-     * @defaultValue TimestampFormat.full
+     * @defaultValue TimestampFormat.datetime
      */
     format;
     /** Optional visual modifiers (copyable, truncate, emphasis, monospace) */
@@ -713,13 +812,13 @@ export class TimestampElementClass extends BaseUiElement {
     /**
      * Constructs a new `TimestampElementClass` instance.
      *
-     * @param value - ISO 8601 date string or epoch timestamp in milliseconds
-     * @param options - Optional component settings. (format (defaults to `full`), modifiers).
+     * @param value - The timestamp in milliseconds
+     * @param options - Optional component settings. (format (defaults to `datetime`), modifiers).
      */
     constructor(value, options) {
         super();
         this.value = value;
-        this.format = options?.format ?? TimestampFormat.full;
+        this.format = options?.format ?? TimestampFormat.datetime;
         this.modifiers = options?.modifiers;
     }
 }
@@ -762,31 +861,6 @@ export class ImageReferenceElementClass extends BaseUiElement {
         this.placeholder = options?.placeholder;
     }
 }
-/**
- * Class implementation of the `DominantColourSetElement` interface.
- *
- * @remarks
- * Dominant color set palette rendered in descending dominance order.
- */
-export class DominantColourSetElementClass extends BaseUiElement {
-    /**
-     * Discriminator identifier for `DominantColourSetElement`.
-     *
-     * @defaultValue "color-set"
-     */
-    type = "color-set";
-    /** List of hexadecimal color strings in descending priority */
-    colors;
-    /**
-     * Constructs a new `DominantColourSetElementClass` instance.
-     *
-     * @param colors - List of hexadecimal color strings in descending priority
-     */
-    constructor(colors) {
-        super();
-        this.colors = colors ? [...colors] : [];
-    }
-}
 /**
  * Class implementation of the `ButtonActionElement` interface.
  *
@@ -938,7 +1012,7 @@ export class SlotClass extends ViewKitNode {
     content;
     /** Optional slot label (e.g. "Slot A") */
     label;
-    /** Relative or fractional width proportion (e.g. "1/3", "2/3", "100px", "auto") */
+    /** Width percentage (1-100) */
     width;
     /**
      * Constructs a new `SlotClass` instance.
@@ -954,45 +1028,70 @@ export class SlotClass extends ViewKitNode {
     }
 }
 /**
- * Class implementation of the `MultiSlotRowElement` interface.
+ * Class implementation of the `MultiSlotElement` interface.
  *
  * @remarks
- * Multi-slot horizontal row with declared column width proportions.
- * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
+ * Multi-slot horizontal row layout comprising slots with individual widths.
  */
-export class MultiSlotRowElementClass extends BaseUiElement {
+export class MultiSlotElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `MultiSlotRowElement`.
+     * Discriminator identifier for `MultiSlotElement`.
      *
      * @defaultValue "multi-slot"
      */
     type = "multi-slot";
     /** List of slots comprising the row */
     slots;
-    /** Proportions descriptor (e.g. "1/3 + 2/3", "equal", "1/4 + 3/4") */
-    proportions;
     /**
-     * Constructs a new `MultiSlotRowElementClass` instance.
+     * Constructs a new `MultiSlotElementClass` instance.
      *
      * @param slots - List of slots comprising the row
-     * @param options - Optional component settings. (proportions).
      */
-    constructor(slots, options) {
+    constructor(slots) {
         super();
         this.slots = slots ? [...slots] : [];
-        this.proportions = options?.proportions;
     }
 }
 /**
- * Class implementation of the `LabelValueRowElement` interface.
+ * Class implementation of the `FlowingElement` interface.
+ *
+ * @remarks
+ * Flowing inline layout container with automatic line wrapping.
+ * Renders child elements horizontally in sequence, automatically wrapping to the next line when space runs out.
+ */
+export class FlowingElementClass extends BaseUiElement {
+    /**
+     * Discriminator identifier for `FlowingElement`.
+     *
+     * @defaultValue "flowing"
+     */
+    type = "flowing";
+    /** List of child elements rendered sequentially with line wrapping */
+    elements;
+    /** Optional visual separator rendered between sequential child elements */
+    separator;
+    /**
+     * Constructs a new `FlowingElementClass` instance.
+     *
+     * @param elements - List of child elements rendered sequentially with line wrapping
+     * @param options - Optional component settings. (separator).
+     */
+    constructor(elements, options) {
+        super();
+        this.elements = elements ? [...elements] : [];
+        this.separator = options?.separator;
+    }
+}
+/**
+ * Class implementation of the `LabelValueElement` interface.
  *
  * @remarks
  * Standard label and value row.
  * Displays a muted label on the left and value representation on the right with a vertical dividing line.
  */
-export class LabelValueRowElementClass extends BaseUiElement {
+export class LabelValueElementClass extends BaseUiElement {
     /**
-     * Discriminator identifier for `LabelValueRowElement`.
+     * Discriminator identifier for `LabelValueElement`.
      *
      * @defaultValue "label-value"
      */
@@ -1008,7 +1107,7 @@ export class LabelValueRowElementClass extends BaseUiElement {
      */
     withDivider;
     /**
-     * Constructs a new `LabelValueRowElementClass` instance.
+     * Constructs a new `LabelValueElementClass` instance.
      *
      * @param label - Key or descriptive label displayed muted on the left
      * @param value - Rendered value element on the right
@@ -1036,18 +1135,25 @@ export class TableColumnClass extends ViewKitNode {
      * @defaultValue TableColumnAlign.left
      */
     align;
-    /** Optional width constraint */
+    /** Width percentage (1-100) */
     width;
+    /**
+     * Sizing mode for the provided width
+     *
+     * @defaultValue TableColumnWidthMode.fixed
+     */
+    widthMode;
     /**
      * Constructs a new `TableColumnClass` instance.
      *
-     * @param options - Optional component settings. (header, align (defaults to `left`), width).
+     * @param options - Optional component settings. (header, align (defaults to `left`), width, widthMode (defaults to `fixed`)).
      */
     constructor(options) {
         super();
         this.header = options?.header;
         this.align = options?.align ?? TableColumnAlign.left;
         this.width = options?.width;
+        this.widthMode = options?.widthMode ?? TableColumnWidthMode.fixed;
     }
 }
 /**
@@ -1085,12 +1191,6 @@ export class TableElementClass extends BaseUiElement {
     type = "table";
     /** Tabular data rows */
     rows;
-    /**
-     * Whether to render a column header row
-     *
-     * @defaultValue true
-     */
-    hasHeader;
     /**
      * Whether to render alternating row background colors
      *
@@ -1115,12 +1215,11 @@ export class TableElementClass extends BaseUiElement {
      * Constructs a new `TableElementClass` instance.
      *
      * @param rows - Tabular data rows
-     * @param options - Optional component settings. (hasHeader (defaults to `true`), isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
+     * @param options - Optional component settings. (isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
      */
     constructor(rows, options) {
         super();
         this.rows = rows ? [...rows] : [];
-        this.hasHeader = options?.hasHeader ?? true;
         this.isStriped = options?.isStriped ?? false;
         this.withColumnSeparators = options?.withColumnSeparators ?? false;
         this.withRowSeparators = options?.withRowSeparators ?? false;
@@ -1371,31 +1470,32 @@ export class UiContainerBuilder {
         return this;
     }
     /**
-     * Appends a `StringShortElement` component.
+     * Appends a `StringElement` component.
      *
      * @remarks
-     * Short string primitive element.
-     * Supports plain text or compact chip pill presentation.
+     * Universal textual string primitive element.
+     * Supports plain text, compact chip pill, or multiline pre-wrapped presentation.
      *
      * @param value - Text value
      * @param options - Optional component settings (representation (defaults to `plain`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addStringShort(value, options) {
-        return this.add(stringShort(value, options));
+    addString(value, options) {
+        return this.add(string(value, options));
     }
     /**
-     * Appends a `StringLongElement` component.
+     * Appends a `StringsElement` component.
      *
      * @remarks
-     * Multiline text block primitive element for descriptions, comments, or prose.
+     * Collection of textual string values rendered as a sequence of inline items or chips.
+     * Supports visual separators (comma, dot, slash, bar, dash, space) and copyable affordance.
      *
-     * @param value - Text value
-     * @param options - Optional component settings (modifiers).
+     * @param values - Array of string values
+     * @param options - Optional component settings (representation (defaults to `plain`), separator, modifiers).
      * @returns This builder instance for method chaining.
      */
-    addStringLong(value, options) {
-        return this.add(stringLong(value, options));
+    addStrings(values, options) {
+        return this.add(strings(values, options));
     }
     /**
      * Appends a `StringCodeElement` component.
@@ -1468,21 +1568,35 @@ export class UiContainerBuilder {
      * @remarks
      * Aspect ratio representation (e.g. "16:9", "4:3", "1:1").
      *
-     * @param value - Aspect ratio textual expression
+     * @param value - Aspect ratio numerical expression
      * @param options - Optional component settings (modifiers).
      * @returns This builder instance for method chaining.
      */
     addRatio(value, options) {
         return this.add(ratio(value, options));
     }
+    /**
+     * Appends a `DimensionsElement` component.
+     *
+     * @remarks
+     * Image dimensions representation displaying formatted width and height in pixels.
+     *
+     * @param width - Width in pixels
+     * @param height - Height in pixels
+     * @param options - Optional component settings (modifiers).
+     * @returns This builder instance for method chaining.
+     */
+    addDimensions(width, height, options) {
+        return this.add(dimensions(width, height, options));
+    }
     /**
      * Appends a `ColourElement` component.
      *
      * @remarks
-     * Single color swatch representation with hex value and copy affordance.
+     * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
      *
      * @param value - Hexadecimal color code
-     * @param options - Optional component settings (modifiers).
+     * @param options - Optional component settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
      * @returns This builder instance for method chaining.
      */
     addColour(value, options) {
@@ -1492,14 +1606,14 @@ export class UiContainerBuilder {
      * Appends a `ColourElement` component.
      *
      * @remarks
-     * Single color swatch representation with hex value and copy affordance.
+     * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
      *
      * @param value - Hexadecimal color code
-     * @param options - Optional component settings (modifiers).
+     * @param options - Optional component settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addColorSwatch(value, options) {
-        return this.add(colorSwatch(value, options));
+    addColor(value, options) {
+        return this.add(color(value, options));
     }
     /**
      * Appends a `NumberUnboundedElement` component.
@@ -1567,30 +1681,18 @@ export class UiContainerBuilder {
         return this.add(numberMeter(value, options));
     }
     /**
-     * Appends a `BooleanPlainElement` component.
-     *
-     * @remarks
-     * Plain boolean value representation (textual "true" / "false").
-     *
-     * @param value - Boolean state value
-     * @param options - Optional component settings (modifiers).
-     * @returns This builder instance for method chaining.
-     */
-    addBooleanPlain(value, options) {
-        return this.add(booleanPlain(value, options));
-    }
-    /**
-     * Appends a `BooleanBadgeElement` component.
+     * Appends a `BooleanElement` component.
      *
      * @remarks
-     * Visual badge pill representation of a boolean state.
+     * Universal boolean primitive element.
+     * Supports standard plain text or badge pill presentation with customizable labels and variants.
      *
      * @param value - Boolean state value
-     * @param options - Optional component settings (trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
+     * @param options - Optional component settings (representation (defaults to `plain`), trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addBooleanBadge(value, options) {
-        return this.add(booleanBadge(value, options));
+    addBoolean(value, options) {
+        return this.add(boolean(value, options));
     }
     /**
      * Appends a `TimestampElement` component.
@@ -1598,8 +1700,8 @@ export class UiContainerBuilder {
      * @remarks
      * Formatted date and time representation.
      *
-     * @param value - ISO 8601 date string or epoch timestamp in milliseconds
-     * @param options - Optional component settings (format (defaults to `full`), modifiers).
+     * @param value - The timestamp in milliseconds
+     * @param options - Optional component settings (format (defaults to `datetime`), modifiers).
      * @returns This builder instance for method chaining.
      */
     addTimestamp(value, options) {
@@ -1631,30 +1733,6 @@ export class UiContainerBuilder {
     addImageRef(src, options) {
         return this.add(imageRef(src, options));
     }
-    /**
-     * Appends a `DominantColourSetElement` component.
-     *
-     * @remarks
-     * Dominant color set palette rendered in descending dominance order.
-     *
-     * @param colors - List of hexadecimal color strings in descending priority
-     * @returns This builder instance for method chaining.
-     */
-    addDominantColourSet(colors) {
-        return this.add(dominantColourSet(colors));
-    }
-    /**
-     * Appends a `DominantColourSetElement` component.
-     *
-     * @remarks
-     * Dominant color set palette rendered in descending dominance order.
-     *
-     * @param colors - List of hexadecimal color strings in descending priority
-     * @returns This builder instance for method chaining.
-     */
-    addDominantColors(colors) {
-        return this.add(dominantColors(colors));
-    }
     /**
      * Appends a `MarkdownBlockElement` component.
      *
@@ -1708,50 +1786,33 @@ export class UiContainerBuilder {
         return this.add(html(content, options));
     }
     /**
-     * Appends a `MultiSlotRowElement` component.
+     * Appends a `MultiSlotElement` component.
      *
      * @remarks
-     * Multi-slot horizontal row with declared column width proportions.
-     * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
+     * Multi-slot horizontal row layout comprising slots with individual widths.
      *
      * @param slots - List of slots comprising the row
-     * @param options - Optional component settings (proportions).
      * @returns This builder instance for method chaining.
      */
-    addMultiSlotRow(slots, options) {
-        return this.add(multiSlotRow(slots, options));
+    addMultiSlot(slots) {
+        return this.add(multiSlot(slots));
     }
     /**
-     * Appends a `MultiSlotRowElement` component.
+     * Appends a `FlowingElement` component.
      *
      * @remarks
-     * Multi-slot horizontal row with declared column width proportions.
-     * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
+     * Flowing inline layout container with automatic line wrapping.
+     * Renders child elements horizontally in sequence, automatically wrapping to the next line when space runs out.
      *
-     * @param slots - List of slots comprising the row
-     * @param options - Optional component settings (proportions).
+     * @param elements - List of child elements rendered sequentially with line wrapping
+     * @param options - Optional component settings (separator).
      * @returns This builder instance for method chaining.
      */
-    addMultiSlot(slots, options) {
-        return this.add(multiSlot(slots, options));
+    addFlowing(elements, options) {
+        return this.add(flowing(elements, options));
     }
     /**
-     * Appends a `LabelValueRowElement` component.
-     *
-     * @remarks
-     * Standard label and value row.
-     * Displays a muted label on the left and value representation on the right with a vertical dividing line.
-     *
-     * @param label - Key or descriptive label displayed muted on the left
-     * @param value - Rendered value element on the right
-     * @param options - Optional component settings (withDivider (defaults to `false`)).
-     * @returns This builder instance for method chaining.
-     */
-    addLabelValueRow(label, value, options) {
-        return this.add(labelValueRow(label, value, options));
-    }
-    /**
-     * Appends a `LabelValueRowElement` component.
+     * Appends a `LabelValueElement` component.
      *
      * @remarks
      * Standard label and value row.
@@ -1773,7 +1834,7 @@ export class UiContainerBuilder {
      * Supports header/borderless modes, 2-column key-value tables, and 3-column data tables.
      *
      * @param rows - Tabular data rows
-     * @param options - Optional component settings (hasHeader (defaults to `true`), isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
+     * @param options - Optional component settings (isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
      * @returns This builder instance for method chaining.
      */
     addTable(rows, options) {
@@ -1976,31 +2037,32 @@ export class UiCardBuilder {
         return this;
     }
     /**
-     * Appends a `StringShortElement` component.
+     * Appends a `StringElement` component.
      *
      * @remarks
-     * Short string primitive element.
-     * Supports plain text or compact chip pill presentation.
+     * Universal textual string primitive element.
+     * Supports plain text, compact chip pill, or multiline pre-wrapped presentation.
      *
      * @param value - Text value
      * @param options - Optional component settings (representation (defaults to `plain`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addStringShort(value, options) {
-        return this.add(stringShort(value, options));
+    addString(value, options) {
+        return this.add(string(value, options));
     }
     /**
-     * Appends a `StringLongElement` component.
+     * Appends a `StringsElement` component.
      *
      * @remarks
-     * Multiline text block primitive element for descriptions, comments, or prose.
+     * Collection of textual string values rendered as a sequence of inline items or chips.
+     * Supports visual separators (comma, dot, slash, bar, dash, space) and copyable affordance.
      *
-     * @param value - Text value
-     * @param options - Optional component settings (modifiers).
+     * @param values - Array of string values
+     * @param options - Optional component settings (representation (defaults to `plain`), separator, modifiers).
      * @returns This builder instance for method chaining.
      */
-    addStringLong(value, options) {
-        return this.add(stringLong(value, options));
+    addStrings(values, options) {
+        return this.add(strings(values, options));
     }
     /**
      * Appends a `StringCodeElement` component.
@@ -2073,21 +2135,35 @@ export class UiCardBuilder {
      * @remarks
      * Aspect ratio representation (e.g. "16:9", "4:3", "1:1").
      *
-     * @param value - Aspect ratio textual expression
+     * @param value - Aspect ratio numerical expression
      * @param options - Optional component settings (modifiers).
      * @returns This builder instance for method chaining.
      */
     addRatio(value, options) {
         return this.add(ratio(value, options));
     }
+    /**
+     * Appends a `DimensionsElement` component.
+     *
+     * @remarks
+     * Image dimensions representation displaying formatted width and height in pixels.
+     *
+     * @param width - Width in pixels
+     * @param height - Height in pixels
+     * @param options - Optional component settings (modifiers).
+     * @returns This builder instance for method chaining.
+     */
+    addDimensions(width, height, options) {
+        return this.add(dimensions(width, height, options));
+    }
     /**
      * Appends a `ColourElement` component.
      *
      * @remarks
-     * Single color swatch representation with hex value and copy affordance.
+     * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
      *
      * @param value - Hexadecimal color code
-     * @param options - Optional component settings (modifiers).
+     * @param options - Optional component settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
      * @returns This builder instance for method chaining.
      */
     addColour(value, options) {
@@ -2097,14 +2173,14 @@ export class UiCardBuilder {
      * Appends a `ColourElement` component.
      *
      * @remarks
-     * Single color swatch representation with hex value and copy affordance.
+     * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
      *
      * @param value - Hexadecimal color code
-     * @param options - Optional component settings (modifiers).
+     * @param options - Optional component settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addColorSwatch(value, options) {
-        return this.add(colorSwatch(value, options));
+    addColor(value, options) {
+        return this.add(color(value, options));
     }
     /**
      * Appends a `NumberUnboundedElement` component.
@@ -2172,30 +2248,18 @@ export class UiCardBuilder {
         return this.add(numberMeter(value, options));
     }
     /**
-     * Appends a `BooleanPlainElement` component.
+     * Appends a `BooleanElement` component.
      *
      * @remarks
-     * Plain boolean value representation (textual "true" / "false").
+     * Universal boolean primitive element.
+     * Supports standard plain text or badge pill presentation with customizable labels and variants.
      *
      * @param value - Boolean state value
-     * @param options - Optional component settings (modifiers).
-     * @returns This builder instance for method chaining.
-     */
-    addBooleanPlain(value, options) {
-        return this.add(booleanPlain(value, options));
-    }
-    /**
-     * Appends a `BooleanBadgeElement` component.
-     *
-     * @remarks
-     * Visual badge pill representation of a boolean state.
-     *
-     * @param value - Boolean state value
-     * @param options - Optional component settings (trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
+     * @param options - Optional component settings (representation (defaults to `plain`), trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
      * @returns This builder instance for method chaining.
      */
-    addBooleanBadge(value, options) {
-        return this.add(booleanBadge(value, options));
+    addBoolean(value, options) {
+        return this.add(boolean(value, options));
     }
     /**
      * Appends a `TimestampElement` component.
@@ -2203,8 +2267,8 @@ export class UiCardBuilder {
      * @remarks
      * Formatted date and time representation.
      *
-     * @param value - ISO 8601 date string or epoch timestamp in milliseconds
-     * @param options - Optional component settings (format (defaults to `full`), modifiers).
+     * @param value - The timestamp in milliseconds
+     * @param options - Optional component settings (format (defaults to `datetime`), modifiers).
      * @returns This builder instance for method chaining.
      */
     addTimestamp(value, options) {
@@ -2236,30 +2300,6 @@ export class UiCardBuilder {
     addImageRef(src, options) {
         return this.add(imageRef(src, options));
     }
-    /**
-     * Appends a `DominantColourSetElement` component.
-     *
-     * @remarks
-     * Dominant color set palette rendered in descending dominance order.
-     *
-     * @param colors - List of hexadecimal color strings in descending priority
-     * @returns This builder instance for method chaining.
-     */
-    addDominantColourSet(colors) {
-        return this.add(dominantColourSet(colors));
-    }
-    /**
-     * Appends a `DominantColourSetElement` component.
-     *
-     * @remarks
-     * Dominant color set palette rendered in descending dominance order.
-     *
-     * @param colors - List of hexadecimal color strings in descending priority
-     * @returns This builder instance for method chaining.
-     */
-    addDominantColors(colors) {
-        return this.add(dominantColors(colors));
-    }
     /**
      * Appends a `MarkdownBlockElement` component.
      *
@@ -2313,50 +2353,33 @@ export class UiCardBuilder {
         return this.add(html(content, options));
     }
     /**
-     * Appends a `MultiSlotRowElement` component.
-     *
-     * @remarks
-     * Multi-slot horizontal row with declared column width proportions.
-     * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
-     *
-     * @param slots - List of slots comprising the row
-     * @param options - Optional component settings (proportions).
-     * @returns This builder instance for method chaining.
-     */
-    addMultiSlotRow(slots, options) {
-        return this.add(multiSlotRow(slots, options));
-    }
-    /**
-     * Appends a `MultiSlotRowElement` component.
+     * Appends a `MultiSlotElement` component.
      *
      * @remarks
-     * Multi-slot horizontal row with declared column width proportions.
-     * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
+     * Multi-slot horizontal row layout comprising slots with individual widths.
      *
      * @param slots - List of slots comprising the row
-     * @param options - Optional component settings (proportions).
      * @returns This builder instance for method chaining.
      */
-    addMultiSlot(slots, options) {
-        return this.add(multiSlot(slots, options));
+    addMultiSlot(slots) {
+        return this.add(multiSlot(slots));
     }
     /**
-     * Appends a `LabelValueRowElement` component.
+     * Appends a `FlowingElement` component.
      *
      * @remarks
-     * Standard label and value row.
-     * Displays a muted label on the left and value representation on the right with a vertical dividing line.
+     * Flowing inline layout container with automatic line wrapping.
+     * Renders child elements horizontally in sequence, automatically wrapping to the next line when space runs out.
      *
-     * @param label - Key or descriptive label displayed muted on the left
-     * @param value - Rendered value element on the right
-     * @param options - Optional component settings (withDivider (defaults to `false`)).
+     * @param elements - List of child elements rendered sequentially with line wrapping
+     * @param options - Optional component settings (separator).
      * @returns This builder instance for method chaining.
      */
-    addLabelValueRow(label, value, options) {
-        return this.add(labelValueRow(label, value, options));
+    addFlowing(elements, options) {
+        return this.add(flowing(elements, options));
     }
     /**
-     * Appends a `LabelValueRowElement` component.
+     * Appends a `LabelValueElement` component.
      *
      * @remarks
      * Standard label and value row.
@@ -2378,7 +2401,7 @@ export class UiCardBuilder {
      * Supports header/borderless modes, 2-column key-value tables, and 3-column data tables.
      *
      * @param rows - Tabular data rows
-     * @param options - Optional component settings (hasHeader (defaults to `true`), isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
+     * @param options - Optional component settings (isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
      * @returns This builder instance for method chaining.
      */
     addTable(rows, options) {
@@ -2573,38 +2596,41 @@ export function primitiveModifiers(options) {
     };
 }
 /**
- * Creates a `StringShortElement` component instance.
+ * Creates a `StringElement` component instance.
  *
  * @remarks
- * Short string primitive element.
- * Supports plain text or compact chip pill presentation.
+ * Universal textual string primitive element.
+ * Supports plain text, compact chip pill, or multiline pre-wrapped presentation.
  *
  * @param value - Text value
  * @param options - Optional settings (representation (defaults to `plain`), modifiers).
- * @returns A strongly-typed `StringShortElement` object.
+ * @returns A strongly-typed `StringElement` object.
  */
-export function stringShort(value, options) {
+export function string(value, options) {
     return {
-        type: "string-short",
+        type: "string",
         value,
-        representation: options?.representation ?? StringShortRepresentation.plain,
+        representation: options?.representation ?? StringRepresentation.plain,
         modifiers: options?.modifiers
     };
 }
 /**
- * Creates a `StringLongElement` component instance.
+ * Creates a `StringsElement` component instance.
  *
  * @remarks
- * Multiline text block primitive element for descriptions, comments, or prose.
+ * Collection of textual string values rendered as a sequence of inline items or chips.
+ * Supports visual separators (comma, dot, slash, bar, dash, space) and copyable affordance.
  *
- * @param value - Text value
- * @param options - Optional settings (modifiers).
- * @returns A strongly-typed `StringLongElement` object.
+ * @param values - Array of string values
+ * @param options - Optional settings (representation (defaults to `plain`), separator, modifiers).
+ * @returns A strongly-typed `StringsElement` object.
  */
-export function stringLong(value, options) {
+export function strings(values, options) {
     return {
-        type: "string-long",
-        value,
+        type: "strings",
+        values: [...values],
+        representation: options?.representation ?? StringRepresentation.plain,
+        separator: options?.separator,
         modifiers: options?.modifiers
     };
 }
@@ -2701,7 +2727,7 @@ export function identifier(value, options) {
  * @remarks
  * Aspect ratio representation (e.g. "16:9", "4:3", "1:1").
  *
- * @param value - Aspect ratio textual expression
+ * @param value - Aspect ratio numerical expression
  * @param options - Optional settings (modifiers).
  * @returns A strongly-typed `RatioElement` object.
  */
@@ -2712,20 +2738,43 @@ export function ratio(value, options) {
         modifiers: options?.modifiers
     };
 }
+/**
+ * Creates a `DimensionsElement` component instance.
+ *
+ * @remarks
+ * Image dimensions representation displaying formatted width and height in pixels.
+ *
+ * @param width - Width in pixels
+ * @param height - Height in pixels
+ * @param options - Optional settings (modifiers).
+ * @returns A strongly-typed `DimensionsElement` object.
+ */
+export function dimensions(width, height, options) {
+    return {
+        type: "dimensions",
+        width,
+        height,
+        modifiers: options?.modifiers
+    };
+}
 /**
  * Creates a `ColourElement` component instance.
  *
  * @remarks
- * Single color swatch representation with hex value and copy affordance.
+ * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
  *
  * @param value - Hexadecimal color code
- * @param options - Optional settings (modifiers).
+ * @param options - Optional settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
  * @returns A strongly-typed `ColourElement` object.
  */
 export function colour(value, options) {
     return {
-        type: "color-swatch",
+        type: "color",
         value,
+        label: options?.label,
+        showText: options?.showText ?? true,
+        shape: options?.shape ?? Shape.circle,
+        size: options?.size ?? Size.medium,
         modifiers: options?.modifiers
     };
 }
@@ -2733,16 +2782,20 @@ export function colour(value, options) {
  * Creates a `ColourElement` component instance.
  *
  * @remarks
- * Single color swatch representation with hex value and copy affordance.
+ * Single color representation with hex value, shape/size styling, text display toggle, and copy affordance.
  *
  * @param value - Hexadecimal color code
- * @param options - Optional settings (modifiers).
+ * @param options - Optional settings (label, showText (defaults to `true`), shape (defaults to `circle`), size (defaults to `medium`), modifiers).
  * @returns A strongly-typed `ColourElement` object.
  */
-export function colorSwatch(value, options) {
+export function color(value, options) {
     return {
-        type: "color-swatch",
+        type: "color",
         value,
+        label: options?.label,
+        showText: options?.showText ?? true,
+        shape: options?.shape ?? Shape.circle,
+        size: options?.size ?? Size.medium,
         modifiers: options?.modifiers
     };
 }
@@ -2843,36 +2896,21 @@ export function numberMeter(value, options) {
     };
 }
 /**
- * Creates a `BooleanPlainElement` component instance.
+ * Creates a `BooleanElement` component instance.
  *
  * @remarks
- * Plain boolean value representation (textual "true" / "false").
+ * Universal boolean primitive element.
+ * Supports standard plain text or badge pill presentation with customizable labels and variants.
  *
  * @param value - Boolean state value
- * @param options - Optional settings (modifiers).
- * @returns A strongly-typed `BooleanPlainElement` object.
+ * @param options - Optional settings (representation (defaults to `plain`), trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
+ * @returns A strongly-typed `BooleanElement` object.
  */
-export function booleanPlain(value, options) {
+export function boolean(value, options) {
     return {
-        type: "boolean-plain",
-        value,
-        modifiers: options?.modifiers
-    };
-}
-/**
- * Creates a `BooleanBadgeElement` component instance.
- *
- * @remarks
- * Visual badge pill representation of a boolean state.
- *
- * @param value - Boolean state value
- * @param options - Optional settings (trueLabel (defaults to `true`), falseLabel (defaults to `false`), variant (defaults to `neutral`), modifiers).
- * @returns A strongly-typed `BooleanBadgeElement` object.
- */
-export function booleanBadge(value, options) {
-    return {
-        type: "boolean-badge",
+        type: "boolean",
         value,
+        representation: options?.representation ?? BooleanRepresentation.plain,
         trueLabel: options?.trueLabel ?? "true",
         falseLabel: options?.falseLabel ?? "false",
         variant: options?.variant ?? BadgeVariant.neutral,
@@ -2885,15 +2923,15 @@ export function booleanBadge(value, options) {
  * @remarks
  * Formatted date and time representation.
  *
- * @param value - ISO 8601 date string or epoch timestamp in milliseconds
- * @param options - Optional settings (format (defaults to `full`), modifiers).
+ * @param value - The timestamp in milliseconds
+ * @param options - Optional settings (format (defaults to `datetime`), modifiers).
  * @returns A strongly-typed `TimestampElement` object.
  */
 export function timestamp(value, options) {
     return {
         type: "timestamp",
         value,
-        format: options?.format ?? TimestampFormat.full,
+        format: options?.format ?? TimestampFormat.datetime,
         modifiers: options?.modifiers
     };
 }
@@ -2935,36 +2973,6 @@ export function imageRef(src, options) {
         placeholder: options?.placeholder
     };
 }
-/**
- * Creates a `DominantColourSetElement` component instance.
- *
- * @remarks
- * Dominant color set palette rendered in descending dominance order.
- *
- * @param colors - List of hexadecimal color strings in descending priority
- * @returns A strongly-typed `DominantColourSetElement` object.
- */
-export function dominantColourSet(colors) {
-    return {
-        type: "color-set",
-        colors: [...colors]
-    };
-}
-/**
- * Creates a `DominantColourSetElement` component instance.
- *
- * @remarks
- * Dominant color set palette rendered in descending dominance order.
- *
- * @param colors - List of hexadecimal color strings in descending priority
- * @returns A strongly-typed `DominantColourSetElement` object.
- */
-export function dominantColors(colors) {
-    return {
-        type: "color-set",
-        colors: [...colors]
-    };
-}
 /**
  * Creates a `ButtonActionElement` component instance.
  *
@@ -3091,63 +3099,40 @@ export function slot(content, options) {
     };
 }
 /**
- * Creates a `MultiSlotRowElement` component instance.
- *
- * @remarks
- * Multi-slot horizontal row with declared column width proportions.
- * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
- *
- * @param slots - List of slots comprising the row
- * @param options - Optional settings (proportions).
- * @returns A strongly-typed `MultiSlotRowElement` object.
- */
-export function multiSlotRow(slots, options) {
-    return {
-        type: "multi-slot",
-        slots: [...slots],
-        proportions: options?.proportions
-    };
-}
-/**
- * Creates a `MultiSlotRowElement` component instance.
+ * Creates a `MultiSlotElement` component instance.
  *
  * @remarks
- * Multi-slot horizontal row with declared column width proportions.
- * Examples: "1/3 + 2/3", "equal thirds", "1/4 + 3/4".
+ * Multi-slot horizontal row layout comprising slots with individual widths.
  *
  * @param slots - List of slots comprising the row
- * @param options - Optional settings (proportions).
- * @returns A strongly-typed `MultiSlotRowElement` object.
+ * @returns A strongly-typed `MultiSlotElement` object.
  */
-export function multiSlot(slots, options) {
+export function multiSlot(slots) {
     return {
         type: "multi-slot",
-        slots: [...slots],
-        proportions: options?.proportions
+        slots: [...slots]
     };
 }
 /**
- * Creates a `LabelValueRowElement` component instance.
+ * Creates a `FlowingElement` component instance.
  *
  * @remarks
- * Standard label and value row.
- * Displays a muted label on the left and value representation on the right with a vertical dividing line.
+ * Flowing inline layout container with automatic line wrapping.
+ * Renders child elements horizontally in sequence, automatically wrapping to the next line when space runs out.
  *
- * @param label - Key or descriptive label displayed muted on the left
- * @param value - Rendered value element on the right
- * @param options - Optional settings (withDivider (defaults to `false`)).
- * @returns A strongly-typed `LabelValueRowElement` object.
+ * @param elements - List of child elements rendered sequentially with line wrapping
+ * @param options - Optional settings (separator).
+ * @returns A strongly-typed `FlowingElement` object.
  */
-export function labelValueRow(label, value, options) {
+export function flowing(elements, options) {
     return {
-        type: "label-value",
-        label,
-        value,
-        withDivider: options?.withDivider ?? false
+        type: "flowing",
+        elements: [...elements],
+        separator: options?.separator
     };
 }
 /**
- * Creates a `LabelValueRowElement` component instance.
+ * Creates a `LabelValueElement` component instance.
  *
  * @remarks
  * Standard label and value row.
@@ -3156,7 +3141,7 @@ export function labelValueRow(label, value, options) {
  * @param label - Key or descriptive label displayed muted on the left
  * @param value - Rendered value element on the right
  * @param options - Optional settings (withDivider (defaults to `false`)).
- * @returns A strongly-typed `LabelValueRowElement` object.
+ * @returns A strongly-typed `LabelValueElement` object.
  */
 export function labelValue(label, value, options) {
     return {
@@ -3172,14 +3157,15 @@ export function labelValue(label, value, options) {
  * @remarks
  * Column definition for structured tables.
  *
- * @param options - Optional settings (header, align (defaults to `left`), width).
+ * @param options - Optional settings (header, align (defaults to `left`), width, widthMode (defaults to `fixed`)).
  * @returns A strongly-typed `TableColumn` object.
  */
 export function tableColumn(options) {
     return {
         header: options?.header,
         align: options?.align ?? TableColumnAlign.left,
-        width: options?.width
+        width: options?.width,
+        widthMode: options?.widthMode ?? TableColumnWidthMode.fixed
     };
 }
 /**
@@ -3204,14 +3190,13 @@ export function tableRow(cells) {
  * Supports header/borderless modes, 2-column key-value tables, and 3-column data tables.
  *
  * @param rows - Tabular data rows
- * @param options - Optional settings (hasHeader (defaults to `true`), isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
+ * @param options - Optional settings (isStriped (defaults to `false`), withColumnSeparators (defaults to `false`), withRowSeparators (defaults to `false`), columns).
  * @returns A strongly-typed `TableElement` object.
  */
 export function table(rows, options) {
     return {
         type: "table",
         rows: [...rows],
-        hasHeader: options?.hasHeader ?? true,
         isStriped: options?.isStriped ?? false,
         withColumnSeparators: options?.withColumnSeparators ?? false,
         withRowSeparators: options?.withRowSeparators ?? false,
@@ -3374,7 +3359,7 @@ export function isSlot(value, withDeepValidation = false) {
     }
     const element = value;
     return (element.label === undefined || typeof element.label === "string") &&
-        (element.width === undefined || typeof element.width === "string") &&
+        (element.width === undefined || typeof element.width === "number") &&
         ("content" in value && isUiElement(element.content, true));
 }
 /**
@@ -3394,7 +3379,8 @@ export function isTableColumn(value, withDeepValidation = false) {
     const element = value;
     return (element.header === undefined || typeof element.header === "string") &&
         (element.align === undefined || Object.values(TableColumnAlign).includes(element.align)) &&
-        (element.width === undefined || typeof element.width === "string");
+        (element.width === undefined || typeof element.width === "number") &&
+        (element.widthMode === undefined || Object.values(TableColumnWidthMode).includes(element.widthMode));
 }
 /**
  * Type guard predicate verifying whether an unknown value conforms to `TableRow`.
@@ -3465,10 +3451,10 @@ export function isUiElement(value, withDeepValidation = false) {
     }
     const element = value;
     switch (element.type) {
-        case "string-short":
-            return isStringShortElement(element, true);
-        case "string-long":
-            return isStringLongElement(element, true);
+        case "string":
+            return isStringElement(element, true);
+        case "strings":
+            return isStringsElement(element, true);
         case "string-code":
             return isStringCodeElement(element, true);
         case "xml":
@@ -3481,7 +3467,9 @@ export function isUiElement(value, withDeepValidation = false) {
             return isIdentifierElement(element, true);
         case "ratio":
             return isRatioElement(element, true);
-        case "color-swatch":
+        case "dimensions":
+            return isDimensionsElement(element, true);
+        case "color":
             return isColourElement(element, true);
         case "number-unbounded":
             return isNumberUnboundedElement(element, true);
@@ -3489,24 +3477,22 @@ export function isUiElement(value, withDeepValidation = false) {
             return isNumberBoundedStarsElement(element, true);
         case "number-meter":
             return isNumberBoundedMeterElement(element, true);
-        case "boolean-plain":
-            return isBooleanPlainElement(element, true);
-        case "boolean-badge":
-            return isBooleanBadgeElement(element, true);
+        case "boolean":
+            return isBooleanElement(element, true);
         case "timestamp":
             return isTimestampElement(element, true);
         case "image-ref":
             return isImageReferenceElement(element, true);
-        case "color-set":
-            return isDominantColourSetElement(element, true);
         case "markdown":
             return isMarkdownBlockElement(element, true);
         case "html":
             return isHtmlBlockElement(element, true);
         case "multi-slot":
-            return isMultiSlotRowElement(element, true);
+            return isMultiSlotElement(element, true);
+        case "flowing":
+            return isFlowingElement(element, true);
         case "label-value":
-            return isLabelValueRowElement(element, true);
+            return isLabelValueElement(element, true);
         case "table":
             return isTableElement(element, true);
         case "repeating-group":
@@ -3520,14 +3506,14 @@ export function isUiElement(value, withDeepValidation = false) {
     }
 }
 /**
- * Type guard predicate narrowing a value to `StringShortElement`.
+ * Type guard predicate narrowing a value to `StringElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `StringShortElement` (type = "string-short"), otherwise `false`.
+ * @returns `true` if the value is a `StringElement` (type = "string"), otherwise `false`.
  */
-export function isStringShortElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "string-short") {
+export function isStringElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "string") {
         return false;
     }
     if (!withDeepValidation) {
@@ -3535,25 +3521,27 @@ export function isStringShortElement(value, withDeepValidation = false) {
     }
     const element = value;
     return ("value" in value && typeof element.value === "string") &&
-        (element.representation === undefined || Object.values(StringShortRepresentation).includes(element.representation)) &&
+        (element.representation === undefined || Object.values(StringRepresentation).includes(element.representation)) &&
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
 /**
- * Type guard predicate narrowing a value to `StringLongElement`.
+ * Type guard predicate narrowing a value to `StringsElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `StringLongElement` (type = "string-long"), otherwise `false`.
+ * @returns `true` if the value is a `StringsElement` (type = "strings"), otherwise `false`.
  */
-export function isStringLongElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "string-long") {
+export function isStringsElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "strings") {
         return false;
     }
     if (!withDeepValidation) {
         return true;
     }
     const element = value;
-    return ("value" in value && typeof element.value === "string") &&
+    return ("values" in value && (Array.isArray(element.values) && element.values.every((item) => typeof item === "string"))) &&
+        (element.representation === undefined || Object.values(StringRepresentation).includes(element.representation)) &&
+        (element.separator === undefined || Object.values(Separator).includes(element.separator)) &&
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
 /**
@@ -3663,18 +3651,37 @@ export function isRatioElement(value, withDeepValidation = false) {
         return true;
     }
     const element = value;
-    return ("value" in value && typeof element.value === "string") &&
+    return ("value" in value && typeof element.value === "number") &&
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
+/**
+ * Type guard predicate narrowing a value to `DimensionsElement`.
+ *
+ * @param value - The value to inspect.
+ * @param withDeepValidation - Whether to recursively validate all properties.
+ * @returns `true` if the value is a `DimensionsElement` (type = "dimensions"), otherwise `false`.
+ */
+export function isDimensionsElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "dimensions") {
+        return false;
+    }
+    if (!withDeepValidation) {
+        return true;
+    }
+    const element = value;
+    return ("width" in value && typeof element.width === "number") &&
+        ("height" in value && typeof element.height === "number") &&
+        (element.modifiers === undefined || isBaseModifiers(element.modifiers, true));
+}
 /**
  * Type guard predicate narrowing a value to `ColourElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `ColourElement` (type = "color-swatch"), otherwise `false`.
+ * @returns `true` if the value is a `ColourElement` (type = "color"), otherwise `false`.
  */
 export function isColourElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "color-swatch") {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "color") {
         return false;
     }
     if (!withDeepValidation) {
@@ -3682,6 +3689,10 @@ export function isColourElement(value, withDeepValidation = false) {
     }
     const element = value;
     return ("value" in value && typeof element.value === "string") &&
+        (element.label === undefined || typeof element.label === "string") &&
+        (element.showText === undefined || typeof element.showText === "boolean") &&
+        (element.shape === undefined || Object.values(Shape).includes(element.shape)) &&
+        (element.size === undefined || Object.values(Size).includes(element.size)) &&
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
 /**
@@ -3745,32 +3756,14 @@ export function isNumberBoundedMeterElement(value, withDeepValidation = false) {
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
 /**
- * Type guard predicate narrowing a value to `BooleanPlainElement`.
+ * Type guard predicate narrowing a value to `BooleanElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `BooleanPlainElement` (type = "boolean-plain"), otherwise `false`.
+ * @returns `true` if the value is a `BooleanElement` (type = "boolean"), otherwise `false`.
  */
-export function isBooleanPlainElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "boolean-plain") {
-        return false;
-    }
-    if (!withDeepValidation) {
-        return true;
-    }
-    const element = value;
-    return ("value" in value && typeof element.value === "boolean") &&
-        (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
-}
-/**
- * Type guard predicate narrowing a value to `BooleanBadgeElement`.
- *
- * @param value - The value to inspect.
- * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `BooleanBadgeElement` (type = "boolean-badge"), otherwise `false`.
- */
-export function isBooleanBadgeElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "boolean-badge") {
+export function isBooleanElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "boolean") {
         return false;
     }
     if (!withDeepValidation) {
@@ -3778,6 +3771,7 @@ export function isBooleanBadgeElement(value, withDeepValidation = false) {
     }
     const element = value;
     return ("value" in value && typeof element.value === "boolean") &&
+        (element.representation === undefined || Object.values(BooleanRepresentation).includes(element.representation)) &&
         (element.trueLabel === undefined || typeof element.trueLabel === "string") &&
         (element.falseLabel === undefined || typeof element.falseLabel === "string") &&
         (element.variant === undefined || Object.values(BadgeVariant).includes(element.variant)) &&
@@ -3798,7 +3792,7 @@ export function isTimestampElement(value, withDeepValidation = false) {
         return true;
     }
     const element = value;
-    return ("value" in value && typeof element.value === "string") &&
+    return ("value" in value && typeof element.value === "number") &&
         (element.format === undefined || Object.values(TimestampFormat).includes(element.format)) &&
         (element.modifiers === undefined || isPrimitiveModifiers(element.modifiers, true));
 }
@@ -3823,31 +3817,32 @@ export function isImageReferenceElement(value, withDeepValidation = false) {
         (element.placeholder === undefined || typeof element.placeholder === "string");
 }
 /**
- * Type guard predicate narrowing a value to `DominantColourSetElement`.
+ * Type guard predicate narrowing a value to `MarkdownBlockElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `DominantColourSetElement` (type = "color-set"), otherwise `false`.
+ * @returns `true` if the value is a `MarkdownBlockElement` (type = "markdown"), otherwise `false`.
  */
-export function isDominantColourSetElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "color-set") {
+export function isMarkdownBlockElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "markdown") {
         return false;
     }
     if (!withDeepValidation) {
         return true;
     }
     const element = value;
-    return ("colors" in value && (Array.isArray(element.colors) && element.colors.every((item) => typeof item === "string")));
+    return ("content" in value && typeof element.content === "string") &&
+        (element.modifiers === undefined || isBaseModifiers(element.modifiers, true));
 }
 /**
- * Type guard predicate narrowing a value to `MarkdownBlockElement`.
+ * Type guard predicate narrowing a value to `HtmlBlockElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `MarkdownBlockElement` (type = "markdown"), otherwise `false`.
+ * @returns `true` if the value is a `HtmlBlockElement` (type = "html"), otherwise `false`.
  */
-export function isMarkdownBlockElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "markdown") {
+export function isHtmlBlockElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "html") {
         return false;
     }
     if (!withDeepValidation) {
@@ -3858,49 +3853,48 @@ export function isMarkdownBlockElement(value, withDeepValidation = false) {
         (element.modifiers === undefined || isBaseModifiers(element.modifiers, true));
 }
 /**
- * Type guard predicate narrowing a value to `HtmlBlockElement`.
+ * Type guard predicate narrowing a value to `MultiSlotElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `HtmlBlockElement` (type = "html"), otherwise `false`.
+ * @returns `true` if the value is a `MultiSlotElement` (type = "multi-slot"), otherwise `false`.
  */
-export function isHtmlBlockElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "html") {
+export function isMultiSlotElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "multi-slot") {
         return false;
     }
     if (!withDeepValidation) {
         return true;
     }
     const element = value;
-    return ("content" in value && typeof element.content === "string") &&
-        (element.modifiers === undefined || isBaseModifiers(element.modifiers, true));
+    return ("slots" in value && (Array.isArray(element.slots) && element.slots.every((item) => isSlot(item, true))));
 }
 /**
- * Type guard predicate narrowing a value to `MultiSlotRowElement`.
+ * Type guard predicate narrowing a value to `FlowingElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `MultiSlotRowElement` (type = "multi-slot"), otherwise `false`.
+ * @returns `true` if the value is a `FlowingElement` (type = "flowing"), otherwise `false`.
  */
-export function isMultiSlotRowElement(value, withDeepValidation = false) {
-    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "multi-slot") {
+export function isFlowingElement(value, withDeepValidation = false) {
+    if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "flowing") {
         return false;
     }
     if (!withDeepValidation) {
         return true;
     }
     const element = value;
-    return (element.proportions === undefined || typeof element.proportions === "string") &&
-        ("slots" in value && (Array.isArray(element.slots) && element.slots.every((item) => isSlot(item, true))));
+    return (element.separator === undefined || Object.values(Separator).includes(element.separator)) &&
+        ("elements" in value && (Array.isArray(element.elements) && element.elements.every((item) => isUiElement(item, true))));
 }
 /**
- * Type guard predicate narrowing a value to `LabelValueRowElement`.
+ * Type guard predicate narrowing a value to `LabelValueElement`.
  *
  * @param value - The value to inspect.
  * @param withDeepValidation - Whether to recursively validate all properties.
- * @returns `true` if the value is a `LabelValueRowElement` (type = "label-value"), otherwise `false`.
+ * @returns `true` if the value is a `LabelValueElement` (type = "label-value"), otherwise `false`.
  */
-export function isLabelValueRowElement(value, withDeepValidation = false) {
+export function isLabelValueElement(value, withDeepValidation = false) {
     if (typeof value !== "object" || value === null || !("type" in value) || value.type !== "label-value") {
         return false;
     }
@@ -3927,8 +3921,7 @@ export function isTableElement(value, withDeepValidation = false) {
         return true;
     }
     const element = value;
-    return (element.hasHeader === undefined || typeof element.hasHeader === "boolean") &&
-        (element.isStriped === undefined || typeof element.isStriped === "boolean") &&
+    return (element.isStriped === undefined || typeof element.isStriped === "boolean") &&
         (element.withColumnSeparators === undefined || typeof element.withColumnSeparators === "boolean") &&
         (element.withRowSeparators === undefined || typeof element.withRowSeparators === "boolean") &&
         (element.columns === undefined || (Array.isArray(element.columns) && element.columns.every((item) => isTableColumn(item, true)))) &&