xmlui 0.9.14 → 0.9.15

package/dist/{apiInterceptorWorker-B9XuRkxC.mjs → apiInterceptorWorker-DHw39GG3.mjs}

@@ -12,7 +12,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _executor, _DeferredPromise_instances, decorate_fn, _a2;
 import { delay as delay$1, HttpResponse, http } from "msw";
 import { isArray, isObject as isObject$1, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-D82p1y9A.mjs";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-DFC3vDn-.mjs";
 import Dexie from "dexie";
 var POSITIONALS_EXP = /(%?)(%([sdijo]))/g;
 function serializePositional(positional, flag) {

package/dist/{index-D82p1y9A.mjs → index-DFC3vDn-.mjs}

@@ -8515,6 +8515,7 @@ function generateBaseTonesForColor(varName, theme2, options2 = { distributeEven:
       return {};
     }
     const baseColor = Color(color);
+    let color0;
     let color50;
     let color100;
     let color200;
@@ -8526,7 +8527,9 @@ function generateBaseTonesForColor(varName, theme2, options2 = { distributeEven:
     let color800;
     let color900;
     let color950;
+    let color1000;
     if (distributeEven) {
+      color0 = baseColor.lightness(100);
       color50 = baseColor.lightness(98);
       color100 = baseColor.lightness(95);
       color200 = baseColor.lightness(83);
@@ -8538,10 +8541,12 @@ function generateBaseTonesForColor(varName, theme2, options2 = { distributeEven:
       color800 = baseColor.lightness(27);
       color900 = baseColor.lightness(16);
       color950 = baseColor.lightness(13);
+      color1000 = baseColor.lightness(9);
     } else {
       const baseL = baseColor.hsl().l();
       const darkStep = baseL / 5;
       const lightStep = (100 - baseL) / 5;
+      color0 = baseColor.lightness(100);
       color50 = baseColor.lightness(baseL + lightStep * 4.5);
       color100 = baseColor.lightness(baseL + lightStep * 4);
       color200 = baseColor.lightness(baseL + lightStep * 3);
@@ -8553,8 +8558,10 @@ function generateBaseTonesForColor(varName, theme2, options2 = { distributeEven:
       color800 = baseColor.lightness(baseL - darkStep * 3);
       color900 = baseColor.lightness(baseL - darkStep * 4);
       color950 = baseColor.lightness(baseL - darkStep * 4.5);
+      color1000 = baseColor.lightness(baseL - darkStep * 5);
     }
     return {
+      [`const-${varName}-0`]: color0.toString(),
       [`const-${varName}-50`]: color50.toString(),
       [`const-${varName}-100`]: color100.toString(),
       [`const-${varName}-200`]: color200.toString(),
@@ -8565,7 +8572,8 @@ function generateBaseTonesForColor(varName, theme2, options2 = { distributeEven:
       [`const-${varName}-700`]: color700.toString(),
       [`const-${varName}-800`]: color800.toString(),
       [`const-${varName}-900`]: color900.toString(),
-      [`const-${varName}-950`]: color950.toString()
+      [`const-${varName}-950`]: color950.toString(),
+      [`const-${varName}-1000`]: color1000.toString()
     };
   } catch (e) {
     console.error("Error generating base tones for color:", varName);
@@ -12783,6 +12791,7 @@ const ListNative = forwardRef(function DynamicHeightList({
     });
   }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
   const rowTypeContextValue = useCallback((index) => rows[index]._row_type, [rows]);
+  const rowCount = (rows == null ? void 0 : rows.length) ?? 0;
   return /* @__PURE__ */ jsx(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: /* @__PURE__ */ jsx(ListContext.Provider, { value: expandContextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -12812,7 +12821,7 @@ const ListNative = forwardRef(function DynamicHeightList({
                 onScroll,
                 startMargin: hasOutsideScroll2 ? ((_a = parentRef.current) == null ? void 0 : _a.offsetTop) - ((_b = scrollRef.current) == null ? void 0 : _b.offsetTop) || 0 : 0,
                 item: Item,
-                count: rows.length ?? 0,
+                count: rowCount,
                 children: (rowIndex) => {
                   const row2 = rows[rowIndex];
                   const key = row2[idKey];
@@ -12822,7 +12831,7 @@ const ListNative = forwardRef(function DynamicHeightList({
                     case "SECTION_FOOTER":
                       return /* @__PURE__ */ jsx(Fragment$1, { children: (sectionFooterRenderer == null ? void 0 : sectionFooterRenderer(row2, key)) || /* @__PURE__ */ jsx("div", {}) }, key);
                     default:
-                      return /* @__PURE__ */ jsx(Fragment$1, { children: itemRenderer(row2, key) || /* @__PURE__ */ jsx("div", {}) }, key);
+                      return /* @__PURE__ */ jsx(Fragment$1, { children: itemRenderer(row2, key, rowIndex, rowCount) || /* @__PURE__ */ jsx("div", {}) }, key);
                   }
                 }
               }
@@ -12836,7 +12845,8 @@ const ListNative = forwardRef(function DynamicHeightList({
 function MemoizedSection({
   node,
   renderChild: renderChild2,
-  item: item2
+  item: item2,
+  contextVars = EMPTY_OBJECT
 }) {
   const { isExpanded, toggleExpanded } = useContext(ListContext);
   const id = item2.id;
@@ -12857,7 +12867,12 @@ function MemoizedSection({
       item: item2,
       context: sectionContext,
       itemKey: "$group",
-      contextKey: "$group"
+      contextKey: "$group",
+      contextVars: {
+        ...contextVars,
+        $isFirst: item2.index === 0,
+        $isLast: item2.index === item2.count - 1
+      }
     }
   );
 }
@@ -12940,7 +12955,12 @@ const ListMd = createMetadata({
     )
   },
   contextVars: {
-    $item: d(`This property represents the value of an item in the data list.`)
+    $item: d(`This property represents the value of an item in the data list.`),
+    $itemIndex: dComponent(
+      "This integer value represents the current row index (zero-based) while rendering children."
+    ),
+    $isFirst: dComponent("This boolean value indicates if the component renders its first item."),
+    $isLast: dComponent("This boolean value indicates if the component renders its last item.")
   },
   themeVars: parseScssVar(styles$D.themeVars)
 });
@@ -12978,14 +12998,19 @@ const dynamicHeightListComponentRenderer = createComponentRenderer(
         groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded),
         defaultGroups: extractValue(node.props.defaultGroups),
         borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true),
-        itemRenderer: itemTemplate && ((item2, key) => {
+        itemRenderer: itemTemplate && ((item2, key, rowIndex, count) => {
           return /* @__PURE__ */ jsx(
             MemoizedItem,
             {
               node: itemTemplate,
               item: item2,
               renderChild: renderChild2,
-              layoutContext
+              layoutContext,
+              contextVars: {
+                $itemIndex: rowIndex,
+                $isFirst: rowIndex === 0,
+                $isLast: rowIndex === count - 1
+              }
             },
             key
           );
@@ -22533,6 +22558,7 @@ const RootThemeDefinition = {
     "const-color-surface-800": "hsl(204, 30.3%, 27%)",
     "const-color-surface-900": "hsl(204, 30.3%, 16%)",
     "const-color-surface-950": "hsl(204, 30.3%, 13%)",
+    "const-color-surface-1000": "hsl(204, 30.3%, 9%)",
     "const-color-surface": "$const-color-surface-500",
     // --- Primary color shades (bluish)
     "const-color-primary-50": "hsl(212,71.9%,94.5%)",
@@ -22741,6 +22767,7 @@ const RootThemeDefinition = {
         "color-surface-800": "$const-color-surface-800",
         "color-surface-900": "$const-color-surface-900",
         "color-surface-950": "$const-color-surface-950",
+        "color-surface-1000": "$const-color-surface-1000",
         "color-surface": "$const-color-surface-500",
         "color-surface-base": "$color-surface-0",
         "color-surface-lower": "$color-surface-100",
@@ -22829,7 +22856,7 @@ const RootThemeDefinition = {
     dark: {
       themeVars: {
         // --- Default surface color shades (form white to black)
-        "color-surface-0": "$const-color-surface-950",
+        "color-surface-0": "$const-color-surface-1000",
         "color-surface-50": "$const-color-surface-950",
         "color-surface-100": "$const-color-surface-900",
         "color-surface-200": "$const-color-surface-800",
@@ -22841,6 +22868,7 @@ const RootThemeDefinition = {
         "color-surface-800": "$const-color-surface-200",
         "color-surface-900": "$const-color-surface-100",
         "color-surface-950": "$const-color-surface-50",
+        "color-surface-1000": "$const-color-surface-0",
         "color-surface": "$const-color-surface-500",
         "color-surface-base": "$color-surface-0",
         "color-surface-lower": "$color-surface-0",
@@ -26181,17 +26209,19 @@ const redirectRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx(Navigate, { to: createUrlWithQueryParams(extractValue(node.props.to)) });
   }
 );
-const themeVars$8 = `'{"backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)"}'`;
-const tabs = "_tabs_1mgc2_13";
-const filler = "_filler_1mgc2_27";
-const tabTrigger = "_tabTrigger_1mgc2_41";
-const tabsList = "_tabsList_1mgc2_81";
-const tabsContent = "_tabsContent_1mgc2_101";
+const themeVars$8 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)"}'`;
+const tabs = "_tabs_1ggvi_13";
+const filler = "_filler_1ggvi_26";
+const tabTrigger = "_tabTrigger_1ggvi_40";
+const distributeEvenly = "_distributeEvenly_1ggvi_57";
+const tabsList = "_tabsList_1ggvi_89";
+const tabsContent = "_tabsContent_1ggvi_111";
 const styles$f = {
   themeVars: themeVars$8,
   tabs,
   filler,
   tabTrigger,
+  distributeEvenly,
   tabsList,
   tabsContent
 };
@@ -26240,11 +26270,13 @@ function useTabContext() {
 }
 const Tabs = forwardRef(function Tabs2({
   activeTab = 0,
-  orientation = "vertical",
+  orientation = "horizontal",
   tabRenderer,
   style: style2,
   children,
-  registerComponentApi
+  registerComponentApi,
+  className,
+  distributeEvenly: distributeEvenly2 = false
 }, forwardedRef) {
   const { tabItems, tabContextValue } = useTabContextValue();
   const [activeIndex, setActiveIndex] = useState(activeTab);
@@ -26279,7 +26311,7 @@ const Tabs = forwardRef(function Tabs2({
     RTabs.Root,
     {
       ref: forwardedRef,
-      className: styles$f.tabs,
+      className: classnames(styles$f.tabs, className),
       value: `${currentTab}`,
       onValueChange: (tab) => {
         const newIndex = tabItems.findIndex((item2) => item2.id === tab);
@@ -26293,9 +26325,11 @@ const Tabs = forwardRef(function Tabs2({
       children: [
         /* @__PURE__ */ jsxs(RTabs.List, { className: styles$f.tabsList, children: [
           tabItems.map(
-            (tab) => tabRenderer ? /* @__PURE__ */ jsx(RTabs.Trigger, { value: tab.id, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id) : /* @__PURE__ */ jsx(RTabs.Trigger, { className: styles$f.tabTrigger, value: tab.id, children: tab.label }, tab.id)
+            (tab) => tabRenderer ? /* @__PURE__ */ jsx(RTabs.Trigger, { value: tab.id, asChild: true, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id) : /* @__PURE__ */ jsx(RTabs.Trigger, { className: classnames(styles$f.tabTrigger, {
+              [styles$f.distributeEvenly]: distributeEvenly2
+            }), value: tab.id, children: tab.label }, tab.id)
           ),
-          /* @__PURE__ */ jsx("div", { className: styles$f.filler, "data-orientation": orientation })
+          !distributeEvenly2 && !tabRenderer && /* @__PURE__ */ jsx("div", { className: styles$f.filler, "data-orientation": orientation })
         ] }),
         children
       ]
@@ -26323,15 +26357,16 @@ const TabsMd = createMetadata({
   },
   themeVars: parseScssVar(styles$f.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$m}`]: "$backgroundColor-primary",
+    // [`backgroundColor-${COMP}`]: "transparent",
     [`borderStyle-${COMP$m}`]: "solid",
     [`borderColor-${COMP$m}`]: "$borderColor",
     [`borderColor-active-${COMP$m}`]: "$color-primary",
     [`borderWidth-${COMP$m}`]: "2px",
-    [`backgroundColor-trigger-${COMP$m}`]: "$backgroundColor-primary",
-    [`backgroundColor-trigger-${COMP$m}--hover`]: "$color-primary-50",
-    [`backgroundColor-list-${COMP$m}`]: "$color-primary-50",
-    [`textColor-trigger-${COMP$m}`]: "$color-primary-100"
+    // [`backgroundColor-trigger-${COMP}`]: "transparent",
+    [`backgroundColor-trigger-${COMP$m}--hover`]: "$color-surface-100",
+    [`padding-trigger-${COMP$m}`]: "$space-4"
+    // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+    // [`textColor-trigger-${COMP}`]: "$color-primary-100",
   }
 });
 const tabsComponentRenderer = createComponentRenderer(
@@ -31561,7 +31596,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.9.14";
+const version = "0.9.15";
 const ApiInterceptorContext = createContext(null);
 function useApiInterceptorContext() {
   return useContext(ApiInterceptorContext);
@@ -35746,7 +35781,7 @@ function ApiInterceptorProvider({
       let interceptorWorker;
       (async () => {
         if (process.env.VITE_MOCK_ENABLED) {
-          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-B9XuRkxC.mjs");
+          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-DHw39GG3.mjs");
           if (interceptor) {
             interceptorWorker = await createApiInterceptorWorker(interceptor, apiWorker);
             if (!apiWorker) {
@@ -36968,14 +37003,16 @@ export {
   Stack as h,
   Splitter as i,
   getColor as j,
-  useColors as k,
-  useDevTools as l,
+  TabItemComponent as k,
+  Tabs as l,
   miscellaneousUtils as m,
-  useLogger as n,
+  useColors as n,
   orderBy as o,
   parseScssVar as p,
+  useDevTools as q,
   runEventHandlerCode as r,
   startApp as s,
   toCssVar$1 as t,
-  useTheme as u
+  useTheme as u,
+  useLogger as v
 };

package/dist/index.css

@@ -78,23 +78,15 @@
   }
   button {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=button] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=reset] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   [type=submit] {
     -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
   }
   :-moz-focusring {
     outline: auto;
@@ -7132,76 +7124,86 @@ li .htmlOl {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._tabs_1mgc2_13 {
+._tabs_1ggvi_13 {
   display: flex;
-  flex: 1 1 auto;
   width: 100%;
   background-color: var(--xmlui-backgroundColor-Tabs);
   overflow: hidden;
 }
-._tabs_1mgc2_13[data-orientation=horizontal] {
+._tabs_1ggvi_13[data-orientation=vertical] {
   flex-direction: row;
 }
-._tabs_1mgc2_13[data-orientation=vertical] {
+._tabs_1ggvi_13[data-orientation=horizontal] {
   flex-direction: column;
 }
 
-._filler_1mgc2_27 {
+._filler_1ggvi_26 {
   flex: 1 1 auto;
 }
-._filler_1mgc2_27[data-orientation=horizontal] {
+._filler_1ggvi_26[data-orientation=vertical] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-Tabs);
 }
-._filler_1mgc2_27[data-orientation=vertical] {
+._filler_1ggvi_26[data-orientation=horizontal] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-Tabs);
 }
 
-._tabTrigger_1mgc2_41 {
-  font-family: inherit;
+._tabTrigger_1ggvi_40 {
+  padding: var(--xmlui-padding-trigger-Tabs);
+  padding-left: var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-right: var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-top: var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
+  padding-bottom: var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)));
   color: var(--xmlui-textColor-trigger-Tabs);
   background-color: var(--xmlui-backgroundColor-trigger-Tabs);
-  padding: var(--xmlui-space-4);
+  border-radius: var(--xmlui-borderRadius-trigger-Tabs);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 15px;
+  font-size: var(--xmlui-fontSize-normal);
   line-height: 1;
   user-select: none;
-  border-color: transparent;
+  border: var(--xmlui-border-trigger-Tabs);
+}
+._tabTrigger_1ggvi_40._distributeEvenly_1ggvi_57 {
+  flex: 1 1 auto;
 }
-._tabTrigger_1mgc2_41:hover {
+._tabTrigger_1ggvi_40:hover {
   background-color: var(--xmlui-backgroundColor-trigger-Tabs--hover);
 }
-._tabTrigger_1mgc2_41[data-orientation=horizontal] {
+._tabTrigger_1ggvi_40[data-orientation=vertical] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-Tabs);
 }
-._tabTrigger_1mgc2_41[data-orientation=horizontal][data-state=active] {
+._tabTrigger_1ggvi_40[data-orientation=vertical][data-state=active] {
   border-right-width: var(--xmlui-borderWidth-Tabs);
   border-right-style: solid;
   border-right-color: var(--xmlui-borderColor-active-Tabs);
+  background-color: var(--xmlui-backgroundColor-trigger-Tabs--active);
 }
-._tabTrigger_1mgc2_41[data-orientation=vertical] {
+._tabTrigger_1ggvi_40[data-orientation=horizontal] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-Tabs);
 }
-._tabTrigger_1mgc2_41[data-orientation=vertical][data-state=active] {
+._tabTrigger_1ggvi_40[data-orientation=horizontal][data-state=active] {
   border-bottom-width: var(--xmlui-borderWidth-Tabs);
   border-bottom-style: solid;
   border-bottom-color: var(--xmlui-borderColor-active-Tabs);
+  background-color: var(--xmlui-backgroundColor-trigger-Tabs--active);
 }
-._tabTrigger_1mgc2_41:hover {
+._tabTrigger_1ggvi_40:hover {
   cursor: pointer;
 }
 
-._tabsList_1mgc2_81 {
+._tabsList_1ggvi_89 {
   background-color: var(--xmlui-backgroundColor-list-Tabs);
+  border-radius: var(--xmlui-borderRadius-list-Tabs);
+  border: var(--xmlui-border-list-Tabs);
   position: relative;
   z-index: 99;
   overflow: hidden;
@@ -7209,18 +7211,18 @@ li .htmlOl {
   flex-shrink: 0;
   scrollbar-width: thin;
 }
-._tabsList_1mgc2_81[data-orientation=horizontal] {
+._tabsList_1ggvi_89[data-orientation=vertical] {
   flex-direction: column;
 }
-._tabsList_1mgc2_81[data-orientation=vertical] {
+._tabsList_1ggvi_89[data-orientation=horizontal] {
   flex-direction: row;
 }
 
-._tabsList_1mgc2_81:hover {
+._tabsList_1ggvi_89:hover {
   overflow: auto;
 }
 
-._tabsContent_1mgc2_101 {
+._tabsContent_1ggvi_111 {
   flex-grow: 1;
   outline: none;
 }/*

package/dist/scripts/bin/build-lib.js

@@ -99,7 +99,7 @@ const buildLib = (_a) => __awaiter(void 0, [_a], void 0, function* ({ watchMode,
                 output: {
                     footer: (chunk) => {
                         if (chunk.name === "index" && chunk.fileName === umdFileName) {
-                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}']);}`;
+                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}'].default || window['${env.npm_package_name}']);}`;
                         }
                         return "";
                     },

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

@@ -71,7 +71,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: true,
         },
     },
-    childrenAsTemplate: 'itemTemplate',
+    childrenAsTemplate: "itemTemplate",
     apis: {
         scrollToTop: (0, ComponentDefs_1.d)("This method scrolls the list to the top."),
         scrollToBottom: (0, ComponentDefs_1.d)("This method scrolls the list to the bottom."),
@@ -80,6 +80,9 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     },
     contextVars: {
         $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the data list.`),
+        $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current row 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."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });
@@ -87,8 +90,12 @@ exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRend
     const itemTemplate = node.props.itemTemplate;
     const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
     return ((0, jsx_runtime_1.jsx)(ListNative_1.ListNative, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
-            ((item, key) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext }, key));
+            ((item, key, rowIndex, count) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: itemTemplate, item: item, renderChild: renderChild, layoutContext: layoutContext, contextVars: {
+                        $itemIndex: rowIndex,
+                        $isFirst: rowIndex === 0,
+                        $isLast: rowIndex === count - 1,
+                    } }, key));
             }), sectionRenderer: node.props.groupBy
             ? (item, key) => {
                 var _a, _b, _c;

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

@@ -334,7 +334,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
         if (rows.length) {
             (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length + 1, {
                 align: "end",
-                offset: scrollPaddingTop
+                offset: scrollPaddingTop,
             });
         }
     });
@@ -367,6 +367,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
         });
     }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
     const rowTypeContextValue = (0, react_1.useCallback)((index) => rows[index]._row_type, [rows]);
+    const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : 0;
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,
                 }), children: [loading && rows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
@@ -375,7 +376,9 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                             [List_module_scss_1.default.reverse]: scrollAnchor === "bottom",
                             [List_module_scss_1.default.borderCollapse]: borderCollapse,
                             [List_module_scss_1.default.sectioned]: groupBy !== undefined,
-                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: hasOutsideScroll ? ((((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) - ((_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop)) || 0) : 0, item: Item, count: (_c = rows.length) !== null && _c !== void 0 ? _c : 0, children: (rowIndex) => {
+                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: hasOutsideScroll
+                                ? ((_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop) - ((_c = scrollRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0
+                                : 0, item: Item, count: rowCount, children: (rowIndex) => {
                                 const row = rows[rowIndex];
                                 const key = row[idKey];
                                 switch (row._row_type) {
@@ -384,12 +387,12 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                                     case RowType.SECTION_FOOTER:
                                         return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}) }, key));
                                     default:
-                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: itemRenderer(row, key) || (0, jsx_runtime_1.jsx)("div", {}) }, key);
+                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: itemRenderer(row, key, rowIndex, rowCount) || (0, jsx_runtime_1.jsx)("div", {}) }, key));
                                 }
                             } }) }))] }) }) }));
 });
 // --- Helper function for List item rendering
-function MemoizedSection({ node, renderChild, item, }) {
+function MemoizedSection({ node, renderChild, item, contextVars = constants_1.EMPTY_OBJECT, }) {
     const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
     const id = item.id;
     const expanded = isExpanded(id);
@@ -401,5 +404,5 @@ function MemoizedSection({ node, renderChild, item, }) {
             },
         };
     }, [expanded, id, toggleExpanded]);
-    return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, item: item, context: sectionContext, itemKey: "$group", contextKey: "$group" }));
+    return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, item: item, context: sectionContext, itemKey: "$group", contextKey: "$group", contextVars: Object.assign(Object.assign({}, contextVars), { $isFirst: item.index === 0, $isLast: item.index === item.count - 1 }) }));
 }

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

@@ -34,15 +34,16 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        // [`backgroundColor-${COMP}`]: "transparent",
         [`borderStyle-${COMP}`]: "solid",
         [`borderColor-${COMP}`]: "$borderColor",
         [`borderColor-active-${COMP}`]: "$color-primary",
         [`borderWidth-${COMP}`]: "2px",
-        [`backgroundColor-trigger-${COMP}`]: "$backgroundColor-primary",
-        [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
-        [`backgroundColor-list-${COMP}`]: "$color-primary-50",
-        [`textColor-trigger-${COMP}`]: "$color-primary-100",
+        // [`backgroundColor-trigger-${COMP}`]: "transparent",
+        [`backgroundColor-trigger-${COMP}--hover`]: "$color-surface-100",
+        [`padding-trigger-${COMP}`]: "$space-4",
+        // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+        // [`textColor-trigger-${COMP}`]: "$color-primary-100",
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, layoutCss, registerComponentApi }) => {

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

@@ -43,7 +43,8 @@ const RTabs = __importStar(require("@radix-ui/react-tabs"));
 const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 const misc_1 = require("../../components-core/utils/misc");
 const TabContext_1 = require("../Tabs/TabContext");
-exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "vertical", tabRenderer, style, children, registerComponentApi, }, forwardedRef) {
+const classnames_1 = __importDefault(require("classnames"));
+exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientation = "horizontal", tabRenderer, style, children, registerComponentApi, className, distributeEvenly = false, }, forwardedRef) {
     const { tabItems, tabContextValue } = (0, TabContext_1.useTabContextValue)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(activeTab);
     const currentTab = (0, react_1.useMemo)(() => {
@@ -73,11 +74,13 @@ exports.Tabs = (0, react_1.forwardRef)(function Tabs({ activeTab = 0, orientatio
             next,
         });
     }, [next, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(RTabs.Root, { ref: forwardedRef, className: Tabs_module_scss_1.default.tabs, value: `${currentTab}`, onValueChange: (tab) => {
+    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: tabContextValue, children: (0, jsx_runtime_1.jsxs)(RTabs.Root, { ref: forwardedRef, className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabs, className), value: `${currentTab}`, onValueChange: (tab) => {
                 const newIndex = tabItems.findIndex((item) => item.id === tab);
                 if (newIndex !== activeIndex) {
                     tabContextValue.setActiveTabId(tab);
                     setActiveIndex(newIndex);
                 }
-            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: Tabs_module_scss_1.default.tabTrigger, value: tab.id, children: tab.label }, tab.id))), (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), children] }) }));
+            }, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabItems.map((tab) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: tab.id, asChild: true, children: tabRenderer({ label: tab.label, isActive: tab.id === currentTab }) }, tab.id)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: (0, classnames_1.default)(Tabs_module_scss_1.default.tabTrigger, {
+                                [Tabs_module_scss_1.default.distributeEvenly]: distributeEvenly
+                            }), value: tab.id, children: tab.label }, tab.id))), (!distributeEvenly && !tabRenderer) && (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), children] }) }));
 });

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -26,6 +26,7 @@ exports.RootThemeDefinition = {
         "const-color-surface-800": "hsl(204, 30.3%, 27%)",
         "const-color-surface-900": "hsl(204, 30.3%, 16%)",
         "const-color-surface-950": "hsl(204, 30.3%, 13%)",
+        "const-color-surface-1000": "hsl(204, 30.3%, 9%)",
         "const-color-surface": "$const-color-surface-500",
         // --- Primary color shades (bluish)
         "const-color-primary-50": "hsl(212,71.9%,94.5%)",
@@ -230,6 +231,7 @@ exports.RootThemeDefinition = {
                 "color-surface-800": "$const-color-surface-800",
                 "color-surface-900": "$const-color-surface-900",
                 "color-surface-950": "$const-color-surface-950",
+                "color-surface-1000": "$const-color-surface-1000",
                 "color-surface": "$const-color-surface-500",
                 "color-surface-base": "$color-surface-0",
                 "color-surface-lower": "$color-surface-100",
@@ -318,7 +320,7 @@ exports.RootThemeDefinition = {
         dark: {
             themeVars: {
                 // --- Default surface color shades (form white to black)
-                "color-surface-0": "$const-color-surface-950",
+                "color-surface-0": "$const-color-surface-1000",
                 "color-surface-50": "$const-color-surface-950",
                 "color-surface-100": "$const-color-surface-900",
                 "color-surface-200": "$const-color-surface-800",
@@ -330,6 +332,7 @@ exports.RootThemeDefinition = {
                 "color-surface-800": "$const-color-surface-200",
                 "color-surface-900": "$const-color-surface-100",
                 "color-surface-950": "$const-color-surface-50",
+                "color-surface-1000": "$const-color-surface-0",
                 "color-surface": "$const-color-surface-500",
                 "color-surface-base": "$color-surface-0",
                 "color-surface-lower": "$color-surface-0",