xmlui 0.9.60 → 0.9.62

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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliderComponentRenderer = exports.SliderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Slider_module_scss_1 = __importDefault(require("./Slider.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 SliderNative_1 = require("./SliderNative");
 const COMP = "Slider";
-exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
+exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`Slider` provides an interactive control for selecting numeric values within " +
         "a defined range, supporting both single value selection and range selection with " +
@@ -38,14 +37,14 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
             description: `This property defines the increment value for the slider, determining the allowed intervals between selectable values.`,
             defaultValue: SliderNative_1.defaultProps.step,
         },
-        minStepsBetweenThumbs: (0, ComponentDefs_1.d)(`This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`, undefined, "number", SliderNative_1.defaultProps.minStepsBetweenThumbs),
+        minStepsBetweenThumbs: (0, metadata_helpers_1.d)(`This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`, undefined, "number", SliderNative_1.defaultProps.minStepsBetweenThumbs),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: SliderNative_1.defaultProps.validationStatus }),
-        rangeStyle: (0, ComponentDefs_1.d)(`This optional property allows you to apply custom styles to the range element of the slider.`),
-        thumbStyle: (0, ComponentDefs_1.d)(`This optional property allows you to apply custom styles to the thumb elements of the slider.`),
+        rangeStyle: (0, metadata_helpers_1.d)(`This optional property allows you to apply custom styles to the range element of the slider.`),
+        thumbStyle: (0, metadata_helpers_1.d)(`This optional property allows you to apply custom styles to the thumb elements of the slider.`),
         showValues: {
             description: `This property controls whether the slider shows the current values of the thumbs.`,
             valueType: "boolean",

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spaceFillerComponentRenderer = exports.SpaceFillerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SpaceFiller_module_scss_1 = __importDefault(require("./SpaceFiller.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpaceFillerNative_1 = require("./SpaceFillerNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "SpaceFiller";
-exports.SpaceFillerMd = (0, ComponentDefs_1.createMetadata)({
+exports.SpaceFillerMd = (0, metadata_helpers_1.createMetadata)({
     description: "`SpaceFiller` works well in layout containers to fill remaining (unused) " +
         "space. Its behavior depends on the layout container in which it is used.",
     themeVars: (0, themeVars_1.parseScssVar)(SpaceFiller_module_scss_1.default.themeVars),

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spinnerComponentRenderer = exports.SpinnerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpinnerNative_1 = require("./SpinnerNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Spinner";
-exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
+exports.SpinnerMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Spinner` is an animated indicator that represents an action in progress " +
         "with no deterministic progress value.",
     props: {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hSplitterComponentRenderer = exports.vSplitterComponentRenderer = exports.splitterComponentRenderer = exports.VSplitterMd = exports.HSplitterMd = exports.SplitterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const misc_1 = require("../../components-core/utils/misc");
 const EngineError_1 = require("../../components-core/EngineError");
@@ -14,7 +13,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const SplitterNative_1 = require("./SplitterNative");
 const COMP = "Splitter";
-const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
+const baseSplitterMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Splitter` component divides a container into two resizable sections. These " +
         "are are identified by their names: primary and secondary. They have a " +
         "draggable bar between them.",
@@ -60,7 +59,7 @@ const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        resize: (0, ComponentDefs_1.d)(`This event fires when the component is resized.`),
+        resize: (0, metadata_helpers_1.d)(`This event fires when the component is resized.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Splitter_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.chStackComponentRenderer = exports.cvStackComponentRenderer = exports.hStackComponentRenderer = exports.vStackComponentRenderer = exports.stackComponentRenderer = exports.CHStackMd = exports.CVStackMd = exports.HStackMd = exports.VStackMd = exports.StackMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const misc_1 = require("../../components-core/utils/misc");
 const EngineError_1 = require("../../components-core/EngineError");
@@ -27,7 +26,7 @@ const VERTICAL_ALIGNMENT = {
     valueType: "string",
     defaultValue: "start",
 };
-const stackMd = (0, ComponentDefs_1.createMetadata)({
+const stackMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Stack` is the fundamental layout container that organizes child elements in " +
         "configurable horizontal or vertical arrangements. As the most versatile building " +
         "block in XMLUI's layout system, it provides comprehensive alignment, spacing, " +

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.stickyBoxComponentRenderer = exports.StickyBoxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const StickyBoxNative_1 = require("./StickyBoxNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "StickyBox";
-exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
+exports.StickyBoxMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
     props: {

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

@@ -11,6 +11,8 @@ const classnames_1 = __importDefault(require("classnames"));
 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");
+// --- NOTE: React.StrictMode produces error logs using this component. Deployed apps are okay.
+// See here: https://github.com/gm0t/react-sticky-el/issues/82 
 // =====================================================================================================================
 // React StickyBox component implementation
 exports.defaultProps = {

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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.switchComponentRenderer = exports.SwitchMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.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 Toggle_1 = require("../Toggle/Toggle");
 const COMP = "Switch";
-exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
+exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Switch` enables users to toggle between two states: on and off.",
     props: {
         indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
@@ -47,14 +46,18 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-${COMP}`]: "$color-surface-0",
         [`borderColor-${COMP}`]: "$color-surface-200",
         [`borderWidth-${COMP}`]: "1px",
-        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-400",
+        [`backgroundColor-${COMP}-indicator--disabled`]: "$backgroundColor-primary",
         [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
+        dark: {
+            [`backgroundColor-indicator-${COMP}`]: "$color-surface-500",
+        }
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {

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

@@ -9,7 +9,6 @@ const react_1 = require("react");
 const immer_1 = __importDefault(require("immer"));
 const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
 require("./react-table-config.d.ts");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const constants_1 = require("../../components-core/constants");
@@ -18,35 +17,35 @@ const TableContext_1 = require("../Column/TableContext");
 const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
 const TableNative_1 = require("./TableNative");
 const COMP = "Table";
-exports.TableMd = (0, ComponentDefs_1.createMetadata)({
+exports.TableMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
     props: {
         items: (0, metadata_helpers_1.dInternal)(`You can use \`items\` as an alias for the \`data\` property. ` +
             `When you bind the table to a data source (e.g. an API endpoint), ` +
             `the \`data\` acts as the property that accepts a URL to fetch information from an API. ` +
             `When both \`items\` and \`data\` are used, \`items\` has priority.`),
-        data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
+        data: (0, metadata_helpers_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
             `that the \`Table\` can display.`),
         isPaginated: {
             description: `This property adds pagination controls to the \`${COMP}\`.`,
             valueType: "boolean",
             defaultValue: TableNative_1.defaultProps.isPaginated,
         },
-        loading: (0, ComponentDefs_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
+        loading: (0, metadata_helpers_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
-        headerHeight: (0, ComponentDefs_1.d)(`This optional property is used to specify the height of the table header.`),
-        rowsSelectable: (0, ComponentDefs_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
+        headerHeight: (0, metadata_helpers_1.d)(`This optional property is used to specify the height of the table header.`),
+        rowsSelectable: (0, metadata_helpers_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
         pageSizes: {
             description: "This property holds an array of page sizes (numbers) the user can select for " +
                 "pagination. If this property is not defined, the component allows only a page size of 10 items.",
         },
-        rowDisabledPredicate: (0, ComponentDefs_1.d)(`This property defines a predicate function with a return value that determines if the ` +
+        rowDisabledPredicate: (0, metadata_helpers_1.d)(`This property defines a predicate function with a return value that determines if the ` +
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),
         noDataTemplate: (0, metadata_helpers_1.dComponent)(`A property to customize what to display if the table does not contain any data.`),
-        sortBy: (0, ComponentDefs_1.d)("This property is used to determine which data property to sort by. If not defined, " +
+        sortBy: (0, metadata_helpers_1.d)("This property is used to determine which data property to sort by. If not defined, " +
             "the data is not sorted"),
-        sortDirection: (0, ComponentDefs_1.d)("This property determines the sort order to be \`ascending\` or \`descending\`. This " +
+        sortDirection: (0, metadata_helpers_1.d)("This property determines the sort order to be \`ascending\` or \`descending\`. This " +
             "property only works if the [\`sortBy\`](#sortby) property is also set. By default " +
             "ascending order is used."),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -55,13 +54,13 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: TableNative_1.defaultProps.hideHeader,
         },
-        iconNoSort: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is ` +
+        iconNoSort: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is ` +
             `enabled, but the column remains unsorted. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.nosort:Table" declaration in the app configuration file.`),
-        iconSortAsc: (0, ComponentDefs_1.d)(`Allows setting an alernate icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortAsc: (0, metadata_helpers_1.d)(`Allows setting an alernate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in ascending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortasc:Table" declaration in the app configuration file.`),
-        iconSortDesc: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is enabled, ` +
+        iconSortDesc: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is enabled, ` +
             `and the column is sorted in descending order. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.sortdesc:Table" declaration in the app configuration file.`),
         enableMultiRowSelection: {
@@ -86,22 +85,22 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        sortingDidChange: (0, ComponentDefs_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
+        sortingDidChange: (0, metadata_helpers_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
             `the column's name and the sort direction. When the column name is empty, the table ` +
             `displays the data list as it received it.`),
-        willSort: (0, ComponentDefs_1.d)(`This event is fired before the table data is sorted. It has two arguments: the ` +
+        willSort: (0, metadata_helpers_1.d)(`This event is fired before the table data is sorted. It has two arguments: the ` +
             `column's name and the sort direction. When the method returns a literal \`false\` ` +
             `value (and not any other falsy one), the method indicates that the sorting should be aborted.`),
-        selectionDidChange: (0, ComponentDefs_1.d)(`This event is triggered when the table's current selection (the rows selected) changes. ` +
+        selectionDidChange: (0, metadata_helpers_1.d)(`This event is triggered when the table's current selection (the rows selected) changes. ` +
             `Its parameter is an array of the selected table row items. `),
     },
     apis: {
-        clearSelection: (0, ComponentDefs_1.d)("This method clears the list of currently selected table rows."),
-        getSelectedItems: (0, ComponentDefs_1.d)(`This method returns the list of currently selected table rows items.`),
-        getSelectedIds: (0, ComponentDefs_1.d)(`This method returns the list of currently selected table rows IDs.`),
-        selectAll: (0, ComponentDefs_1.d)(`This method selects all the rows in the table. This method has no effect if the ` +
+        clearSelection: (0, metadata_helpers_1.d)("This method clears the list of currently selected table rows."),
+        getSelectedItems: (0, metadata_helpers_1.d)(`This method returns the list of currently selected table rows items.`),
+        getSelectedIds: (0, metadata_helpers_1.d)(`This method returns the list of currently selected table rows IDs.`),
+        selectAll: (0, metadata_helpers_1.d)(`This method selects all the rows in the table. This method has no effect if the ` +
             `rowsSelectable property is set to \`false\`.`),
-        selectId: (0, ComponentDefs_1.d)(`This method selects the row with the specified ID. This method has no effect if the ` +
+        selectId: (0, metadata_helpers_1.d)(`This method selects the row with the specified ID. This method has no effect if the ` +
             `\`rowsSelectable\` property is set to \`false\`. The method argument can be a ` +
             `single id or an array of them.`),
     },

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

@@ -106,6 +106,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
         visibleItems,
         rowsSelectable,
         enableMultiRowSelection,
+        rowDisabledPredicate,
         onSelectionDidChange,
     });
     // --- Create data with order information whenever the items in the table change
@@ -221,8 +222,11 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
                 }),
                 value: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),
-                onDidChange: (checked) => {
-                    checkAllRows(checked);
+                onDidChange: () => {
+                    const allSelected = table
+                        .getRowModel()
+                        .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
+                    checkAllRows(!allSelected);
                 } })) : null,
             cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: Table_module_scss_1.default.checkBoxWrapper,
                 value: row.getIsSelected(),

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

@@ -7,7 +7,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
 const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
-function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, onSelectionDidChange, }) {
+function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, rowDisabledPredicate, onSelectionDidChange, }) {
     // --- The focused index in the row source (if there is any)
     const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
     // --- The current selection interval
@@ -187,7 +187,11 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
         if (!enableMultiRowSelection && checked) {
             return;
         }
-        setSelectedRowIds(checked ? items.map((item) => item[idKey]) : []);
+        setSelectedRowIds(checked
+            ? items
+                .filter((item) => (rowDisabledPredicate ? !rowDisabledPredicate(item) : true))
+                .map((item) => item[idKey])
+            : []);
     });
     /**
      * This operation creates a hash object that indicates the selected status of selected row IDs

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableOfContentsRenderer = exports.TableOfContentsMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const TableOfContentsNative_1 = require("./TableOfContentsNative");
 const IndexerContext_1 = require("../App/IndexerContext");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "TableOfContents";
 const COMP_CHILD = "TableOfContentsItem";
-exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
+exports.TableOfContentsMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`TableOfContents` component collects [Heading](/components/Heading) and " +
         "[Bookmark](/components/Bookmark) within the current page and displays them in a navigable tree.",

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tabItemComponentRenderer = exports.TabItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const TabItemNative_1 = require("./TabItemNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "TabItem";
-exports.TabItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.TabItemMd = (0, metadata_helpers_1.createMetadata)({
     description: "`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, " +
         "providing both the tab header label and the content that displays when the tab " +
         "is selected. As a non-visual structural component, it serves as a container that " +

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

@@ -6,21 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tabsComponentRenderer = exports.TabsMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const renderers_1 = require("../../components-core/renderers");
 const container_helpers_1 = require("../container-helpers");
-const metadata_helpers_1 = require("../metadata-helpers");
 const TabsNative_1 = require("./TabsNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Tabs";
-exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
+exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`Tabs` enables users to switch among content panels using clickable tab headers. " +
         "It provides an efficient way to present multiple related sections in a single " +
         "interface area, with each tab containing distinct content defined by " +
         "[TabItem](/components/TabItem) components.",
     props: {
-        activeTab: (0, ComponentDefs_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
+        activeTab: (0, metadata_helpers_1.d)(`This property indicates the index of the active tab. The indexing starts from 0, ` +
             `representing the starting (leftmost) tab. If not set, the first tab is selected by default.`),
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
@@ -30,10 +29,14 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
-        tabTemplate: (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`),
+        tabTemplate: {
+            description: `This property declares the template for the clickable tab area.`,
+            valueType: "ComponentDef",
+            isInternal: true,
+        },
     },
     apis: {
-        next: (0, ComponentDefs_1.d)(`This method selects the next tab.`),
+        next: (0, metadata_helpers_1.d)(`This method selects the next tab.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.textComponentRenderer = exports.TextMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const abstractions_1 = require("../abstractions");
 const TextNative_1 = require("./TextNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Text";
-exports.TextMd = (0, ComponentDefs_1.createMetadata)({
+exports.TextMd = (0, metadata_helpers_1.createMetadata)({
     description: `The \`${COMP}\` component displays textual information in a number of optional ` +
         `styles and variants.`,
     props: {
-        value: (0, ComponentDefs_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
+        value: (0, metadata_helpers_1.d)(`The text to be displayed. This value can also be set via nesting the text into ` +
             `the \`${COMP}\` component.`),
         variant: {
             description: "An optional string value that provides named presets for text variants with a " +
@@ -35,7 +35,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
                 "If not defined, the text uses the current style of its context.",
             availableValues: abstractions_1.variantOptionsMd,
         },
-        maxLines: (0, ComponentDefs_1.d)("This property determines the maximum number of lines the component can wrap to. " +
+        maxLines: (0, metadata_helpers_1.d)("This property determines the maximum number of lines the component can wrap to. " +
             "If there is no space to display all the contents, the component displays up to as " +
             "many lines as specified in this property. When the value is not defined, there is " +
             "no limit on the displayed lines."),
@@ -83,9 +83,9 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-small",
         [`fontSize-${COMP}-sup`]: "$fontSize-smaller",
-        [`verticalAlign-${COMP}-sup`]: "super",
+        [`verticalAlignment-${COMP}-sup`]: "super",
         [`fontSize-${COMP}-sub`]: "$fontSize-smaller",
-        [`verticalAlign-${COMP}-sub`]: "sub",
+        [`verticalAlignment-${COMP}-sub`]: "sub",
         [`fontStyle-${COMP}-var`]: "italic",
         [`fontStyle-${COMP}-em`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.textAreaComponentRenderer = exports.TextAreaMd = exports.resizeOptionsMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TextArea_module_scss_1 = __importDefault(require("./TextArea.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");
@@ -18,7 +17,7 @@ exports.resizeOptionsMd = [
     { value: "vertical", description: "Can only resize vertically" },
     { value: "both", description: "Can resize in both dimensions" },
 ];
-exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
+exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`TextArea` provides a multiline text input area.",
     props: {
@@ -34,9 +33,9 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        maxRows: (0, ComponentDefs_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` ` +
+        maxRows: (0, metadata_helpers_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` ` +
             "can grow. If not set, the number of rows is unlimited."),
-        minRows: (0, ComponentDefs_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink. ` +
+        minRows: (0, metadata_helpers_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink. ` +
             `If not set, the minimum number of rows is 1.`),
         rows: {
             description: `Specifies the number of rows the component initially has.`,
@@ -74,7 +73,7 @@ exports.TextAreaMd = (0, ComponentDefs_1.createMetadata)({
     },
     apis: {
         focus: (0, metadata_helpers_1.dFocus)(COMP),
-        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        value: (0, metadata_helpers_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(TextArea_module_scss_1.default.themeVars),

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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.passwordInputComponentRenderer = exports.PasswordMd = exports.textBoxComponentRenderer = exports.TextBoxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TextBox_module_scss_1 = __importDefault(require("./TextBox.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 TextBoxNative_1 = require("./TextBoxNative");
 const COMP = "TextBox";
-exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
+exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`TextBox` captures user text input for forms, search fields, and data entry " +
         "with support for validation, icons, and formatting hints.",
@@ -45,7 +44,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     },
     apis: {
         focus: (0, metadata_helpers_1.dFocus)(COMP),
-        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        value: (0, metadata_helpers_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(TextBox_module_scss_1.default.themeVars),
@@ -64,7 +63,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         "borderColor-Input-error": "$borderColor-Input-default--error",
         "borderColor-Input-warning": "$borderColor-Input-default--warning",
         "borderColor-Input-success": "$borderColor-Input-default--success",
-        "color-placeholder-Input": "$textColor-subtitle",
+        "textColor-placeholder-Input": "$textColor-subtitle",
         "color-adornment-Input": "$textColor-subtitle",
         "outlineColor-Input--focus": "$outlineColor--focus",
         "outlineWidth-Input--focus": "$outlineWidth--focus",
@@ -85,7 +84,7 @@ function renderTextBox(layoutCss, state, updateState, extractValue, node, lookup
 exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
     return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);
 });
-exports.PasswordMd = (0, ComponentDefs_1.createMetadata)(Object.assign(Object.assign({}, exports.TextBoxMd), { description: "`Password` is a specialized [TextBox](/components/TextBox) that enables users " +
+exports.PasswordMd = (0, metadata_helpers_1.createMetadata)(Object.assign(Object.assign({}, exports.TextBoxMd), { description: "`Password` is a specialized [TextBox](/components/TextBox) that enables users " +
         "to input and edit passwords." }));
 exports.passwordInputComponentRenderer = (0, renderers_1.createComponentRenderer)("PasswordInput", exports.PasswordMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
     return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, "password");

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

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationToast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_hot_toast_1 = __importStar(require("react-hot-toast"));
 const TOASTER_CONTAINER_STYLE = {
     top: 40,
@@ -44,7 +45,17 @@ const TOASTER_CONTAINER_STYLE = {
     position: "absolute",
     overflowY: "hidden",
 };
+let toasterMounted = false;
 const NotificationToast = ({ toastDuration }) => {
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!toasterMounted) {
+            toasterMounted = true;
+            setShouldRender(true);
+        }
+    }, []);
+    if (!shouldRender)
+        return null;
     return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
 };
 exports.NotificationToast = NotificationToast;

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

@@ -13,23 +13,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeComponentRenderer = exports.ThemeMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ThemeNative_1 = require("./ThemeNative");
 const COMP = "Theme";
-exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
+exports.ThemeMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Theme` creates styling contexts to customize the appearance of nested " +
         "components without using CSS.",
     allowArbitraryProps: true,
     props: {
-        themeId: (0, ComponentDefs_1.d)(`This property specifies which theme to use by setting the theme's id.`),
+        themeId: (0, metadata_helpers_1.d)(`This property specifies which theme to use by setting the theme's id.`),
         tone: {
             description: "This property allows the setting of the current theme's tone.",
             availableValues: ["light", "dark"],
             valueType: "string",
             defaultValue: "light",
         },
-        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
+        root: (0, metadata_helpers_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
     },
     opaque: true,
 });

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

@@ -46,7 +46,7 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
         var _a, _b, _c;
         const themeToExtend = id ? themes.find((theme) => theme.id === id) : activeTheme;
         if (!themeToExtend) {
-            throw new Error("Theme not found");
+            throw new Error(`Theme not found: requested="${id}", available=[${themes.map((t) => t.id).join(", ")}]`);
         }
         const foundTheme = Object.assign(Object.assign({}, themeToExtend), { id: generatedId, tones: Object.assign(Object.assign({}, themeToExtend.tones), { [themeTone]: Object.assign(Object.assign({}, (_a = themeToExtend.tones) === null || _a === void 0 ? void 0 : _a[themeTone]), { themeVars: Object.assign(Object.assign({}, (_c = (_b = themeToExtend.tones) === null || _b === void 0 ? void 0 : _b[themeTone]) === null || _c === void 0 ? void 0 : _c.themeVars), themeVars) }) }) });
         return foundTheme;
@@ -75,15 +75,15 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
       @media (min-width: calc(${maxWidthLandscapePhone} + 1px)) {
           --screenSize: 2;
       }
-  
+
       @media (min-width: calc(${maxWidthTablet} + 1px)) {
           --screenSize: 3;
       }
-  
+
       @media (min-width: calc(${maxWidthDesktop} + 1px)) {
           --screenSize: 4;
       }
-  
+
       @media (min-width: calc(${maxWidthLargeDesktop} + 1px)) {
           --screenSize: 5;
       }