@jsenv/navi 0.23.5 → 0.23.7

package/dist/jsenv_navi.js

@@ -6743,6 +6743,15 @@ const prepareStyleValue = (
   return mergedValue;
 };
 
+const negativeEntries = (map) => {
+  const result = {};
+  for (const key of Object.keys(map)) {
+    result[`-${key}`] = `calc(-1 * ${map[key]})`;
+  }
+  return result;
+};
+
+
 // Unified design scale using t-shirt sizes with rem units for accessibility.
 // This scale is used for spacing to create visual harmony
 // and consistent proportions throughout the design system.
@@ -6755,6 +6764,7 @@ const SIZE_MAP = {
   xl: "var(--navi-xl)",
   xxl: "var(--navi-xxl)",
 };
+Object.assign(SIZE_MAP, negativeEntries(SIZE_MAP));
 const TYPO_SIZE_MAP = {
   xxs: "var(--navi-typo-xxs)",
   xs: "var(--navi-typo-xs)",
@@ -6764,6 +6774,7 @@ const TYPO_SIZE_MAP = {
   xl: "var(--navi-typo-xl)",
   xxl: "var(--navi-typo-xxl)",
 };
+Object.assign(TYPO_SIZE_MAP, negativeEntries(TYPO_SIZE_MAP));
 const sizeSpacingScaleKeys = new Set(Object.keys(SIZE_MAP));
 const isSizeSpacingScaleKey = (key) => {
   return sizeSpacingScaleKeys.has(key);
@@ -22387,10 +22398,30 @@ const css$q = /* css */`
     --x-link-text-decoration-hover: var(--link-text-decoration-hover);
     --x-link-cursor: var(--link-cursor);
 
+    /* Resolve padding shorthands into directional vars */
+    --x-link-padding-top: var(
+      --link-padding-top,
+      var(--link-padding-y, var(--link-padding, 0px))
+    );
+    --x-link-padding-right: var(
+      --link-padding-right,
+      var(--link-padding-x, var(--link-padding, 0px))
+    );
+    --x-link-padding-bottom: var(
+      --link-padding-bottom,
+      var(--link-padding-y, var(--link-padding, 0px))
+    );
+    --x-link-padding-left: var(
+      --link-padding-left,
+      var(--link-padding-x, var(--link-padding, 0px))
+    );
+
     position: relative;
     aspect-ratio: inherit;
-    /* Ensure the spacing for the loading outline is part of the <a> so that it does not create an overflow */
-    padding: var(--link-loading-outline-size);
+    padding-top: calc(var(--x-link-padding-top) + var(--link-loading-outline-size));
+    padding-right: calc(var(--x-link-padding-right) + var(--link-loading-outline-size));
+    padding-bottom: calc(var(--x-link-padding-bottom) + var(--link-loading-outline-size));
+    padding-left: calc(var(--x-link-padding-left) + var(--link-loading-outline-size));
     color: var(--x-link-color);
     text-decoration: var(--x-link-text-decoration);
     background: var(--x-link-background);
@@ -22611,6 +22642,13 @@ const css$q = /* css */`
 const LinkStyleCSSVars = {
   "outlineColor": "--link-outline-color",
   "borderRadius": "--link-border-radius",
+  "padding": "--link-padding",
+  "paddingX": "--link-padding-x",
+  "paddingY": "--link-padding-y",
+  "paddingTop": "--link-padding-top",
+  "paddingRight": "--link-padding-right",
+  "paddingBottom": "--link-padding-bottom",
+  "paddingLeft": "--link-padding-left",
   "color": "--link-color",
   "cursor": "--link-cursor",
   "textDecoration": "--link-text-decoration",