xmlui 0.7.26 → 0.7.28

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

@@ -17,8 +17,12 @@ exports.IconMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         name: (0, ComponentDefs_1.d)(`This string property specifies the name of the icon to display. All icons have unique names ` +
             `and identifying the name is case-sensitive.`),
-        size: (0, ComponentDefs_1.d)(`This property defines the size of the \`${COMP}\`. Note that setting the \`height\` and/or ` +
-            `the \`width\` of the component will override this property.`),
+        size: {
+            description: `This property defines the size of the \`${COMP}\`. Note that setting the \`height\` and/or ` +
+                `the \`width\` of the component will override this property.`,
+            availableValues: ["xs", "sm", "md", "lg"],
+            defaultValue: "md",
+        },
         fallback: (0, ComponentDefs_1.d)(`This optional property provides a way to handle situations when the provided ` +
             `[icon name](#name) is not found in the registry.`),
     },

package/dist/scripts/src/components/Icon/IconNative.js

@@ -25,9 +25,9 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
-    var { name, fallback, style, className } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className"]);
+    var { name, fallback, style, className, size = "md" } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size"]);
     const iconRenderer = useFindIconRenderer(name, fallback);
-    const computedSize = typeof (restProps === null || restProps === void 0 ? void 0 : restProps.size) === "string" ? mapSizeToIconPack(restProps.size) : restProps === null || restProps === void 0 ? void 0 : restProps.size;
+    const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
     const width = computedSize || restProps.width;
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 

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

@@ -18,7 +18,11 @@ exports.ImageMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         src: (0, ComponentDefs_1.d)(`This property is used to indicate the source (path) of the image to display.`),
         alt: (0, ComponentDefs_1.d)(`This property specifies an alternate text for the image.`),
-        fit: (0, ComponentDefs_1.d)(`This property sets how the image content should be resized to fit its container.`),
+        fit: {
+            description: "This property sets how the image content should be resized to fit its container.",
+            type: "string",
+            defaultValue: "contain",
+        },
         lazyLoad: (0, ComponentDefs_1.d)(`Lazy loading instructs the browser to load the image only when it is imminently needed ` +
             `(e.g. user scrolls to it). The default value is eager (\`false\`).`),
         aspectRatio: (0, ComponentDefs_1.d)(`This property sets a preferred aspect ratio for the image, which will be used in the ` +

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

@@ -12,9 +12,11 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component maps sequential data items into component instances, representing ` +
         `each data item as a particular component.`,
     props: {
-        items: (0, metadata_helpers_1.dComponent)(`This property contains the list of data items this component renders.`),
+        items: (0, metadata_helpers_1.dInternal)(`This property contains the list of data items this component renders.`),
         data: (0, ComponentDefs_1.d)(`This property contains the list of data items (obtained from a data source) this component renders.`),
-        reverse: (0, ComponentDefs_1.d)(`This property reverses the order in which data is mapped to template components.`),
+        reverse: {
+            description: "This property reverses the order in which data is mapped to template components.",
+        },
         itemTemplate: (0, metadata_helpers_1.dComponent)("The component template to display a single item"),
     },
     contextVars: {

package/dist/scripts/src/components/Items/ItemsNative.js

@@ -4,9 +4,7 @@ exports.Items = Items;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
-// =====================================================================================================================
-// React Items component implementation
-function Items({ items, renderItem, reverse = false, }) {
+function Items({ items, renderItem, reverse = false }) {
     const itemsToRender = (0, react_1.useMemo)(() => {
         if (!items) {
             return [];

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

@@ -19,15 +19,24 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        active: (0, ComponentDefs_1.d)(`Indicates whether this link is active or not. If so, it will have a distinct visual appearance.`, null, "boolean", false),
-        target: (0, ComponentDefs_1.d)(`This property specifies where to open the link represented by the \`${COMP}\`. This ` +
-            `property accepts the following values (in accordance with the HTML standard):`, abstractions_1.LinkTargetMd, "string", "_self"),
+        active: {
+            description: `Indicates whether this link is active or not. If so, it will have a distinct visual appearance.`,
+            type: "boolean",
+            defaultValue: false,
+        },
+        target: {
+            description: `This property specifies where to open the link represented by the \`${COMP}\`. This ` +
+                `property accepts the following values (in accordance with the HTML standard):`,
+            availableValues: abstractions_1.LinkTargetMd,
+            type: "string",
+            defaultValue: "_self",
+        },
         label: (0, metadata_helpers_1.dLabel)(),
         icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the link.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`border-${COMP}`]: '0px solid $color-border',
+        [`border-${COMP}`]: "0px solid $color-border",
         [`color-text-${COMP}--hover--active`]: `$color-text-${COMP}--active`,
         [`color-text-decoration-${COMP}--hover`]: "$color-surface-400A80",
         [`color-text-decoration-${COMP}--active`]: "$color-surface200",

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

@@ -22,14 +22,19 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
             `that the \`List\` can display.`),
-        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 list 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.`),
         loading: (0, ComponentDefs_1.d)(`This property delays the rendering of children until it is set to \`false\`, or the ` +
             `component receives usable list items via the [\`data\`](#data) property.`),
         limit: (0, ComponentDefs_1.d)(`This property limits the number of items displayed in the \`${COMP}\`.`),
-        scrollAnchor: (0, ComponentDefs_1.d)(`This property pins the scroll position to a specified location of the list. Available values are shown below.`, abstractions_1.scrollAnchoringValues, "string", "top"),
+        scrollAnchor: {
+            description: `This property pins the scroll position to a specified location of the list. Available values are shown below.`,
+            availableValues: abstractions_1.scrollAnchoringValues,
+            type: "string",
+            defaultValue: "top",
+        },
         groupBy: (0, ComponentDefs_1.d)(`This property sets which attribute of the data is used to group the list items. ` +
             `If the attribute does not appear in the data, it will be ignored.`),
         orderBy: (0, ComponentDefs_1.d)(`This property enables the ordering of list items by specifying an attribute in the data.`),
@@ -45,14 +50,26 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
         emptyListTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the template to display when the list is empty.`),
         pageInfo: (0, ComponentDefs_1.d)(`This property contains the current page information. Setting this property also enures the ` +
             `\`${COMP}\` uses pagination.`),
-        idKey: (0, ComponentDefs_1.d)(`Denotes which attribute of an item acts as the ID or key of the item. Default is \`"id"\`.`),
+        idKey: {
+            description: "Denotes which attribute of an item acts as the ID or key of the item",
+            type: "string",
+            defaultValue: "id",
+        },
         groupsInitiallyExpanded: (0, ComponentDefs_1.d)(`This Boolean property defines whether the list groups are initially expanded.`),
         defaultGroups: (0, ComponentDefs_1.d)(`This property adds a list of default groups for the \`${COMP}\` and displays the group ` +
             `headers in the specified order. If the data contains group headers not in this list, ` +
             `those headers are also displayed (after the ones in this list); however, their order ` +
             `is not deterministic.`),
-        hideEmptyGroups: (0, ComponentDefs_1.d)("This boolean property indicates if empty groups should be hidden (no header and footer are displayed).", null, "boolean", true),
-        borderCollapse: (0, ComponentDefs_1.d)("Collapse items borders", null, "boolean", true)
+        hideEmptyGroups: {
+            description: "This boolean property indicates if empty groups should be hidden (no header and footer are displayed).",
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        borderCollapse: {
+            description: "Collapse items borders",
+            valueType: "boolean",
+            defaultValue: true,
+        },
     },
     contextVars: {
         $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the data list.`),

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

@@ -16,10 +16,14 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
     props: {
         content: (0, ComponentDefs_1.d)("This property sets the markdown content to display."),
-        removeIndents: (0, ComponentDefs_1.d)("This boolean property specifies whether leading indents should be " +
-            "removed from the markdown content. If set to `true`, the shortest " +
-            "indent found at the start of the content lines is removed from the " +
-            "beginning of every line.", null, "boolean", false),
+        removeIndents: {
+            description: "This boolean property specifies whether leading indents should be " +
+                "removed from the markdown content. If set to `true`, the shortest " +
+                "indent found at the start of the content lines is removed from the " +
+                "beginning of every line.",
+            valueType: "boolean",
+            defaultValue: false,
+        },
     },
     defaultThemeVars: {
         "color-border-HorizontalRule": "$color-border",

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

@@ -17,12 +17,18 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component defines a modal dialog UI element that can be displayed over ` +
         `the existing UI - triggered by some action.`,
     props: {
-        fullScreen: (0, ComponentDefs_1.d)(`Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
-            `width and height (\`false\`).`),
+        fullScreen: {
+            description: `Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
+                `width and height (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
         title: (0, ComponentDefs_1.d)(`Provides a prestyled heading to display the intent of the dialog.`),
-        closeButtonVisible: (0, ComponentDefs_1.d)(`Shows (\`true\`) or hides (\`false\`) the visibility of the close button on the dialog.`),
-        isInitiallyOpen: (0, ComponentDefs_1.d)(`This property sets whether the modal dialog appears open (\`true\`) or not (\`false\`) ` +
-            `when the page is it is defined on is rendered.`),
+        closeButtonVisible: {
+            description: `Shows (\`true\`) or hides (\`false\`) the visibility of the close button on the dialog.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
     },
     events: {
         open: (0, ComponentDefs_1.d)(`This event is fired when the \`${COMP}\` is opened either via a \`when\` or an ` +
@@ -49,7 +55,7 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             [`color-bg-${COMP}`]: "$color-bg-primary",
         } }),
 });
-exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext }) => {
+exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {
     var _a, _b;
     // gigantic hack: If the ModalDialog is not inside a ModalDialogFrame, wrap it in one
     //   we do this through the layout context, render it through another render loop with the extra $param context var

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

@@ -12,6 +12,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("./NavLinkNative");
+const abstractions_1 = require("../abstractions");
 const COMP = "NavLink";
 exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component defines a navigation target (app navigation menu item) within ` +
@@ -19,16 +20,33 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        active: (0, ComponentDefs_1.d)(`This property indicates if the particular navigation is an active link. An active link ` +
-            `has a particular visual appearance, provided its [\`displayActive\`](#displayactive) ` +
-            `property is set to \`true\`.`),
-        target: (0, ComponentDefs_1.d)(`This property specifies how to open the clicked link.`),
+        active: {
+            description: `This property indicates if the particular navigation is an active link. An active link ` +
+                `has a particular visual appearance, provided its [\`displayActive\`](#displayactive) ` +
+                `property is set to \`true\`.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        target: {
+            description: `This property specifies how to open the clicked link.`,
+            availableValues: abstractions_1.LinkTargetMd,
+            type: "string",
+            defaultValue: "_self",
+        },
         label: (0, metadata_helpers_1.dLabel)(),
-        vertical: (0, ComponentDefs_1.d)(`This property sets how the active status is displayed on the \`${COMP}\` component. If ` +
-            `set to true, the indicator is displayed on the side which lends itself to a vertically ` +
-            `aligned navigation menu.`),
-        displayActive: (0, ComponentDefs_1.d)(`This Boolean property indicates if the active state of a link should have a visual ` +
-            `indication. Setting it to \`false\` removes the visual indication of an active link.`),
+        vertical: {
+            description: `This property sets how the active status is displayed on the \`${COMP}\` component. If ` +
+                `set to true, the indicator is displayed on the side which lends itself to a vertically ` +
+                `aligned navigation menu.`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        displayActive: {
+            description: `This Boolean property indicates if the active state of a link should have a visual ` +
+                `indication. Setting it to \`false\` removes the visual indication of an active link.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
         icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the navigation link.`),
     },
     events: {
@@ -36,7 +54,7 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`border-NavLink`]: '0px solid $color-border',
+        [`border-NavLink`]: "0px solid $color-border",
         "radius-NavLink": "$radius",
         "color-bg-NavLink": "transparent",
         "padding-horizontal-NavLink": "$space-4",

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/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/StickyBox/StickyBoxNative.js

@@ -7,7 +7,7 @@ exports.StickyBox = StickyBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
-const react_sticky_el_1 = __importDefault(require("react-sticky-el"));
+const react_sticky_el_1 = require("react-sticky-el");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
 const hooks_1 = require("../../components-core/utils/hooks");
 function StickyBox({ children, uid, layout, to = "top" }) {
@@ -18,10 +18,17 @@ function StickyBox({ children, uid, layout, to = "top" }) {
     const realBackground = (0, hooks_1.useRealBackground)(scrollParent);
     (0, react_1.useEffect)(() => {
         if (wrapper) {
-            console.log(wrapper.innerHeight);
             document.documentElement.style.setProperty("--xmlui-scroll-margin-top", wrapper.clientHeight + "px");
             // scrollParent.setAttribute("data-xmlui-scroll-padding", true);
         }
     }, [scrollParent, wrapper]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.default, { scrollElement: scrollParent, wrapperClassName: (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper), mode: to, onFixedToggle: setStuck, stickyStyle: Object.assign({ backgroundColor: realBackground }, layout), children: (0, jsx_runtime_1.jsx)("div", { ref: setWrapper, children: children }) })), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, ref: sentinelRef, className: to === "top" ? StickyBox_module_scss_1.default.sentinel : "" })] }));
+    const wrapperClassName = (0, classnames_1.default)(StickyBox_module_scss_1.default.wrapper);
+    const stickyStyles = Object.assign({ backgroundColor: realBackground }, layout);
+    const stickyClassName = "";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!scrollParent && ((0, jsx_runtime_1.jsx)(react_sticky_el_1.RenderPropSticky, { mode: to, onFixedToggle: setStuck, 
+                // hideOnBoundaryHit={hideOnBoundaryHit}
+                // offsetTransforms={offsetTransforms}
+                // disabled={disabled}
+                // boundaryElement={boundaryElement}
+                scrollElement: scrollParent, children: ({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => ((0, jsx_runtime_1.jsx)("div", { ref: holderRef, style: holderStyles, children: (0, jsx_runtime_1.jsx)("div", { className: `${wrapperClassName} ${isFixed ? stickyClassName : ''}`, style: isFixed ? Object.assign(Object.assign({}, wrapperStyles), stickyStyles) : wrapperStyles, ref: wrapperRef, children: (0, jsx_runtime_1.jsx)("div", { ref: setWrapper, children: children }) }) })) })), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, ref: sentinelRef, className: to === "top" ? StickyBox_module_scss_1.default.sentinel : "" })] }));
 }

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

@@ -17,22 +17,21 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         `on and off. It consists of a small rectangular or circular button that can be moved left or right to ` +
         `change its state.`,
     props: {
-        indeterminate: (0, metadata_helpers_1.dIndeterminate)(),
+        indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(false),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(Toggle_1.defaultProps.validationStatus),
+        description: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `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),
@@ -67,6 +66,6 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)("Switch", exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue) || false, value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
+exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
 });