cetec-design-system 2.3.7 → 3.0.0

package/dist/{cetec-preset-CZJA5UR0.js → cetec-preset-D23KFUx3.js}

@@ -55,6 +55,7 @@ const conditions$1 = {
   expanded: '&:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"])',
   collapsed: '&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])',
   highlighted: "&[data-highlighted=true]",
+  new: "&[data-new=true]",
   complete: "&[data-complete=true]",
   incomplete: "&[data-incomplete=true]",
   dragging: "&[data-dragging=true]",
@@ -4202,7 +4203,19 @@ const textVariants = {
   },
   underline: {
     true: {
-      textDecoration: "underline"
+      textDecoration: "underline",
+      textDecorationThickness: "[0.0625em]",
+      textUnderlineOffset: "[0.15625em]",
+      textDecorationSkipInk: "all"
+    }
+  },
+  dashedUnderline: {
+    true: {
+      textDecoration: "underline",
+      textDecorationStyle: "dashed",
+      textDecorationThickness: "[0.0625em]",
+      textUnderlineOffset: "[0.15625em]",
+      textDecorationSkipInk: "all"
     }
   },
   truncate: {
@@ -4251,36 +4264,30 @@ const linkBase = {
   fontWeight: "medium",
   gap: "1",
   color: "link",
-  textDecoration: "none",
-  backgroundImage: "linear-gradient(90deg, transparent 0% 100%)",
-  backgroundSize: "100% 1px",
-  backgroundRepeat: "no-repeat",
-  backgroundPositionY: "100%",
-  outlineWidth: "2",
-  outlineStyle: "solid",
-  outlineColor: "transparent",
-  outlineOffset: "1",
-  width: "fit-content",
-  cursor: "pointer",
+  textDecoration: "underline",
+  textDecorationThickness: "[0.0625em]",
+  textUnderlineOffset: "[0.15625em]",
+  textDecorationSkipInk: "all",
+  textDecorationColor: "[color-mix(in srgb, currentColor 30%, transparent)]",
+  transition: "all",
+  transitionDuration: "fast",
+  bg: "none",
   _hover: {
-    color: "link",
-    backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
+    color: "link.pressed",
+    textDecorationColor: "current",
+    textDecorationThickness: "[0.125em]"
   },
   _focusVisible: {
     borderRadius: "4",
     outlineColor: "border.focused"
-  }
-};
-const linkVariants = {
-  ...textVariants,
+  },
   _disabled: {
-    true: {
-      cursor: "not-allowed",
-      opacity: 0.4,
-      pointerEvents: "none"
-    }
+    cursor: "not-allowed",
+    opacity: 0.4,
+    pointerEvents: "none"
   }
 };
+const linkVariants = { ...textVariants };
 const labelBase = {
   fontSize: "16",
   fontWeight: "normal",
@@ -5848,6 +5855,7 @@ const zIndex$1 = defineTokens.zIndex({
   "1000": { value: 1e3 },
   "1100": { value: 1100 },
   "1101": { value: 1101 },
+  "1102": { value: 1102 },
   "1200": { value: 1200 }
 });
 const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -6574,7 +6582,6 @@ const menuBase = {
     borderRadius: "4",
     boxShadow: "overlay",
     overflow: "hidden",
-    zIndex: "100",
     transitionProperty: "width, height",
     transitionDuration: "normal",
     transitionTimingFunction: "default",
@@ -6635,6 +6642,18 @@ const menuBase = {
   }
 };
 const menuVariants = {
+  layer: {
+    elevated: {
+      wrapper: {
+        zIndex: "elevated"
+      }
+    },
+    modalFloating: {
+      wrapper: {
+        zIndex: "modalFloating"
+      }
+    }
+  },
   density: {
     compact: {
       backHeader: {
@@ -6692,7 +6711,8 @@ const menuRecipe = defineSlotRecipe({
   base: menuBase,
   variants: menuVariants,
   defaultVariants: {
-    density: "compact"
+    density: "compact",
+    layer: "elevated"
   }
 });
 const textInputBase = {
@@ -7422,6 +7442,7 @@ const chipRecipe = defineSlotRecipe({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
+      justifyContent: "center",
       minW: "0",
       flexShrink: "0",
       bg: "transparent",
@@ -7870,7 +7891,7 @@ const modalVariants = {
 };
 const modalRecipe = defineSlotRecipe({
   className: "modal",
-  jsx: ["Modal", "ModalHeader", "ModalBody", "ModalFooter"],
+  jsx: ["ModalWrapper", "ModalHeader", "ModalBody", "ModalFooter", "Modal"],
   slots: [
     "positionWrapper",
     "overlay",
@@ -8365,7 +8386,13 @@ const autocompleteBase = {
   token: {
     minWidth: "0",
     maxWidth: "full",
-    flex: "0 1 auto"
+    flex: "0 1 auto",
+    _new: {
+      bg: "transparent",
+      outlineWidth: "1",
+      outlineStyle: "dashed",
+      outlineColor: "border.warning"
+    }
   },
   overflowIndicator: {
     display: "inline-flex",
@@ -8402,8 +8429,7 @@ const autocompleteBase = {
     bg: "surface",
     borderRadius: "4",
     boxShadow: "overlay",
-    outline: "none",
-    zIndex: "elevated"
+    outline: "none"
   },
   status: {
     display: "flex",
@@ -8421,6 +8447,18 @@ const autocompleteBase = {
   }
 };
 const autocompleteVariants = {
+  layer: {
+    elevated: {
+      listbox: {
+        zIndex: "elevated"
+      }
+    },
+    modalFloating: {
+      listbox: {
+        zIndex: "modalFloating"
+      }
+    }
+  },
   size: {
     sm: {
       root: {
@@ -8486,7 +8524,8 @@ const autocompleteRecipe = defineSlotRecipe({
   base: autocompleteBase,
   variants: autocompleteVariants,
   defaultVariants: {
-    size: "md"
+    size: "md",
+    layer: "elevated"
   }
 });
 const segmentedInputsBase = {
@@ -9172,6 +9211,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.green.70}", _dark: "{colors.green.20}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.green.5}", _dark: "{colors.green.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.green.10}", _dark: "{colors.green.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.green.20}", _dark: "{colors.green.90}" }
+        }
       }
     },
     warning: {
@@ -9194,6 +9244,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.orange.70}", _dark: "{colors.orange.50}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.orange.5}", _dark: "{colors.orange.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.orange.10}", _dark: "{colors.orange.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.orange.20}", _dark: "{colors.orange.90}" }
+        }
       }
     },
     danger: {
@@ -9212,6 +9273,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.red.60}", _dark: "{colors.red.50}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.red.5}", _dark: "{colors.red.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.red.10}", _dark: "{colors.red.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.red.20}", _dark: "{colors.red.90}" }
+        }
       }
     },
     info: {
@@ -9234,6 +9306,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.blue.70}", _dark: "{colors.blue.20}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.blue.5}", _dark: "{colors.blue.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.blue.10}", _dark: "{colors.blue.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.blue.20}", _dark: "{colors.blue.90}" }
+        }
       }
     },
     cta: {
@@ -10436,6 +10519,7 @@ const zIndex = defineSemanticTokens.zIndex({
   elevated: { value: "{zIndex.1000}" },
   overlay: { value: "{zIndex.1100}" },
   modal: { value: "{zIndex.1101}" },
+  modalFloating: { value: "{zIndex.1102}" },
   tooltip: { value: "{zIndex.1200}" }
 });
 const presetRecipes = Object.fromEntries(
@@ -10525,4 +10609,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-CZJA5UR0.js.map
+//# sourceMappingURL=cetec-preset-D23KFUx3.js.map