xmlui 0.10.7 → 0.10.10

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timerComponentRenderer = exports.TimerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("../../components-core/renderers");
+const TimerNative_1 = require("./TimerNative");
+const metadata_helpers_1 = require("../metadata-helpers");
+const COMP = "Timer";
+exports.TimerMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
+    description: "`Timer` is a non-visual component that fires events at regular intervals. " +
+        "It can be enabled or disabled and ensures that the timer event handler " +
+        "completes before firing the next event.",
+    props: {
+        enabled: {
+            description: "Whether the timer is enabled and should fire events.",
+            valueType: "boolean",
+            defaultValue: TimerNative_1.defaultProps.enabled,
+        },
+        interval: {
+            description: "The interval in milliseconds between timer events.",
+            valueType: "number",
+            defaultValue: TimerNative_1.defaultProps.interval,
+        },
+        initialDelay: {
+            description: "The delay in milliseconds before the first timer event.",
+            valueType: "number",
+            defaultValue: TimerNative_1.defaultProps.initialDelay,
+        },
+        once: {
+            description: "Whether the timer should stop after firing its first tick event.",
+            valueType: "boolean",
+            defaultValue: TimerNative_1.defaultProps.once,
+        },
+    },
+    events: {
+        tick: {
+            description: "This event is triggered at each interval when the ${COMP} is enabled.",
+        },
+    },
+    apis: {
+        pause: {
+            description: "Pauses the timer. The timer can be resumed later from where it left off.",
+            signature: "pause()",
+        },
+        resume: {
+            description: "Resumes a paused timer. If the timer is not paused, this method has no effect.",
+            signature: "resume()",
+        },
+        isPaused: {
+            description: "Returns whether the timer is currently paused.",
+            signature: "isPaused(): boolean",
+        },
+        isRunning: {
+            description: "Returns whether the timer is currently running (enabled and not paused).",
+            signature: "isRunning(): boolean",
+        },
+    },
+});
+exports.timerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TimerMd, ({ node, extractValue, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(TimerNative_1.Timer, { enabled: extractValue.asOptionalBoolean(node.props.enabled), interval: extractValue.asOptionalNumber(node.props.interval), initialDelay: extractValue.asOptionalNumber(node.props.initialDelay), once: extractValue.asOptionalBoolean(node.props.once), onTick: lookupEventHandler("tick"), registerComponentApi: registerComponentApi }));
+});

package/dist/scripts/src/components/Timer/TimerNative.js

@@ -0,0 +1,179 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = exports.defaultProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.defaultProps = {
+    enabled: true,
+    interval: 1000,
+    once: false,
+    initialDelay: 0,
+};
+exports.Timer = (0, react_1.forwardRef)(function Timer(_a, forwardedRef) {
+    var { enabled = exports.defaultProps.enabled, interval = exports.defaultProps.interval, once = exports.defaultProps.once, initialDelay = exports.defaultProps.initialDelay, onTick, registerComponentApi, style, className } = _a, rest = __rest(_a, ["enabled", "interval", "once", "initialDelay", "onTick", "registerComponentApi", "style", "className"]);
+    const [isPaused, setIsPaused] = (0, react_1.useState)(false);
+    const [hasExecutedOnce, setHasExecutedOnce] = (0, react_1.useState)(false);
+    const [hasEverStarted, setHasEverStarted] = (0, react_1.useState)(false);
+    const intervalRef = (0, react_1.useRef)(null);
+    const initialDelayRef = (0, react_1.useRef)(null);
+    const handlerRunningRef = (0, react_1.useRef)(false);
+    // Refs for current values to ensure handleTick has stable dependencies
+    const enabledRef = (0, react_1.useRef)(enabled);
+    const isPausedRef = (0, react_1.useRef)(isPaused);
+    const intervalRef2 = (0, react_1.useRef)(interval);
+    const onTickRef = (0, react_1.useRef)(onTick);
+    const onceRef = (0, react_1.useRef)(once);
+    const hasExecutedOnceRef = (0, react_1.useRef)(hasExecutedOnce);
+    const hasEverStartedRef = (0, react_1.useRef)(hasEverStarted);
+    // Update refs when values change
+    enabledRef.current = enabled;
+    isPausedRef.current = isPaused;
+    intervalRef2.current = interval;
+    onTickRef.current = onTick;
+    onceRef.current = once;
+    hasExecutedOnceRef.current = hasExecutedOnce;
+    hasEverStartedRef.current = hasEverStarted;
+    // Derived state
+    const isRunning = enabled && !isPaused && (intervalRef.current !== null || initialDelayRef.current !== null);
+    const isInInitialDelay = initialDelayRef.current !== null;
+    // Timer API methods
+    const pause = (0, react_1.useCallback)(() => {
+        // Pause if timer is enabled and currently running (not already paused)
+        if (enabled && !isPaused) {
+            setIsPaused(true);
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+            if (initialDelayRef.current) {
+                clearTimeout(initialDelayRef.current);
+                initialDelayRef.current = null;
+            }
+        }
+    }, [enabled, isPaused]);
+    const resume = (0, react_1.useCallback)(() => {
+        // Resume if timer is enabled and currently paused
+        if (enabled && isPaused) {
+            setIsPaused(false);
+            // The useEffect will handle restarting the timer
+        }
+    }, [enabled, isPaused]);
+    // Create API object once
+    const timerApi = (0, react_1.useMemo)(() => ({
+        pause,
+        resume,
+        isPaused: () => isPaused,
+        isRunning: () => isRunning && !isPaused,
+    }), [pause, resume, isPaused, isRunning]);
+    // Register both APIs together
+    (0, react_1.useImperativeHandle)(forwardedRef, () => timerApi, [timerApi]);
+    (0, react_1.useEffect)(() => {
+        if (registerComponentApi) {
+            registerComponentApi(timerApi);
+        }
+    }, [registerComponentApi, timerApi]);
+    const handleTick = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        // Check if timer should still be running (enabled, not paused, valid interval)
+        if (!enabledRef.current || isPausedRef.current || intervalRef2.current <= 0) {
+            return;
+        }
+        // Prevent re-firing if the previous event hasn't completed yet
+        if (handlerRunningRef.current) {
+            return;
+        }
+        if (onTickRef.current) {
+            handlerRunningRef.current = true;
+            try {
+                yield onTickRef.current();
+                // Mark that the timer has actually started executing (for initial delay logic)
+                if (!hasEverStartedRef.current) {
+                    setHasEverStarted(true);
+                }
+                // If this is a "once" timer and it's the very first execution, mark it as executed
+                // After the first execution, the timer becomes a regular timer that can be paused/resumed
+                if (onceRef.current && !hasExecutedOnceRef.current) {
+                    setHasExecutedOnce(true);
+                }
+            }
+            finally {
+                handlerRunningRef.current = false;
+            }
+        }
+    }), []);
+    (0, react_1.useEffect)(() => {
+        // Clear any existing timers first
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        if (initialDelayRef.current) {
+            clearTimeout(initialDelayRef.current);
+            initialDelayRef.current = null;
+        }
+        // If "once" is true and the timer has already executed, don't start the timer
+        if (once && hasExecutedOnce) {
+            return;
+        }
+        if (enabled && !isPaused && interval > 0) {
+            // Helper to start the actual timer
+            const startTicking = () => {
+                intervalRef.current = (once && !hasExecutedOnce)
+                    ? setTimeout(handleTick, interval)
+                    : setInterval(handleTick, interval);
+            };
+            // Only apply initial delay if timer has never been started before
+            if (initialDelay > 0 && !hasEverStarted) {
+                initialDelayRef.current = setTimeout(() => {
+                    initialDelayRef.current = null;
+                    startTicking();
+                }, initialDelay);
+            }
+            else {
+                startTicking();
+            }
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+            if (initialDelayRef.current) {
+                clearTimeout(initialDelayRef.current);
+                initialDelayRef.current = null;
+            }
+        };
+    }, [enabled, interval, once, hasExecutedOnce, isPaused, initialDelay, hasEverStarted]);
+    // Reset state when enabled changes
+    (0, react_1.useEffect)(() => {
+        if (enabled && once) {
+            // Reset hasExecutedOnce when enabled changes from false to true for "once" timers
+            setHasExecutedOnce(false);
+        }
+        if (!enabled) {
+            // Reset pause state when timer is disabled
+            setIsPaused(false);
+        }
+    }, [enabled, once]);
+    // Timer is a non-visual component
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: forwardedRef, style: Object.assign({ display: "none" }, style), className: className, "data-timer-enabled": enabled, "data-timer-interval": interval, "data-timer-initial-delay": initialDelay, "data-timer-once": once, "data-timer-running": isRunning, "data-timer-paused": isPaused, "data-timer-in-initial-delay": isInInitialDelay, "data-timer-has-executed": hasExecutedOnce }, rest)));
+});

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

@@ -139,7 +139,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
     }, [focus, registerComponentApi, setValue]);
     const input = (0, react_2.useMemo)(() => {
         const legitValue = transformToLegitValue(value);
-        return ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: legitValue, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : legitValue, "aria-required": required, "aria-disabled": !enabled, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), Toggle_module_scss_1.default.resetAppearance, {
+        return ((0, jsx_runtime_1.jsx)("input", { id: inputId, "data-part-id": parts_1.PART_INPUT, ref: innerRef, type: "checkbox", role: variant, checked: legitValue, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : legitValue, "aria-required": required, "aria-disabled": !enabled, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, {
                 [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
                 [Toggle_module_scss_1.default.switch]: variant === "switch",
                 [Toggle_module_scss_1.default.error]: validationStatus === "error",

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

@@ -33,49 +33,49 @@ exports.TooltipMd = (0, metadata_helpers_1.createMetadata)({
         delayDuration: {
             description: "The duration from when the mouse enters a tooltip trigger until the tooltip opens (in ms)",
             type: "number",
-            defaultValue: TooltipNative_1.defaultProps.delayDuration,
+            defaultValue: 700,
         },
         skipDelayDuration: {
             description: "How much time a user has to enter another trigger without incurring a delay again (in ms)",
             type: "number",
-            defaultValue: TooltipNative_1.defaultProps.skipDelayDuration,
+            defaultValue: 300,
         },
         defaultOpen: {
             description: "The open state of the tooltip when it is initially rendered",
             type: "boolean",
-            defaultValue: TooltipNative_1.defaultProps.defaultOpen,
+            defaultValue: false,
         },
         showArrow: {
             description: "Whether to show the arrow pointing to the trigger element",
             type: "boolean",
-            defaultValue: TooltipNative_1.defaultProps.showArrow,
+            defaultValue: false,
         },
         side: {
             description: "The preferred side of the trigger to render against when open",
             type: "string",
             availableValues: ["top", "right", "bottom", "left"],
-            defaultValue: TooltipNative_1.defaultProps.side,
+            defaultValue: "top",
         },
         align: {
             description: "The preferred alignment against the trigger",
             type: "string",
             availableValues: ["start", "center", "end"],
-            defaultValue: TooltipNative_1.defaultProps.align,
+            defaultValue: "center",
         },
         sideOffset: {
             description: "The distance in pixels from the trigger",
             type: "number",
-            defaultValue: TooltipNative_1.defaultProps.sideOffset,
+            defaultValue: 4,
         },
         alignOffset: {
             description: "An offset in pixels from the 'start' or 'end' alignment options",
             type: "number",
-            defaultValue: TooltipNative_1.defaultProps.alignOffset,
+            defaultValue: 0,
         },
         avoidCollisions: {
             description: "When true, overrides the side and align preferences to prevent collisions with boundary edges",
             type: "boolean",
-            defaultValue: TooltipNative_1.defaultProps.avoidCollisions,
+            defaultValue: true,
         },
     },
     events: {},

package/dist/scripts/src/components/Tooltip/TooltipNative.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = exports.defaultProps = void 0;
 exports.parseTooltipOptions = parseTooltipOptions;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const RadixTooltip = __importStar(require("@radix-ui/react-tooltip"));
 const lodash_es_1 = require("lodash-es");
 const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
@@ -55,12 +56,11 @@ exports.defaultProps = {
     alignOffset: 0,
     avoidCollisions: true,
 };
-const Tooltip = function Tooltip({ text, markdown, tooltipTemplate, delayDuration = exports.defaultProps.delayDuration, skipDelayDuration = exports.defaultProps.skipDelayDuration, defaultOpen = exports.defaultProps.defaultOpen, showArrow = exports.defaultProps.showArrow, side = exports.defaultProps.side, align = exports.defaultProps.align, sideOffset = exports.defaultProps.sideOffset, alignOffset = exports.defaultProps.alignOffset, avoidCollisions = exports.defaultProps.avoidCollisions, children, }) {
+exports.Tooltip = (0, react_1.forwardRef)(function Tooltip({ text, markdown, tooltipTemplate, delayDuration = exports.defaultProps.delayDuration, skipDelayDuration = exports.defaultProps.skipDelayDuration, defaultOpen = exports.defaultProps.defaultOpen, showArrow = exports.defaultProps.showArrow, side = exports.defaultProps.side, align = exports.defaultProps.align, sideOffset = exports.defaultProps.sideOffset, alignOffset = exports.defaultProps.alignOffset, avoidCollisions = exports.defaultProps.avoidCollisions, children, open, }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const showTooltip = !!(text || markdown || tooltipTemplate);
-    return ((0, jsx_runtime_1.jsx)(RadixTooltip.Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: (0, jsx_runtime_1.jsxs)(RadixTooltip.Root, { defaultOpen: defaultOpen, children: [(0, jsx_runtime_1.jsx)(RadixTooltip.Trigger, { asChild: true, children: children }), (0, jsx_runtime_1.jsx)(RadixTooltip.Portal, { container: root, children: showTooltip && ((0, jsx_runtime_1.jsxs)(RadixTooltip.Content, { className: Tooltip_module_scss_1.default.content, side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, avoidCollisions: avoidCollisions, children: [tooltipTemplate ? (tooltipTemplate) : markdown ? ((0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown })) : (text), showArrow && (0, jsx_runtime_1.jsx)(RadixTooltip.Arrow, { className: Tooltip_module_scss_1.default.arrow })] })) })] }) }));
-};
-exports.Tooltip = Tooltip;
+    return ((0, jsx_runtime_1.jsx)(RadixTooltip.Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: (0, jsx_runtime_1.jsxs)(RadixTooltip.Root, { defaultOpen: defaultOpen, open: open, children: [(0, jsx_runtime_1.jsx)(RadixTooltip.Trigger, { asChild: true, children: children }), (0, jsx_runtime_1.jsx)(RadixTooltip.Portal, { container: root, children: showTooltip && ((0, jsx_runtime_1.jsxs)(RadixTooltip.Content, { ref: ref, className: Tooltip_module_scss_1.default.content, side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, avoidCollisions: avoidCollisions, "data-tooltip-container": true, children: [tooltipTemplate ? (tooltipTemplate) : markdown ? ((0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown })) : (text), showArrow && (0, jsx_runtime_1.jsx)(RadixTooltip.Arrow, { className: Tooltip_module_scss_1.default.arrow })] })) })] }) }));
+});
 /**
  * Parses tooltip options from any input and returns an object containing only the option properties
  * of Tooltip (excludes non-option properties like text, triggerRef, and children)

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.orientationOptionValues = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonVariantValues = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.buttonThemeValues = exports.sizeMd = exports.sizeNames = 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.orientationOptionValues = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonVariantValues = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.buttonThemeValues = exports.sizeMd = exports.sizeValues = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.isSizeType = isSizeType;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -38,14 +39,16 @@ exports.viewportSizeMd = [
 ];
 exports.viewportSizeNames = Object.keys(exports.viewportSizeMd);
 // --- Available button sizes
-exports.sizeNames = ["xs", "sm", "md", "lg"];
+exports.sizeValues = ["xs", "sm", "md", "lg"];
 exports.sizeMd = [
     { value: "xs", description: "Extra small" },
     { value: "sm", description: "Small" },
     { value: "md", description: "Medium" },
     { value: "lg", description: "Large" },
 ];
-const sizeValues = Object.keys(exports.sizeMd);
+function isSizeType(value) {
+    return exports.sizeValues.includes(value);
+}
 // --- Available button themes
 exports.buttonThemeValues = ["attention", "primary", "secondary"];
 exports.buttonThemeNames = [...exports.buttonThemeValues];

package/dist/scripts/src/components-core/ComponentDecorator.js

@@ -56,11 +56,12 @@ const ComponentDecorator = (0, react_1.forwardRef)((props, forwardedRef) => {
         }
         if (node) {
             Object.entries(shallowAttrs).forEach(([key, value]) => {
+                var _a, _b;
                 if (value !== undefined) {
-                    node.setAttribute(key, value);
+                    (_a = node.setAttribute) === null || _a === void 0 ? void 0 : _a.call(node, key, value);
                 }
                 else {
-                    node.removeAttribute(key);
+                    (_b = node.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(node, key);
                 }
             });
         }

package/dist/scripts/src/components-core/interception/ApiInterceptor.js

@@ -164,7 +164,10 @@ class ApiInterceptor {
                 if (ret instanceof File) {
                     headers.append("Content-type", ret.type);
                     headers.append("Content-Length", ret.size + "");
-                    headers.append("Content-Disposition", `attachment; filename="${ret.name}"; filename*=utf-8''${ret.name}`);
+                    // Properly encode filename for Content-Disposition header
+                    // Use percent-encoding for non-ASCII characters in filename*
+                    const encodedFilename = encodeURIComponent(ret.name);
+                    headers.append("Content-Disposition", `attachment; filename*=UTF-8''${encodedFilename}`);
                     return msw_1.HttpResponse.arrayBuffer(yield ret.arrayBuffer(), {
                         headers: headers,
                         status: successStatusCode,

package/dist/scripts/src/components-core/interception/Backend.js

@@ -106,7 +106,20 @@ class Backend {
                 localContext: localContext,
                 eventArgs: args,
                 appContext: Object.assign(Object.assign(Object.assign({}, date_functions_1.dateFunctions), misc_utils_1.miscellaneousUtils), { delay: misc_1.delay,
-                    Errors: Errors_1.default, createFile: (...args) => new File(args[0], args[1], args[2]), getDate: date_utils_1.getDate }),
+                    Errors: Errors_1.default, createFile: (...args) => {
+                        return new File(args[0], args[1], args[2]);
+                    }, appendBlob: (blob1, blob2) => {
+                        if (blob1 && blob2) {
+                            return new Blob([blob1, blob2], { type: blob1.type || blob2.type });
+                        }
+                        if (blob1) {
+                            return blob1;
+                        }
+                        if (blob2) {
+                            return blob2;
+                        }
+                        return null;
+                    }, getDate: date_utils_1.getDate }),
             });
             yield (0, statementUtils_1.runEventHandlerCode)(src, evalContext);
             return ((_g = (_f = evalContext.mainThread) === null || _f === void 0 ? void 0 : _f.blocks) === null || _g === void 0 ? void 0 : _g.length)

package/dist/scripts/src/components-core/parts.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PART_END_ADORNMENT = exports.PART_START_ADORNMENT = exports.PART_INPUT = exports.PART_LABELED_ITEM = exports.PART_LABEL = void 0;
-exports.partClassName = partClassName;
 exports.PART_LABEL = "label";
 exports.PART_LABELED_ITEM = "labeledItem";
 exports.PART_INPUT = "input";
 exports.PART_START_ADORNMENT = "startAdornment";
 exports.PART_END_ADORNMENT = "endAdornment";
-function partClassName(name) {
-    return `_PART_${name}_`;
-}

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -266,6 +266,8 @@ declare type BreakMode = (typeof BreakModeKeys)[number];
 
 declare const BreakModeKeys: readonly ["normal", "word", "anywhere", "keep", "hyphenate"];
 
+declare const Breakout: ({ children, style, ...rest }: Props_6) => JSX_2.Element;
+
 declare interface BreakStatement extends ScripNodeBase {
     type: BREAK_STATEMENT;
 }
@@ -277,7 +279,7 @@ declare const Button: default_2.ForwardRefExoticComponent<{
     type?: ButtonType;
     variant?: ButtonVariant;
     themeColor?: ButtonThemeColor;
-    size?: ComponentSize;
+    size?: SizeType;
     disabled?: boolean;
     children?: default_2.ReactNode | default_2.ReactNode[];
     icon?: default_2.ReactNode;
@@ -287,7 +289,6 @@ declare const Button: default_2.ForwardRefExoticComponent<{
     formId?: string;
     style?: CSSProperties;
     gap?: string | number;
-    accessibilityProps?: any;
     autoFocus?: boolean;
     contextualLabel?: string;
 } & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "role" | "onFocus" | "onBlur" | "onClick" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
@@ -495,8 +496,6 @@ declare type ComponentRendererDef<T extends ComponentDef = any> = {
 
 declare type ComponentRendererFn<T extends ComponentDef> = (context: RendererContext<T>) => ReactNode;
 
-declare type ComponentSize = (typeof sizeValues)[number];
-
 declare interface CompoundComponentDef extends Scriptable {
     name: string;
     component: ComponentDef;
@@ -853,7 +852,7 @@ declare interface IfStatement extends ScripNodeBase {
 }
 
 declare type InterceptorOperationDef = {
-    method: "get" | "post" | "put" | "delete";
+    method: "get" | "post" | "put" | "delete" | "patch" | "head" | "options";
     url: string | Array<string>;
     handler: string;
     requestShape?: any;
@@ -1039,8 +1038,6 @@ declare type ParserResult = {
  */
 declare function parseScssVar(scssStr: any): any;
 
-declare function partClassName(name: string): string;
-
 declare type POSTFIX_OP_EXPRESSION = typeof T_POSTFIX_OP_EXPRESSION;
 
 declare interface PostfixOpExpression extends ExpressionBase {
@@ -1069,8 +1066,8 @@ declare type ProjectCompilation = {
     themes: Record<string, ThemeDefinition>;
 };
 
-declare type PropertyValueDescription = string | number | {
-    value: string | number;
+declare type PropertyValueDescription<T = string | number> = T | {
+    value: T;
     description: string;
 };
 
@@ -1178,6 +1175,11 @@ declare type Props_5 = {
     passwordHiddenIcon?: string;
 };
 
+declare type Props_6 = {
+    children?: ReactNode;
+    style?: React.CSSProperties;
+};
+
 declare type REACTIVE_VAR_DECLARATION = typeof T_REACTIVE_VAR_DECLARATION;
 
 declare interface ReactiveVarDeclaration extends ExpressionBase {
@@ -1263,7 +1265,9 @@ declare interface SequenceExpression extends ExpressionBase {
     loose?: boolean;
 }
 
-declare const sizeValues: string[];
+declare type SizeType = (typeof sizeValues)[number];
+
+declare const sizeValues: readonly ["xs", "sm", "md", "lg"];
 
 declare const Spinner: ForwardRefExoticComponent<SpinnerProps & RefAttributes<HTMLDivElement>>;
 
@@ -1371,7 +1375,7 @@ declare const standaloneExports: {
         type?: ButtonType;
         variant?: ButtonVariant;
         themeColor?: ButtonThemeColor;
-        size?: ComponentSize;
+        size?: SizeType;
         disabled?: boolean;
         children?: default_2.ReactNode | default_2.ReactNode[];
         icon?: default_2.ReactNode;
@@ -1381,7 +1385,6 @@ declare const standaloneExports: {
         formId?: string;
         style?: default_2.CSSProperties;
         gap?: string | number;
-        accessibilityProps?: any;
         autoFocus?: boolean;
         contextualLabel?: string;
     } & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "role" | "onFocus" | "onBlur" | "onClick" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
@@ -1510,6 +1513,10 @@ declare const standaloneExports: {
         className?: string;
         inline?: boolean;
     } & default_2.RefAttributes<HTMLImageElement>>;
+    Breakout: ({ children, style, ...rest }: {
+        children?: default_2.ReactNode;
+        style?: default_2.CSSProperties;
+    }) => default_3.JSX.Element;
     useSearchContextContent: () => Record<string, {
         path: string;
         title: string;
@@ -1519,7 +1526,6 @@ declare const standaloneExports: {
     StyleProvider: typeof xmluiExports.StyleProvider;
     StyleRegistry: typeof xmluiExports.StyleRegistry;
     useEvent: UseEventOverload;
-    partClassName: typeof xmluiExports.partClassName;
     StandaloneComponent: typeof xmluiExports.StandaloneComponent;
 };
 export default standaloneExports;
@@ -2142,12 +2148,12 @@ declare namespace xmluiExports {
         LinkNative,
         ToneChangerButton,
         Logo,
+        Breakout,
         useSearchContextContent,
         useAppLayoutContext,
         StyleProvider,
         StyleRegistry,
         useEvent,
-        partClassName,
         StandaloneComponent
     }
 }