cetec-design-system 1.3.0 → 1.3.1

package/dist/panda.buildinfo.json

@@ -913,6 +913,7 @@
       "box": [],
       "autocomplete": [
         "size]___[value:md]___[recipe:autocomplete",
+        "layer]___[value:elevated]___[recipe:autocomplete",
         "size]___[value:sm]___[recipe:autocomplete",
         "size]___[value:sm]___[cond:xs]___[recipe:autocomplete",
         "size]___[value:sm]___[cond:sm]___[recipe:autocomplete",
@@ -939,7 +940,8 @@
         "size]___[value:xl]___[cond:md]___[recipe:autocomplete",
         "size]___[value:xl]___[cond:lg]___[recipe:autocomplete",
         "size]___[value:xl]___[cond:xl]___[recipe:autocomplete",
-        "size]___[value:xl]___[cond:2xl]___[recipe:autocomplete"
+        "size]___[value:xl]___[cond:2xl]___[recipe:autocomplete",
+        "layer]___[value:modalFloating]___[recipe:autocomplete"
       ],
       "formField": [
         "layout]___[value:default]___[recipe:formField",
@@ -1020,6 +1022,7 @@
       ],
       "menu": [
         "density]___[value:compact]___[recipe:menu",
+        "layer]___[value:elevated]___[recipe:menu",
         "density]___[value:comfortable]___[recipe:menu",
         "density]___[value:spacious]___[recipe:menu",
         "density]___[value:comfortable]___[cond:xs]___[recipe:menu",
@@ -1040,7 +1043,8 @@
         "density]___[value:spacious]___[cond:md]___[recipe:menu",
         "density]___[value:spacious]___[cond:lg]___[recipe:menu",
         "density]___[value:spacious]___[cond:xl]___[recipe:menu",
-        "density]___[value:spacious]___[cond:2xl]___[recipe:menu"
+        "density]___[value:spacious]___[cond:2xl]___[recipe:menu",
+        "layer]___[value:modalFloating]___[recipe:menu"
       ],
       "list": [
         "density]___[value:compact]___[recipe:list",

package/dist/preset.js

@@ -1,5 +1,5 @@
 import "@pandacss/dev";
-import { a } from "./cetec-preset-DoOSSOUC.js";
+import { a } from "./cetec-preset-DA6_Lz-z.js";
 export {
   a as cetecPreset
 };

package/dist/specs/recipes.json

@@ -695,6 +695,10 @@
     {
       "name": "autocomplete",
       "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
         "size": [
           "sm",
           "md",
@@ -703,13 +707,18 @@
         ]
       },
       "defaultVariants": {
-        "size": "md"
+        "size": "md",
+        "layer": "elevated"
       },
       "functionExamples": [
-        "autocomplete({ size: 'sm' })"
+        "autocomplete({ layer: 'elevated' })",
+        "autocomplete({ size: 'sm' })",
+        "autocomplete({ layer: 'elevated', size: 'sm' })"
       ],
       "jsxExamples": [
-        "<Autocomplete size=\"sm\" />"
+        "<Autocomplete layer=\"elevated\" />",
+        "<Autocomplete size=\"sm\" />",
+        "<Autocomplete layer=\"elevated\" size=\"sm\" />"
       ]
     },
     {
@@ -1088,6 +1097,10 @@
     {
       "name": "menu",
       "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
         "density": [
           "compact",
           "comfortable",
@@ -1098,17 +1111,20 @@
         ]
       },
       "defaultVariants": {
-        "density": "compact"
+        "density": "compact",
+        "layer": "elevated"
       },
       "functionExamples": [
+        "menu({ layer: 'elevated' })",
         "menu({ density: 'compact' })",
         "menu({ panel: true })",
-        "menu({ density: 'compact', panel: true })"
+        "menu({ layer: 'elevated', density: 'compact', panel: true })"
       ],
       "jsxExamples": [
+        "<Menu layer=\"elevated\" />",
         "<Menu density=\"compact\" />",
         "<Menu panel={true} />",
-        "<Menu density=\"compact\" panel={true} />"
+        "<Menu layer=\"elevated\" density=\"compact\" panel={true} />"
       ]
     },
     {

package/dist/specs/semantic-tokens.json

@@ -4389,6 +4389,16 @@
           ],
           "cssVar": "var(--cetec-z-index-modal)"
         },
+        {
+          "name": "modalFloating",
+          "values": [
+            {
+              "value": "{zIndex.1102}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--cetec-z-index-modal-floating)"
+        },
         {
           "name": "tooltip",
           "values": [

package/dist/specs/tokens.json

@@ -3264,6 +3264,11 @@
           "value": 1101,
           "cssVar": "var(--cetec-z-index-1101)"
         },
+        {
+          "name": "1102",
+          "value": 1102,
+          "cssVar": "var(--cetec-z-index-1102)"
+        },
         {
           "name": "1200",
           "value": 1200,

package/dist/styles.css

@@ -661,6 +661,7 @@
     --cetec-z-index-1000: 1000;
     --cetec-z-index-1100: 1100;
     --cetec-z-index-1101: 1101;
+    --cetec-z-index-1102: 1102;
     --cetec-z-index-1200: 1200;
     --cetec-z-index--1: -1;
     --cetec-breakpoints-xs: 30rem;
@@ -987,6 +988,7 @@
     --cetec-z-index-elevated: var(--cetec-z-index-1000);
     --cetec-z-index-overlay: var(--cetec-z-index-1100);
     --cetec-z-index-modal: var(--cetec-z-index-1101);
+    --cetec-z-index-modal-floating: var(--cetec-z-index-1102);
     --cetec-z-index-tooltip: var(--cetec-z-index-1200);
 }
 
@@ -4475,7 +4477,6 @@
       font-weight: var(--cetec-font-weights-normal);
       color: var(--cetec-colors-text-subtlest);
       box-shadow: var(--cetec-shadows-overlay);
-      z-index: var(--cetec-z-index-elevated);
       max-height: var(--cetec-sizes-192);
       overflow-y: auto;
 }
@@ -5477,7 +5478,6 @@
       line-height: var(--cetec-line-heights-default);
       color: var(--cetec-colors-text-subtlest);
       box-shadow: var(--cetec-shadows-overlay);
-      z-index: 100;
       --transition-prop: width, height;
       transition-property: width, height;
       --transition-duration: var(--cetec-durations-normal);
@@ -6349,6 +6349,10 @@
     --loading-size: var(--cetec-sizes-20);
 }
 
+  .cetec-autocomplete__listbox--layer_elevated {
+    z-index: var(--cetec-z-index-elevated);
+}
+
   .cetec-autocomplete__root--size_sm {
     --control-py: var(--cetec-sizes-0);
     --control-px: var(--cetec-sizes-8);
@@ -6379,6 +6383,10 @@
     --loading-size: var(--cetec-sizes-24);
 }
 
+  .cetec-autocomplete__listbox--layer_modalFloating {
+    z-index: var(--cetec-z-index-modal-floating);
+}
+
   .cetec-avatar__root--size_md {
     width: var(--cetec-sizes-20);
 }
@@ -7508,19 +7516,24 @@
     padding-block: var(--cetec-spacing-1);
     padding-inline-end: var(--cetec-spacing-18);
     padding-inline-start: var(--cetec-spacing-5);
-}
-
-  .cetec-menu__backHeader--density_compact,.cetec-menu__backHeader--density_comfortable {
     font-family: var(--cetec-fonts-body);
     font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
     color: var(--cetec-colors-text);
     font-size: var(--cetec-font-sizes-16);
 }
 
+  .cetec-menu__wrapper--layer_elevated {
+    z-index: var(--cetec-z-index-elevated);
+}
+
   .cetec-menu__backHeader--density_comfortable {
     padding-block: var(--cetec-spacing-5);
     padding-inline-end: var(--cetec-spacing-20);
     padding-inline-start: var(--cetec-spacing-7);
+    font-family: var(--cetec-fonts-body);
+    font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
+    color: var(--cetec-colors-text);
+    font-size: var(--cetec-font-sizes-16);
 }
 
   .cetec-menu__backHeader--density_spacious {
@@ -7533,6 +7546,10 @@
     font-size: var(--cetec-font-sizes-20);
 }
 
+  .cetec-menu__wrapper--layer_modalFloating {
+    z-index: var(--cetec-z-index-modal-floating);
+}
+
   .cetec-menu__wrapper--panel_true {
     border-radius: var(--cetec-radii-0);
     box-shadow: none;

package/dist/types/index.d.ts

@@ -230,6 +230,10 @@ export declare type AutocompleteProps<Multiple extends boolean = boolean> = Mult
 export declare type AutocompleteValue<Multiple extends boolean = false> = Multiple extends true ? string[] : Multiple extends false ? string | null : string | string[] | null;
 
 declare interface AutocompleteVariant {
+    /**
+     * @default "elevated"
+     */
+    layer: "elevated" | "modalFloating"
     /**
      * @default "md"
      */
@@ -3933,6 +3937,10 @@ declare type MenuRootContextValue = {
 declare type MenuTriggerInteraction = 'click' | 'hover' | 'focus' | 'click-and-hover';
 
 declare interface MenuVariant {
+    /**
+     * @default "elevated"
+     */
+    layer: "elevated" | "modalFloating"
     /**
      * @default "compact"
      */
@@ -24755,7 +24763,7 @@ declare interface WrapProperties {
 
 declare interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
 
-declare type ZIndexToken = "0" | "1" | "2" | "3" | "4" | "5" | "10" | "1000" | "1100" | "1101" | "1200" | "-1" | "base" | "raised" | "elevated" | "overlay" | "modal" | "tooltip"
+declare type ZIndexToken = "0" | "1" | "2" | "3" | "4" | "5" | "10" | "1000" | "1100" | "1101" | "1102" | "1200" | "-1" | "base" | "raised" | "elevated" | "overlay" | "modal" | "modalFloating" | "tooltip"
 
 export { }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cetec-design-system",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Cetec-ERP Design System",
   "type": "module",
   "main": "./dist/index.js",

package/src/recipes/autocomplete.ts

@@ -164,7 +164,6 @@ const autocompleteBase = {
     borderRadius: '4',
     boxShadow: 'overlay',
     outline: 'none',
-    zIndex: 'elevated',
   },
   status: {
     display: 'flex',
@@ -183,6 +182,18 @@ const autocompleteBase = {
 };
 
 const autocompleteVariants = {
+  layer: {
+    elevated: {
+      listbox: {
+        zIndex: 'elevated',
+      },
+    },
+    modalFloating: {
+      listbox: {
+        zIndex: 'modalFloating',
+      },
+    },
+  },
   size: {
     sm: {
       root: {
@@ -250,5 +261,6 @@ export const autocompleteRecipe = defineSlotRecipe({
   variants: autocompleteVariants,
   defaultVariants: {
     size: 'md',
+    layer: 'elevated',
   },
 });

package/src/recipes/menu.ts

@@ -10,7 +10,6 @@ const menuBase = {
     borderRadius: '4',
     boxShadow: 'overlay',
     overflow: 'hidden',
-    zIndex: '100',
     transitionProperty: 'width, height',
     transitionDuration: 'normal',
     transitionTimingFunction: 'default',
@@ -72,6 +71,18 @@ const menuBase = {
 };
 
 const menuVariants = {
+  layer: {
+    elevated: {
+      wrapper: {
+        zIndex: 'elevated',
+      },
+    },
+    modalFloating: {
+      wrapper: {
+        zIndex: 'modalFloating',
+      },
+    },
+  },
   density: {
     compact: {
       backHeader: {
@@ -131,5 +142,6 @@ export const menuRecipe = defineSlotRecipe({
   variants: menuVariants,
   defaultVariants: {
     density: 'compact',
+    layer: 'elevated',
   },
 });

package/src/styles/primitives/zIndex.ts

@@ -12,5 +12,6 @@ export const zIndex = defineTokens.zIndex({
   '1000': { value: 1000 },
   '1100': { value: 1100 },
   '1101': { value: 1101 },
+  '1102': { value: 1102 },
   '1200': { value: 1200 },
 });

package/src/styles/semantics/zIndex.ts

@@ -6,6 +6,7 @@ import { defineSemanticTokens } from '@pandacss/dev';
  *   elevated  → shadows.elevated                     (menus, dropdowns)
  *   overlay   → shadows.overlay   / surface.overlay  (modal backdrop)
  *   modal     →                                      (modal container, above backdrop)
+ *   modalFloating →                                  (floating content inside a modal)
  *   tooltip   →                                      (always on top)
  */
 export const zIndex = defineSemanticTokens.zIndex({
@@ -14,5 +15,6 @@ export const zIndex = defineSemanticTokens.zIndex({
   elevated: { value: '{zIndex.1000}' },
   overlay: { value: '{zIndex.1100}' },
   modal: { value: '{zIndex.1101}' },
+  modalFloating: { value: '{zIndex.1102}' },
   tooltip: { value: '{zIndex.1200}' },
 });