xmlui 0.9.56 → 0.9.58

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

@@ -10,8 +10,8 @@ const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
 const COMP = "EmojiSelector";
 exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
-    description: `The \`${COMP}\` component provides users with a graphical interface to browse, search and ` +
-        `select emojis to insert into text fields, messages, or other forms of communication.`,
+    description: "`EmojiSelector` enables users to browse, search and select emojis from " +
+        "their system's native emoji set.",
     props: {
         autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: EmojiSelectorNative_1.defaultProps.autoFocus }),
     },

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

@@ -14,8 +14,9 @@ const metadata_helpers_1 = require("../../components/metadata-helpers");
 const ExpandableItemNative_1 = require("./ExpandableItemNative");
 const COMP = "ExpandableItem";
 exports.ExpandableItemMd = (0, ComponentDefs_1.createMetadata)({
-    description: `This component represents an expandable/collapsible section, similar to the HTML details ` +
-        `element. When the user clicks on the summary, the content expands or collapses.`,
+    description: "`ExpandableItem` creates expandable/collapsible section, similar to the HTML " +
+        "details disclosure element. When the user clicks on the `summary` the content " +
+        "expands or collapses.",
     props: {
         summary: (0, metadata_helpers_1.dComponent)("The summary content that is always visible and acts as the trigger."),
         initiallyExpanded: {
@@ -76,9 +77,9 @@ exports.ExpandableItemMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingLeft-${COMP}`]: "$space-0",
         [`paddingRight-${COMP}`]: "$space-0",
         [`gap-${COMP}`]: "$space-2",
-        [`contentPaddingLeft-${COMP}`]: "$space-3",
-        [`contentPaddingRight-${COMP}`]: "$space-3",
-        [`contentPaddingVertical-${COMP}`]: "$space-2",
+        [`paddingLeft-content-${COMP}`]: "$space-3",
+        [`paddingRight-content-${COMP}`]: "$space-3",
+        [`paddingVertical-content-${COMP}`]: "$space-2",
         [`transition-${COMP}`]: "0.2s ease",
     },
 });

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

@@ -16,9 +16,11 @@ const FileInputNative_1 = require("./FileInputNative");
 const COMP = "FileInput";
 const DEFAULT_ICON = "browse:FileInput";
 exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` is a user interface component that allows users to select files from their ` +
-        `device's file system for upload (or processing its content otherwise).`,
-    status: "experimental",
+    status: "stable",
+    description: "`FileInput` enables users to select files from their device's file system for " +
+        "upload or processing. It combines a text field displaying selected files with " +
+        "a customizable button that opens the system file browser. Use it for forms, " +
+        "media uploads, and document processing workflows.",
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
@@ -42,7 +44,10 @@ exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
             `in the browser menu after clicking the input field button.`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.multiple }),
         directory: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
             `or files only (\`false\`).`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.directory }),
-        buttonPosition: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field.`, ["start", "end"])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
+        buttonPosition: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field.`, [
+            "start",
+            "end",
+        ])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
         buttonSize: (0, ComponentDefs_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
         buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
     },

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

@@ -12,8 +12,8 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const FileUploadDropZoneNative_1 = require("./FileUploadDropZoneNative");
 const COMP = "FileUploadDropZone";
 exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component allows users to upload files to a web application by dragging ` +
-        `and dropping files from their local file system onto a designated area within the UI.`,
+    description: "`FileUploadDropZone` enables users to upload files by dragging and dropping " +
+        "files from their local file system onto a designated area within the UI.",
     props: {
         text: {
             description: "With this property, you can change the default text to display when files " +

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

@@ -14,8 +14,8 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const FlowLayoutNative_1 = require("./FlowLayoutNative");
 const COMP = "FlowLayout";
 exports.FlowLayoutMd = (0, ComponentDefs_1.createMetadata)({
-    description: "This layout component is used to position content in rows with an auto wrapping feature: if " +
-        "the length of the items exceed the available space the layout will wrap into a new line.",
+    description: "`FlowLayout` positions content in rows with automatic wrapping. When items " +
+        "exceed the available horizontal space, they automatically wrap to a new line.",
     props: {
         gap: {
             description: `This property defines the gap between items in the same row and between rows. The ${COMP} ` +

package/dist/scripts/src/components/FlowLayout/FlowLayoutNative.js

@@ -24,6 +24,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const hooks_1 = require("../../components-core/utils/hooks");
 const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
+const AppContext_1 = require("../../components-core/AppContext");
 const resolvedCssVars = {};
 const FlowLayoutContext = (0, react_1.createContext)({
     rowGap: 0,
@@ -35,6 +36,7 @@ exports.FlowItemBreak = FlowItemBreak;
 exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, ref) {
     var { children, forceBreak } = _a, restProps = __rest(_a, ["children", "forceBreak"]);
     const { rowGap, columnGap, setNumberOfChildren } = (0, react_1.useContext)(FlowLayoutContext);
+    const { mediaSize } = (0, AppContext_1.useAppContext)();
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         setNumberOfChildren((prev) => prev + 1);
         return () => {
@@ -62,7 +64,7 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
         //   },
         // ).cssProps || {}
         );
-    }, [_maxWidth, _minWidth, _width, activeTheme.themeVars]);
+    }, [_maxWidth, _minWidth, _width]);
     const resolvedWidth = (0, react_1.useMemo)(() => {
         if (width && typeof width === "string" && width.startsWith("var(")) {
             if (!resolvedCssVars[width]) {
@@ -76,14 +78,41 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
     }, [_width, root, width]);
     const isWidthPercentage = typeof resolvedWidth === "string" && resolvedWidth.endsWith("%");
     const _columnGap = (0, css_utils_1.normalizeCssValueForCalc)(columnGap);
-    const isViewportPhone = (0, hooks_1.useMediaQuery)("(max-width: 420px)"); //TODO useContainerQuery
-    const isViewportTablet = (0, hooks_1.useMediaQuery)("(max-width: 800px)");
+    let responsiveWidth;
+    if (isWidthPercentage) {
+        const percNumber = parseFloat(resolvedWidth);
+        if (mediaSize.sizeIndex <= 1) {
+            let percentage = percNumber * 4;
+            if (percentage > 50) {
+                responsiveWidth = `100%`;
+            }
+            else {
+                responsiveWidth = `min(${percentage}%, 100%)`;
+            }
+        }
+        else if (mediaSize.sizeIndex <= 2) {
+            let percentage = percNumber * 3;
+            if (percentage >= 50 && percentage <= 75) {
+                responsiveWidth = `50%`;
+            }
+            else if (percentage > 75) {
+                responsiveWidth = `100%`;
+            }
+            else {
+                responsiveWidth = `min(${percentage}%, 100%)`;
+            }
+        }
+        else {
+            responsiveWidth = `min(${width}, 100%)`;
+        }
+    }
+    else {
+        responsiveWidth = `min(calc(${width} + ${_columnGap}), 100%)`;
+    }
     const outerWrapperStyle = {
         minWidth,
         maxWidth,
-        width: isWidthPercentage
-            ? `min(${width} * ${isViewportPhone ? "8" : isViewportTablet ? "4" : "1"}, 100%)`
-            : `min(calc(${width} + ${_columnGap}), 100%)`,
+        width: responsiveWidth,
         paddingBottom: rowGap,
         flex,
     };

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

@@ -12,12 +12,14 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const FooterNative_1 = require("./FooterNative");
 const COMP = "Footer";
 exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` is a component that acts as a placeholder within \`App\`.`,
+    description: "`Footer` provides a designated area at the bottom of your application for " +
+        "footer content such as branding, copyright notices, or utility controls like " +
+        "theme toggles.",
     themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
-        [`verticalAlign-${COMP}`]: "center",
+        [`verticalAlignment-${COMP}`]: "center",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",

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

@@ -14,9 +14,11 @@ const abstractions_1 = require("../abstractions");
 const FormNative_1 = require("./FormNative");
 const COMP = "Form";
 exports.FormMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: `A \`${COMP}\` is a fundamental component that displays user interfaces that allow users to input ` +
-        `(or change) data and submit it to the app (a server) for further processing.`,
+    status: "stable",
+    description: "`Form` provides a structured container for collecting and validating user " +
+        "input, with built-in data binding, validation, and submission handling. It " +
+        "automatically manages form state and provides context for nested form controls " +
+        "to work together.",
     props: {
         buttonRowTemplate: (0, metadata_helpers_1.dComponent)(`This property allows defining a custom component to display the buttons at the bottom of the form.`),
         itemLabelPosition: {
@@ -77,12 +79,16 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             description: "This property sets the HTTP method to use when submitting the form data. If not " +
                 "defined, `put` is used when the form has initial data; otherwise, `post`.",
         },
+        inProgressNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is being submitted."),
+        completedNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is submitted successfully."),
+        errorNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form submission fails."),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },
     events: {
         submit: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is submitted. The event argument ` +
             `is the current \`data\` value to save.`),
+        success: (0, ComponentDefs_1.d)("The form infrastructure fires this event when the form is submitted successfully."),
         cancel: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is canceled.`),
         reset: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is reset.`),
     },

package/dist/scripts/src/components/Form/FormNative.js

@@ -181,7 +181,7 @@ function cleanUpSubject(subject) {
         return acc;
     }, {});
 }
-const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, }, ref) {
+const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, }, ref) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_1.useState)(false);
@@ -234,10 +234,11 @@ const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialVal
         dispatch((0, formActions_1.formSubmitting)());
         try {
             const filteredSubject = cleanUpSubject(formState.subject);
-            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
-                passAsDefaultBody: true,
+            const result = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
+                passAsDefaultBody: true
             }));
             dispatch((0, formActions_1.formSubmitted)());
+            yield (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result));
             if (!keepModalOpenOnSubmit) {
                 requestModalFormClose();
             }
@@ -348,11 +349,14 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
     }, [$data, node.children]);
     const initialValue = extractValue(node.props.data);
     const submitMethod = extractValue.asOptionalString(node.props.submitMethod) || (initialValue ? "put" : "post");
+    const inProgressNotificationMessage = extractValue.asOptionalString(node.props.inProgressNotificationMessage) || "";
+    const completedNotificationMessage = extractValue.asOptionalString(node.props.completedNotificationMessage) || "";
+    const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
     return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: style, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
             defaultHandler: submitUrl
-                ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs })`
+                ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
                 : undefined,
             context: {
                 $data,
@@ -365,6 +369,10 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
             context: {
                 $data,
             },
+        }), onSuccess: lookupEventHandler("success", {
+            context: {
+                $data,
+            },
         }), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
             !extractValue.asOptionalBoolean(node.props.loading, false), children: renderChild(nodeWithItem) }));
 }

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

@@ -29,10 +29,11 @@ const COMP = "FormItem";
 // NOTE: We need to filter the "none" value out so that it doesn't show up in the docs.
 const filteredValidationSeverityValues = FormContext_1.validationSeverityValues.filter((value) => value !== "none");
 exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: `A \`${COMP}\` component represents a single input element within a \`Form\`. The value within ` +
-        `the \`${COMP}\` may be associated with a particular property within the encapsulating \`Form\` ` +
-        `component's data.`,
+    status: "stable",
+    description: "`FormItem` wraps individual input controls within a `Form`, providing data " +
+        "binding, validation, labeling, and layout functionality. It connects form " +
+        "controls to the parent form's data model and handles validation feedback " +
+        "automatically.",
     props: {
         bindTo: {
             description: "This property binds a particular input field to one of the attributes of the \`Form\` data. " +
@@ -176,11 +177,9 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
             "The function has a single argument, the index to remove."),
     },
     contextVars: {
-        $value: (0, ComponentDefs_1.d)(`The context variable represents the current value of the \`${COMP}\`. It can be used in ` +
-            `expressions and code snippets within the \`${COMP}\` instance.`),
-        $setValue: (0, ComponentDefs_1.d)(`This function can be invoked to set the \`${COMP}\` instance's value. The function has a ` +
-            `single argument, the new value to set.`),
-        $validationResult: (0, ComponentDefs_1.d)(`This variable represents the result of the latest validation of the \`${COMP}\` instance.`),
+        $value: (0, ComponentDefs_1.d)("Current value of the FormItem, accessible in expressions and code snippets"),
+        $setValue: (0, ComponentDefs_1.d)("Function to set the FormItem's value programmatically"),
+        $validationResult: (0, ComponentDefs_1.d)("Current validation state and error messages for this field"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -8,9 +8,8 @@ const compound_utils_1 = require("../../components-core/utils/compound-utils");
 const COMP = "FormSection";
 exports.FormSectionMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
-    description: `The \`${COMP}\` is a component that groups cohesive elements together within ` +
-        `a \`Form\`. This grouping is indicated visually: the child components of the \`${COMP}\` ` +
-        `are placed in a [\`FlowLayout\`](./FlowLayout.mdx) component.`,
+    description: "`FormSection` groups elements within a `Form`. Child components are placed in " +
+        "a [FlowLayout](/components/FlowLayout).",
 });
 const componentSource = `
 <Component name="FormSection">

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

@@ -44,7 +44,10 @@ const OMIT_FROM_TOC_DESC = {
     defaultValue: HeadingNative_1.defaultProps.omitFromToc,
 };
 exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
-    description: "Represents a heading text",
+    description: "`Heading` displays hierarchical text headings with semantic importance levels " +
+        "from H1 to H6, following HTML heading standards. It provides text overflow " +
+        "handling, anchor link generation, and integrates with " +
+        "[TableOfContents](/components/TableOfContents).",
     props: {
         value: VALUE_DESC,
         level: {
@@ -60,7 +63,7 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
             description: "This property indicates whether an anchor link should be displayed next to the heading. " +
                 "If set to `true`, an anchor link will be displayed on hover next to the heading.",
             type: "boolean",
-        }
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
@@ -225,7 +228,7 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-function renderHeading({ node, extractValue, layoutCss, level, showAnchor, renderChild }) {
+function renderHeading({ node, extractValue, layoutCss, level, showAnchor, renderChild, }) {
     var _a, _b;
     const _c = node.props, { maxLines, preserveLinebreaks, ellipses } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses"]);
     return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: extractValue.asOptionalBoolean(showAnchor), style: layoutCss, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc) }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue, layoutCss), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));

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

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.helloWorldComponentRenderer = exports.HelloWorldMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HelloWorld_module_scss_1 = __importDefault(require("./HelloWorld.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const HelloWorldNative_1 = require("./HelloWorldNative");
+const COMP = "HelloWorld";
+exports.HelloWorldMd = (0, ComponentDefs_1.createMetadata)({
+    description: "`HelloWorld` is a demonstration component that shows basic XMLUI patterns. " +
+        "It displays a customizable greeting message with an interactive click counter.",
+    status: "experimental",
+    props: {
+        id: {
+            description: "The unique identifier for the component.",
+            type: "string",
+        },
+        message: {
+            description: "The greeting message to display.",
+            type: "string",
+            defaultValue: HelloWorldNative_1.defaultProps.message,
+        },
+    },
+    events: {
+        onClick: {
+            description: "Triggered when the click button is pressed. Receives the current click count.",
+            type: "function",
+        },
+        onReset: {
+            description: "Triggered when the reset button is pressed. Called when count is reset to 0.",
+            type: "function",
+        },
+    },
+    apis: {
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(HelloWorld_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        // Standard HelloWorld theme variables with visible defaults
+        [`backgroundColor-${COMP}`]: "$color-surface-50",
+        [`borderColor-${COMP}`]: "$color-surface-200",
+        [`borderWidth-${COMP}`]: "$space-2",
+        [`borderStyle-${COMP}`]: "solid",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`padding-${COMP}`]: "$space-4",
+        [`textColor-${COMP}`]: "$color-primary",
+        [`maxWidth-${COMP}`]: "400px",
+        // Content styling
+        [`textAlign-${COMP}-content`]: "center",
+        // Message styling
+        [`marginBottom-${COMP}-message`]: "$space-4",
+        [`fontSize-${COMP}-message`]: "$fontSize-lg",
+        [`fontWeight-${COMP}-message`]: "$fontWeight-semibold",
+        // Children styling
+        [`margin-${COMP}-children`]: "$space-4 0",
+        [`padding-${COMP}-children`]: "$space-3",
+        [`backgroundColor-${COMP}-children`]: "$color-surface-100",
+        [`borderRadius-${COMP}-children`]: "$borderRadius-sm",
+        [`fontStyle-${COMP}-children`]: "italic",
+        // Interactive container
+        [`gap-${COMP}-interactive`]: "$space-3",
+        // Click button styling
+        [`backgroundColor-${COMP}-clickButton`]: "$color-primary-500",
+        [`textColor-${COMP}-clickButton`]: "white",
+        [`border-${COMP}-clickButton`]: "none",
+        [`borderRadius-${COMP}-clickButton`]: "$borderRadius",
+        [`padding-${COMP}-clickButton`]: "$space-3 $space-6",
+        [`fontSize-${COMP}-clickButton`]: "$fontSize-base",
+        [`fontWeight-${COMP}-clickButton`]: "$fontWeight-medium",
+        [`transition-${COMP}-clickButton`]: "background-color 0.2s ease",
+        [`backgroundColor-${COMP}-clickButton--hover`]: "$color-primary-600",
+        [`transform-${COMP}-clickButton--active`]: "translateY(1px)",
+        // Counter styling
+        [`fontSize-${COMP}-counter`]: "$fontSize-lg",
+        [`fontWeight-${COMP}-counter`]: "$fontWeight-medium",
+        // Count badge styling
+        [`backgroundColor-${COMP}-count`]: "$color-primary-100",
+        [`textColor-${COMP}-count`]: "$color-primary-700",
+        [`padding-${COMP}-count`]: "$space-1 $space-2",
+        [`borderRadius-${COMP}-count`]: "$borderRadius-sm",
+        [`fontWeight-${COMP}-count`]: "$fontWeight-bold",
+        [`minWidth-${COMP}-count`]: "24px",
+        // Reset button styling
+        [`backgroundColor-${COMP}-resetButton`]: "$color-surface-400",
+        [`textColor-${COMP}-resetButton`]: "white",
+        [`border-${COMP}-resetButton`]: "none",
+        [`borderRadius-${COMP}-resetButton`]: "$borderRadius-sm",
+        [`padding-${COMP}-resetButton`]: "$space-2 $space-4",
+        [`fontSize-${COMP}-resetButton`]: "$fontSize-sm",
+        [`transition-${COMP}-resetButton`]: "background-color 0.2s ease",
+        [`backgroundColor-${COMP}-resetButton--hover`]: "$color-surface-500",
+    },
+});
+exports.helloWorldComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HelloWorldMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler, registerComponentApi, updateState }) => {
+    return ((0, jsx_runtime_1.jsx)(HelloWorldNative_1.HelloWorld, { id: extractValue.asOptionalString(node.props.id), message: extractValue.asOptionalString(node.props.message), onClick: lookupEventHandler("onClick"), onReset: lookupEventHandler("onReset"), registerComponentApi: registerComponentApi, updateState: updateState, style: layoutCss, children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/HelloWorld/HelloWorldNative.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelloWorld = exports.defaultProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const misc_1 = require("../../components-core/utils/misc");
+const HelloWorld_module_scss_1 = __importDefault(require("./HelloWorld.module.scss"));
+exports.defaultProps = {
+    message: "Hello, World!",
+    theme: "default",
+};
+exports.HelloWorld = react_1.default.forwardRef(function HelloWorld(_a, ref) {
+    var { id, message = exports.defaultProps.message, theme = exports.defaultProps.theme, children, style, className, onClick, onReset, registerComponentApi, updateState } = _a, rest = __rest(_a, ["id", "message", "theme", "children", "style", "className", "onClick", "onReset", "registerComponentApi", "updateState"]);
+    const [clickCount, setClickCount] = (0, react_1.useState)(0);
+    const setValue = (0, misc_1.useEvent)((newCount) => {
+        setClickCount(newCount);
+        updateState === null || updateState === void 0 ? void 0 : updateState({ value: newCount });
+    });
+    // Sync clickCount with XMLUI state system (like AppState does)
+    (0, react_1.useEffect)(() => {
+        updateState === null || updateState === void 0 ? void 0 : updateState({ value: clickCount });
+    }, [updateState, clickCount]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            setValue,
+        });
+    }, [registerComponentApi, setValue]);
+    const handleClick = (event) => {
+        const newCount = clickCount + 1;
+        setClickCount(newCount);
+        updateState === null || updateState === void 0 ? void 0 : updateState({ value: newCount });
+        // Call XMLUI event handler if provided
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleReset = (event) => {
+        setClickCount(0);
+        updateState === null || updateState === void 0 ? void 0 : updateState({ value: 0 });
+        // Call XMLUI event handler if provided
+        onReset === null || onReset === void 0 ? void 0 : onReset(event);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { id: id, ref: ref, className: (0, classnames_1.default)(className, HelloWorld_module_scss_1.default.helloWorld, {
+            [HelloWorld_module_scss_1.default.success]: theme === "success",
+        }), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: HelloWorld_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)("h3", { className: HelloWorld_module_scss_1.default.message, children: message }), children && ((0, jsx_runtime_1.jsx)("div", { className: HelloWorld_module_scss_1.default.children, children: children })), (0, jsx_runtime_1.jsxs)("div", { className: HelloWorld_module_scss_1.default.interactive, children: [(0, jsx_runtime_1.jsx)("button", { className: HelloWorld_module_scss_1.default.clickButton, onClick: handleClick, children: "Click me!" }), (0, jsx_runtime_1.jsxs)("div", { className: HelloWorld_module_scss_1.default.counter, children: ["Clicks: ", (0, jsx_runtime_1.jsx)("span", { className: HelloWorld_module_scss_1.default.count, children: clickCount })] }), clickCount > 0 && ((0, jsx_runtime_1.jsx)("button", { className: HelloWorld_module_scss_1.default.resetButton, onClick: handleReset, children: "Reset" }))] })] }) })));
+});

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

@@ -12,8 +12,10 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const IconNative_1 = __importDefault(require("./IconNative"));
 const COMP = "Icon";
 exports.IconMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
-    description: `This component is the representation of an icon.`,
+    status: "stable",
+    description: "`Icon` displays scalable vector icons from XMLUI's built-in icon registry " +
+        "using simple name references. Icons are commonly used in buttons, navigation " +
+        "elements, and status indicators.",
     props: {
         name: (0, ComponentDefs_1.d)("This string property specifies the name of the icon to display. All icons have " +
             "unique, case-sensitive names identifying them. If the icon name is not set, the " +

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

@@ -13,8 +13,9 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ImageNative_1 = require("./ImageNative");
 const COMP = "Image";
 exports.ImageMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component represents or depicts an object, scene, idea, or other concept ` +
-        `with a picture.`,
+    description: "`Image` displays pictures from URLs or local sources with built-in responsive " +
+        "sizing, aspect ratio control, and accessibility features. It handles different " +
+        "image formats and provides options for lazy loading and click interactions.",
     props: {
         src: (0, ComponentDefs_1.d)("This property is used to indicate the source (path) of the image to display. " +
             "When not defined, no image is displayed."),

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

@@ -9,8 +9,9 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ItemsNative_1 = require("./ItemsNative");
 const COMP = "Items";
 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.`,
+    description: "`Items` renders data arrays without built-in layout or styling, providing " +
+        "a lightweight alternative to `List`. Unlike `List`, it provides no " +
+        "virtualization, grouping, or visual formatting — just pure data iteration.",
     props: {
         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.`),
@@ -23,10 +24,10 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
     },
     childrenAsTemplate: "itemTemplate",
     contextVars: {
-        $item: (0, metadata_helpers_1.dComponent)("This value represents the current iteration item while the component renders its children."),
-        $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current iteration index (zero-based) while rendering children."),
-        $isFirst: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its first item."),
-        $isLast: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its last item."),
+        $item: (0, metadata_helpers_1.dComponent)("Current data item being rendered"),
+        $itemIndex: (0, metadata_helpers_1.dComponent)("Zero-based index of current item"),
+        $isFirst: (0, metadata_helpers_1.dComponent)("Boolean indicating if this is the first item"),
+        $isLast: (0, metadata_helpers_1.dComponent)("Boolean indicating if this is the last item"),
     },
     opaque: true,
 });

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

@@ -14,8 +14,10 @@ const abstractions_1 = require("../abstractions");
 const LinkNative_1 = require("./LinkNative");
 const COMP = "Link";
 exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
-    description: `A \`${COMP}\` component represents a navigation target within the app or a ` +
-        `reference to an external web URL.`,
+    description: "`Link` creates clickable navigation elements for internal app routes or " +
+        "external URLs. You can use the `label` and `icon` properties for simple text " +
+        "links, or embed custom components like buttons, cards, or complex layouts " +
+        "for rich interactive link presentations.",
     props: {
         to: (0, ComponentDefs_1.d)("This property defines the URL of the link. If the value is not defined, the link cannot be activated."),
         enabled: (0, metadata_helpers_1.dEnabled)(),