xmlui 0.7.27 → 0.7.29

package/dist/scripts/src/components/NoResult/NoResult.js

@@ -18,11 +18,15 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         icon: (0, ComponentDefs_1.d)(`This property defines the icon to display with the component.`),
-        hideIcon: (0, ComponentDefs_1.d)(`This boolean property indicates if the icon should be hidden.`),
+        hideIcon: {
+            description: `This boolean property indicates if the icon should be hidden.`,
+            valueType: "boolean",
+            defaultValue: "false",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`border-${COMP}`]: '0px solid $color-border',
+        [`border-${COMP}`]: "0px solid $color-border",
         [`padding-vertical-${COMP}`]: "$space-2",
         [`gap-icon-${COMP}`]: "$space-2",
         [`size-icon-${COMP}`]: "$space-8",

package/dist/scripts/src/components/NumberBox/NumberBox.js

@@ -33,12 +33,28 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
-        hasSpinBox: (0, ComponentDefs_1.d)(`This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`, null, "boolean", true),
-        step: (0, ComponentDefs_1.d)(`This prop governs how big the step when clicking on the spinner of the field.`, null, "number"),
-        integersOnly: (0, ComponentDefs_1.d)(`This boolean property signs whether the input field accepts integers only (\`true\`) ` +
-            `or not (\`false\`).`, null, "boolean", false),
-        zeroOrPositive: (0, ComponentDefs_1.d)(`This boolean property determines whether the input value can only be 0 or positive numbers ` +
-            `(\`true\`) or also negative (\`false\`).`, null, "boolean", false),
+        hasSpinBox: {
+            description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        step: {
+            description: `This prop governs how big the step when clicking on the spinner of the field.`,
+            valueType: "number",
+            defaultValue: 1,
+        },
+        integersOnly: {
+            description: `This boolean property signs whether the input field accepts integers only (\`true\`) ` +
+                `or not (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        zeroOrPositive: {
+            description: `This boolean property determines whether the input value can only be 0 or positive numbers ` +
+                `(\`true\`) or also negative (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
             `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
         maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +

package/dist/scripts/src/components/Option/Option.js

@@ -11,7 +11,7 @@ const container_helpers_1 = require("../container-helpers");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
-        `(such as \`Select\`, \`Combobox\`, and others) may use nested \`Option\` instances ` +
+        `(such as \`Select\`, \`AutoComplete\`, and others) may use nested \`Option\` instances ` +
         `from which the user can select.`,
     props: {
         label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +

package/dist/scripts/src/components/ProgressBar/ProgressBar.js

@@ -14,7 +14,11 @@ const COMP = "ProgressBar";
 exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
     description: `A \`${COMP}\` component visually represents the progress of a task or process.`,
     props: {
-        value: (0, ComponentDefs_1.d)(`This property defines the progress value with a number between 0 and 1.`),
+        value: {
+            description: `This property defines the progress value with a number between 0 and 1.`,
+            valueType: "number",
+            defaultValue: 0,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/Spinner/Spinner.js

@@ -15,8 +15,16 @@ exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is an animated indicator that represents a particular action ` +
         `in progress without a deterministic progress value.`,
     props: {
-        delay: (0, ComponentDefs_1.d)(`The delay in milliseconds before the spinner is displayed.`),
-        fullScreen: (0, ComponentDefs_1.d)(`If set to \`true\`, the component will be rendered in a full screen container.`),
+        delay: {
+            description: `The delay in milliseconds before the spinner is displayed.`,
+            valueType: "number",
+            defaultValue: 400,
+        },
+        fullScreen: {
+            description: `If set to \`true\`, the component will be rendered in a full screen container.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         themeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Spinner_module_scss_1.default.themeVars),

package/dist/scripts/src/components/Splitter/Splitter.js

@@ -18,20 +18,45 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component divides a container (such as a window, panel, pane, etc.) ` +
         `into two resizable sections.`,
     props: {
-        swapped: (0, ComponentDefs_1.d)(`This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
-            `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`),
+        swapped: {
+            description: `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
+                `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         splitterTemplate: (0, metadata_helpers_1.dComponent)(`The divider can be customized using XMLUI components via this property.`),
-        initialPrimarySize: (0, ComponentDefs_1.d)(`This optional number property sets the initial size of the primary section. The unit of ` +
-            `the size value is in pixels or percentages.`),
-        minPrimarySize: (0, ComponentDefs_1.d)(`This property sets the minimum size the primary section can have. The unit of the size ` +
-            `value is in pixels or percentages.`),
-        maxPrimarySize: (0, ComponentDefs_1.d)(`This property sets the maximum size the primary section can have. The unit of the size ` +
-            `value is in pixels or percentages.`),
-        floating: (0, ComponentDefs_1.d)(`Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
-            `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`),
-        orientation: (0, ComponentDefs_1.d)(`Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
-            `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
-            `next to each other (\`horizontal\`).`),
+        initialPrimarySize: {
+            description: `This optional number property sets the initial size of the primary section. The unit of ` +
+                `the size value is in pixels or percentages.`,
+            valueType: "string",
+            defaultValue: "50%",
+        },
+        minPrimarySize: {
+            description: `This property sets the minimum size the primary section can have. The unit of the size ` +
+                `value is in pixels or percentages.`,
+            valueType: "string",
+            defaultValue: "0%",
+        },
+        maxPrimarySize: {
+            description: `This property sets the maximum size the primary section can have. The unit of the size ` +
+                `value is in pixels or percentages.`,
+            valueType: "string",
+            defaultValue: "100%",
+        },
+        floating: {
+            description: `Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
+                `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        orientation: {
+            description: `Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
+                `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
+                `next to each other (\`horizontal\`).`,
+            valueType: "string",
+            availableValues: ["horizontal", "vertical"],
+            defaultValue: "vertical",
+        },
     },
     events: {
         resize: (0, ComponentDefs_1.d)(`This event fires when the component is resized.`),

package/dist/scripts/src/components/Stack/Stack.js

@@ -13,26 +13,54 @@ const EngineError_1 = require("../../components-core/EngineError");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const StackNative_1 = require("./StackNative");
+const abstractions_1 = require("../abstractions");
 const COMP = "Stack";
-const HORIZONTAL_ALIGNMENT = (0, ComponentDefs_1.d)(`Manages the horizontal content alignment for each child element in the Stack.`);
-const VERTICAL_ALIGNMENT = (0, ComponentDefs_1.d)(`Manages the vertical content alignment for each child element in the Stack.`);
+const HORIZONTAL_ALIGNMENT = {
+    description: "Manages the horizontal content alignment for each child element in the Stack.",
+    availableValues: abstractions_1.alignmentOptionValues,
+    valueType: "string",
+    defaultValue: "start",
+};
+const VERTICAL_ALIGNMENT = {
+    description: "Manages the vertical content alignment for each child element in the Stack.",
+    availableValues: abstractions_1.alignmentOptionValues,
+    valueType: "string",
+    defaultValue: "start",
+};
 const stackMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`Stack\` is a layout container displaying children in a horizontal or vertical stack.`,
     props: {
-        gap: (0, ComponentDefs_1.d)(`Optional size value indicating the gap between child elements.`),
-        reverse: (0, ComponentDefs_1.d)(`Optional boolean property to reverse the order of child elements.`),
-        wrapContent: (0, ComponentDefs_1.d)(`Optional boolean which wraps the content if set to true and the available space is not big ` +
-            `enough. Works in all orientations.`),
-        orientation: (0, ComponentDefs_1.d)(`An optional property that governs the Stack's orientation (whether the Stack lays out its ` +
-            `children in a row or a column).`),
+        gap: {
+            description: "Optional size value indicating the gap between child elements.",
+            valueType: "string",
+            defaultValue: "$gap-normal",
+        },
+        reverse: {
+            description: "Optional boolean property to reverse the order of child elements.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        wrapContent: {
+            description: "Optional boolean which wraps the content if set to true and the available " +
+                "space is not big enough. Works only with horizontal orientations.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        orientation: {
+            description: "An optional property that governs the Stack's orientation (whether " +
+                "the Stack lays out its children in a row or a column).",
+            availableValues: ["horizontal", "vertical"],
+            valueType: "string",
+            defaultValue: StackNative_1.DEFAULT_ORIENTATION,
+        },
         horizontalAlignment: HORIZONTAL_ALIGNMENT,
         verticalAlignment: VERTICAL_ALIGNMENT,
-        hoverContainer: (0, ComponentDefs_1.d)("Reserved for future use"),
-        visibleOnHover: (0, ComponentDefs_1.d)("Reserved for future use"),
+        hoverContainer: (0, metadata_helpers_1.dInternal)("Reserved for future use"),
+        visibleOnHover: (0, metadata_helpers_1.dInternal)("Reserved for future use"),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),
-        mounted: (0, ComponentDefs_1.d)("Reserved for future use"),
+        mounted: (0, metadata_helpers_1.dInternal)("Reserved for future use"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Stack_module_scss_1.default.themeVars),
 });

package/dist/scripts/src/components/StickyBox/StickyBox.js

@@ -16,8 +16,13 @@ exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a component that "sticks" or remains fixed at the top or bottom ` +
         `position on the screen as the user scrolls.`,
     props: {
-        to: (0, ComponentDefs_1.d)(`This property determines whether the StickyBox should be anchored to ` +
-            `the \`top\` or \`bottom\`.`),
+        to: {
+            description: "This property determines whether the StickyBox should be anchored to " +
+                "the \`top\` or \`bottom\`.",
+            availableValues: ["top", "bottom"],
+            valueType: "string",
+            defaultValue: "top",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(StickyBox_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/Switch/Switch.js

@@ -32,7 +32,6 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
             `of the ${COMP} besides its label.`),
     },
     events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),

package/dist/scripts/src/components/Table/Table.js

@@ -22,18 +22,25 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a component that displays cells organized into rows and columns. The \`${COMP}\` ` +
         `component is virtualized so it only renders visible cells.`,
     props: {
-        items: (0, ComponentDefs_1.d)(`You can use \`items\` as an alias for the \`data\` property. ` +
+        items: (0, metadata_helpers_1.dInternal)(`You can use \`items\` as an alias for the \`data\` property. ` +
             `When you bind the table to a data source (e.g. an API endpoint), ` +
             `the \`data\` acts as the property that accepts a URL to fetch information from an API. ` +
             `When both \`items\` and \`data\` are used, \`items\` has priority.`),
         data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
             `that the \`Table\` can display.`),
-        isPaginated: (0, ComponentDefs_1.d)(`This property adds pagination controls to the \`${COMP}\`.`),
+        isPaginated: {
+            description: `This property adds pagination controls to the \`${COMP}\`.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         loading: (0, ComponentDefs_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
         headerHeight: (0, ComponentDefs_1.d)(`This optional property is used to specify the height of the table header.`),
         rowsSelectable: (0, ComponentDefs_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
-        pageSizes: (0, ComponentDefs_1.d)(`Describes how big a page should be for pagination.`),
+        pageSizes: {
+            description: "This property holds an array of page sizes (numbers) the user can select for " +
+                "pagination. If this property is not defined, the component allows only a page size of 10 items.",
+        },
         rowDisabledPredicate: (0, ComponentDefs_1.d)(`This property defines a predicate function with a return value that determines if the ` +
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),
@@ -42,21 +49,31 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         sortDirection: (0, ComponentDefs_1.d)(`This property determines the sort order to be \`ascending\` or \`descending\`. This ` +
             `property only works if the [\`sortBy\`](#sortby) property is also set.`),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        hideHeader: (0, ComponentDefs_1.d)(`Set the header visibility using this property. Set it to \`true\` to hide the header.`),
-        iconNoSort: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when ` +
-            `when sorting is enabled and sorting is not done according to the column.`),
-        iconSortAsc: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when sorting ` +
-            `is enabled, sorting is done according to the column, and the column is sorted in ` +
-            `ascending order.`),
-        iconSortDesc: (0, ComponentDefs_1.d)(`Allows the customization of the icon displayed in the ${COMP} column header when sorting ` +
-            `is enabled, sorting is done according to the column, and the column is sorted in ` +
-            `descending order.`),
-        enableMultiRowSelection: (0, ComponentDefs_1.d)(`This boolean property indicates whether you can select multiple rows in the table. ` +
-            `This property only has an effect when the rowsSelectable property is set. Setting it ` +
-            `to \`false\` limits selection to a single row.`),
-        alwaysShowSelectionHeader: (0, ComponentDefs_1.d)("This property indicates when the row selection header is displayed. When the value is " +
-            "`true,` the selection header is always visible. Otherwise, it is displayed only " +
-            "when hovered.", null, "boolean", false),
+        hideHeader: {
+            description: "Set the header visibility using this property. Set it to \`true\` to hide the header.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is ` +
+            `enabled, but the column remains unsorted.`),
+        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+            `and the column is sorted in ascending order.`),
+        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} column header when sorting is enabled, ` +
+            `and the column is sorted in descending order.`),
+        enableMultiRowSelection: {
+            description: `This boolean property indicates whether you can select multiple rows in the table. ` +
+                `This property only has an effect when the rowsSelectable property is set. Setting it ` +
+                `to \`false\` limits selection to a single row.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        alwaysShowSelectionHeader: {
+            description: "This property indicates when the row selection header is displayed. When the value is " +
+                "`true,` the selection header is always visible. Otherwise, it is displayed only " +
+                "when hovered.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
     },
     events: {
         sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +

package/dist/scripts/src/components/TableOfContents/TableOfContents.js

@@ -17,10 +17,19 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         `and displays them in a tree representing their hierarchy. When you select an item ` +
         `in this tree, the component navigates the page to the selected position.`,
     props: {
-        smoothScrolling: (0, ComponentDefs_1.d)(`This property indicates that smooth scrolling is used while scrolling the selected table ` +
-            `of contents items into view.`),
-        maxHeadingLevel: (0, ComponentDefs_1.d)("Defines the maximum heading level to include in the table of contents. Headings " +
-            "with a level greater than this value will be excluded."),
+        smoothScrolling: {
+            description: `This property indicates that smooth scrolling is used while scrolling the selected table ` +
+                `of contents items into view.`,
+            valueType: "boolean",
+            defaultValue: "false",
+        },
+        maxHeadingLevel: {
+            description: "Defines the maximum heading level (1 to 6) to include in the table of contents. " +
+                "For example, if it is 2, then `H1` and `H2` are displayed, but lower levels " +
+                "(`H3` to `H6`) are not.",
+            valueType: "number",
+            defaultValue: "6",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -12,15 +12,19 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
-const react_router_dom_1 = require("react-router-dom");
 exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
-    const { headings, setObserveIntersection, activeAnchorId, setActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
+    const [activeAnchorId, setActiveId] = (0, react_1.useState)(null);
+    const { headings, scrollToAnchor, subscribeToActiveAnchorChange } = (0, TableOfContentsContext_1.useTableOfContents)();
+    (0, react_1.useLayoutEffect)(() => {
+        return subscribeToActiveAnchorChange((id) => {
+            const foundHeading = headings.find((heading) => heading.id === id);
+            if (foundHeading.level <= maxHeadingLevel) {
+                setActiveId(id);
+            }
+        });
+    }, [headings, maxHeadingLevel, subscribeToActiveAnchorChange]);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(tocRef, forwardedRef) : tocRef;
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    (0, react_1.useEffect)(() => {
-        setObserveIntersection(true);
-    }, [setObserveIntersection]);
     (0, react_1.useEffect)(() => {
         if (activeAnchorId && (tocRef === null || tocRef === void 0 ? void 0 : tocRef.current)) {
             const activeAnchor = tocRef.current.querySelector(`#${activeAnchorId}`);
@@ -47,22 +51,11 @@ exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ sty
                                 [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
                                 [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
                             }), to: `#${value.id}`, onClick: (event) => {
-                                event.preventDefault();
-                                value.anchor.scrollIntoView({
-                                    block: "start",
-                                    inline: "start",
-                                    behavior: smoothScrolling ? "smooth" : "auto",
-                                });
-                                setActiveAnchorId(value.id);
-                                requestAnimationFrame(() => {
-                                    navigate({
-                                        hash: `#${value.id}`,
-                                    }, {
-                                        state: {
-                                            preventHashScroll: true
-                                        },
-                                    });
-                                });
+                                // cmd/ctrl + click - open in new tab, don't prevent that
+                                if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
+                                    event.preventDefault();
+                                }
+                                scrollToAnchor(value.id, smoothScrolling);
                             }, id: value.id, children: value.text }) }, value.id));
                 }
                 return null;

package/dist/scripts/src/components/Tabs/Tabs.js

@@ -19,9 +19,14 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         activeTab: (0, ComponentDefs_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
             `representing the starting (leftmost) tab.`),
-        orientation: (0, ComponentDefs_1.d)(`This property indicates the orientation of the component. In horizontal orientation, ` +
-            `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-            `orientation, the buttons are at the top.`),
+        orientation: {
+            description: `This property indicates the orientation of the component. In horizontal orientation, ` +
+                `the tab sections are laid out on the left side of the content panel, while in vertical ` +
+                `orientation, the buttons are at the top.`,
+            availableValues: ["horizontal", "vertical"],
+            defaultValue: "vertical",
+            valueType: "string",
+        },
         tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),
     },
     apis: {

package/dist/scripts/src/components/Text/Text.js

@@ -29,14 +29,26 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: (0, ComponentDefs_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
             `the \`${COMP}\` component.`),
-        variant: (0, ComponentDefs_1.d)(`Optional string value that provides named presets for text variants with a ` +
-            `unique combination of font style, weight, size, color and other parameters.`, abstractions_1.variantOptionsMd),
-        maxLines: (0, ComponentDefs_1.d)(`This property determines the maximum number of lines the component can wrap to. ` +
-            `If there is no space to display all the contents, the component displays up to ` +
-            `as many lines as specified in this property.`),
-        preserveLinebreaks: (0, ComponentDefs_1.d)(`This property indicates if linebreaks should be preserved when displaying text.`),
-        ellipses: (0, ComponentDefs_1.d)(`This property indicates whether ellipses should be displayed when the text is ` +
-            `cropped (\`true\`) or not (\`false\`).`),
+        variant: {
+            description: "An optional string value that provides named presets for text variants with a " +
+                "unique combination of font style, weight, size, color, and other parameters. " +
+                "If not defined, the text uses the current style of its context.",
+            availableValues: abstractions_1.variantOptionsMd,
+        },
+        maxLines: (0, ComponentDefs_1.d)("This property determines the maximum number of lines the component can wrap to. " +
+            "If there is no space to display all the contents, the component displays up to as " +
+            "many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines."),
+        preserveLinebreaks: {
+            description: `This property indicates if linebreaks should be preserved when displaying text.`,
+            valueType: "boolean",
+            defaultValue: "false",
+        },
+        ellipses: {
+            description: "This property indicates whether ellipses should be displayed when the text is " +
+                "cropped (\`true\`) or not (\`false\`).",
+            valueType: "boolean",
+            defaultValue: false,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/TextArea/TextArea.js

@@ -13,7 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const TextAreaNative_1 = require("./TextAreaNative");
 const COMP = "TextArea";
 exports.resizeOptionsMd = [
-    { value: "undefined", description: "No resizing" },
+    { value: "(undefined)", description: "No resizing" },
     { value: "horizontal", description: "Can only resize horizontally" },
     { value: "vertical", description: "Can only resize vertically" },
     { value: "both", description: "Can resize in both dimensions" },
@@ -22,16 +22,31 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `\`${COMP}\` is a component that provides a multiline text input area.`,
     props: {
-        enterSubmits: (0, ComponentDefs_1.d)(`This optional boolean property indicates whether pressing the \`Enter\` key on the ` +
-            `keyboard prompts the parent \`Form\` component to submit. The default value is is \`true\`.`),
-        escResets: (0, ComponentDefs_1.d)(`This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
-            `the ESC key.`),
-        maxRows: (0, ComponentDefs_1.d)(`This optional number property maximizes the number of lines the \`${COMP}\` can grow to.`),
-        minRows: (0, ComponentDefs_1.d)(`This optional number property indicates the minimum number of lines the \`${COMP}\` ` +
-            `has and specifies its size accordingly.`),
-        rows: (0, ComponentDefs_1.d)(`Specifies the number of lines or rows (and thus, its size) the component has.`),
-        autoSize: (0, ComponentDefs_1.d)(`If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
-            `automatically based on the number of lines inside it.`, null, "boolean", false),
+        enterSubmits: {
+            description: "This optional boolean property indicates whether pressing the \`Enter\` key on the " +
+                "keyboard prompts the parent \`Form\` component to submit.",
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        escResets: {
+            description: `This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
+                `the ESC key.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` can grow.`),
+        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink.`),
+        rows: {
+            description: `Specifies the number of rows the component initially has.`,
+            valueType: "number",
+            defaultValue: 2,
+        },
+        autoSize: {
+            description: `If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
+                `automatically based on the number of lines inside it.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),
@@ -44,8 +59,10 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        resize: (0, ComponentDefs_1.d)(`This optional property specifies in which dimensions can the \`TextArea\` ` +
-            `be resized by the user.`, exports.resizeOptionsMd),
+        resize: { description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
+                `be resized by the user.`,
+            availableValues: exports.resizeOptionsMd,
+        },
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),

package/dist/scripts/src/components/Theme/Theme.js

@@ -25,8 +25,12 @@ exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
     allowArbitraryProps: true,
     props: {
         themeId: (0, ComponentDefs_1.d)(`This property specifies which theme to use by setting the theme's id.`),
-        tone: (0, ComponentDefs_1.d)(`This property allows the setting of the current theme's tone. Tone is either ` +
-            `\`light\` or \`dark\`.`),
+        tone: {
+            description: "This property allows the setting of the current theme's tone.",
+            availableValues: ["light", "dark"],
+            valueType: "string",
+            defaultValue: "light",
+        },
         root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`),
     },
     opaque: true,

package/dist/scripts/src/components/abstractions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -21,8 +21,8 @@ exports.LinkTargetMd = [
     },
     {
         value: "_unfencedTop",
-        description: "Allows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame."
-    }
+        description: "Allows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame.",
+    },
 ];
 // --- Available view sizes
 exports.viewportSizeMd = [
@@ -291,3 +291,14 @@ exports.variantOptionsMd = [
 const AbbreviationKeys = ["title"];
 const InsertedKeys = ["cite", "dateTime"];
 exports.VariantPropsKeys = [...AbbreviationKeys, ...InsertedKeys];
+exports.httpMethodNames = [
+    "get",
+    "post",
+    "put",
+    "delete",
+    "patch",
+    "head",
+    "options",
+    "trace",
+    "connect",
+];