xmlui 0.9.14 → 0.9.15

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -594,6 +594,7 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
             return {};
         }
         const baseColor = (0, color_1.default)(color);
+        let color0;
         let color50;
         let color100;
         let color200;
@@ -605,7 +606,9 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
         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);
@@ -617,11 +620,13 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
             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);
@@ -633,8 +638,10 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
             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(),
@@ -646,6 +653,7 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
             [`const-${varName}-800`]: color800.toString(),
             [`const-${varName}-900`]: color900.toString(),
             [`const-${varName}-950`]: color950.toString(),
+            [`const-${varName}-1000`]: color1000.toString(),
         };
     }
     catch (e) {

package/dist/style.css

@@ -6692,76 +6692,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;
@@ -6769,18 +6779,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/xmlui-metadata.mjs

@@ -2024,6 +2024,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%)",
@@ -2232,6 +2233,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",
@@ -2320,7 +2322,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",
@@ -2332,6 +2334,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",
@@ -15321,7 +15324,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$h.themeVars)
 });
@@ -17671,7 +17679,7 @@ const TableOfContentsMd = createMetadata({
     [`color-${COMP$k}Item--active`]: "$color-primary-500"
   }
 });
-const themeVars$5 = `'{"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 themeVars$5 = `'{"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 styles$5 = {
   themeVars: themeVars$5
 };
@@ -17696,15 +17704,16 @@ const TabsMd = createMetadata({
   },
   themeVars: parseScssVar(styles$5.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$j}`]: "$backgroundColor-primary",
+    // [`backgroundColor-${COMP}`]: "transparent",
     [`borderStyle-${COMP$j}`]: "solid",
     [`borderColor-${COMP$j}`]: "$borderColor",
     [`borderColor-active-${COMP$j}`]: "$color-primary",
     [`borderWidth-${COMP$j}`]: "2px",
-    [`backgroundColor-trigger-${COMP$j}`]: "$backgroundColor-primary",
-    [`backgroundColor-trigger-${COMP$j}--hover`]: "$color-primary-50",
-    [`backgroundColor-list-${COMP$j}`]: "$color-primary-50",
-    [`textColor-trigger-${COMP$j}`]: "$color-primary-100"
+    // [`backgroundColor-trigger-${COMP}`]: "transparent",
+    [`backgroundColor-trigger-${COMP$j}--hover`]: "$color-surface-100",
+    [`padding-trigger-${COMP$j}`]: "$space-4"
+    // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+    // [`textColor-trigger-${COMP}`]: "$color-primary-100",
   }
 });
 const COMP$i = "Text";

package/dist/xmlui-metadata.umd.js

@@ -2021,6 +2021,7 @@
       "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%)",
@@ -2229,6 +2230,7 @@
           "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",
@@ -2317,7 +2319,7 @@
       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",
@@ -2329,6 +2331,7 @@
           "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",
@@ -15318,7 +15321,12 @@
       )
     },
     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$h.themeVars)
   });
@@ -17668,7 +17676,7 @@
       [`color-${COMP$k}Item--active`]: "$color-primary-500"
     }
   });
-  const themeVars$5 = `'{"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 themeVars$5 = `'{"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 styles$5 = {
     themeVars: themeVars$5
   };
@@ -17693,15 +17701,16 @@
     },
     themeVars: parseScssVar(styles$5.themeVars),
     defaultThemeVars: {
-      [`backgroundColor-${COMP$j}`]: "$backgroundColor-primary",
+      // [`backgroundColor-${COMP}`]: "transparent",
       [`borderStyle-${COMP$j}`]: "solid",
       [`borderColor-${COMP$j}`]: "$borderColor",
       [`borderColor-active-${COMP$j}`]: "$color-primary",
       [`borderWidth-${COMP$j}`]: "2px",
-      [`backgroundColor-trigger-${COMP$j}`]: "$backgroundColor-primary",
-      [`backgroundColor-trigger-${COMP$j}--hover`]: "$color-primary-50",
-      [`backgroundColor-list-${COMP$j}`]: "$color-primary-50",
-      [`textColor-trigger-${COMP$j}`]: "$color-primary-100"
+      // [`backgroundColor-trigger-${COMP}`]: "transparent",
+      [`backgroundColor-trigger-${COMP$j}--hover`]: "$color-surface-100",
+      [`padding-trigger-${COMP$j}`]: "$space-4"
+      // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+      // [`textColor-trigger-${COMP}`]: "$color-primary-100",
     }
   });
   const COMP$i = "Text";