@aziontech/theme 4.1.0 → 4.2.0

package/dist/v4/globals.css

@@ -669,6 +669,9 @@
   --spacing-sm: 0.75rem;
   --spacing-xs: 0.5rem;
   --spacing-xxs: 0.25rem;
+  --z-input-field: 1;
+  --z-input-popup: 10;
+  --z-input-overlay: 1100;
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;

package/dist/v4/globals.scss

@@ -669,6 +669,9 @@
   --spacing-sm: 0.75rem;
   --spacing-xs: 0.5rem;
   --spacing-xxs: 0.25rem;
+  --z-input-field: 1;
+  --z-input-popup: 10;
+  --z-input-overlay: 1100;
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {

package/src/scripts/build-tokens.mjs

@@ -34,6 +34,7 @@ import { compileThemeCss, compileThemeVars } from './compile-theme.js';
 import { containersData } from '../tokens/semantic/containers.data.js';
 import { spacingsData } from '../tokens/semantic/spacings.data.js';
 import { textsData } from '../tokens/semantic/texts.data.js';
+import { zIndicesData } from '../tokens/semantic/z-indices.data.js';
 
 const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
 
@@ -91,6 +92,7 @@ const buildFlatModel = () => ({
   primitives: flattenPrimitives(),
   containers: flattenSingleValue(containersData, (k) => `--container-${k}`),
   spacings: flattenSingleValue(spacingsData, (k) => `--${k}`),
+  zIndices: flattenSingleValue(zIndicesData, (k) => `--${k}`),
   texts: flattenBundle(textsData),
 });
 
@@ -295,6 +297,7 @@ const emitCssV4 = () => {
     ...rootPrimitiveVars,
     ...(m.containers._ || {}),
     ...(m.spacings._ || {}),
+    ...(m.zIndices._ || {}),
     ...(m.texts._ || {}),
   };
 
@@ -303,6 +306,7 @@ const emitCssV4 = () => {
     const merged = {
       ...(m.containers[bp] || {}),
       ...(m.spacings[bp] || {}),
+      ...(m.zIndices[bp] || {}),
       ...(m.texts[bp] || {}),
     };
     if (Object.keys(merged).length === 0) continue;

package/src/tokens/semantic/z-indices.data.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Declarative z-index tokens.
+ *
+ * Intra-input stacking:
+ *
+ *   - `z-input-field`   → native field / interactive foreground (e.g. an
+ *                          `<input>` or trigger button) sitting above the
+ *                          input's own background surface, icons, and
+ *                          adornments so keyboard/mouse focus is never
+ *                          hijacked by a decorative sibling.
+ *   - `z-input-popup`   → inline (non-teleported) overlays anchored to the
+ *                          input — dropdown menus, option lists, popovers —
+ *                          that must sit above surrounding form content but
+ *                          within the current stacking context.
+ *   - `z-input-overlay` → teleported overlays (rendered under `<body>` via
+ *                          `<Teleport>`) that must clear application chrome
+ *                          such as drawers, modals, and fixed headers.
+ *
+ * Values are intentionally small and well-spaced to make future additions
+ * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * introduce ad-hoc numeric z-index in input `.vue` files.
+ */
+export const zIndicesData: {
+    'z-input-field': {
+        _: string;
+    };
+    'z-input-popup': {
+        _: string;
+    };
+    'z-input-overlay': {
+        _: string;
+    };
+};
+declare namespace _default {
+    export { zIndicesData };
+}
+export default _default;
+//# sourceMappingURL=z-indices.data.d.ts.map

package/src/tokens/semantic/z-indices.data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-indices.data.d.ts","sourceRoot":"","sources":["z-indices.data.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;;;;;;;;;;EAIE"}

package/src/tokens/semantic/z-indices.data.js

@@ -0,0 +1,30 @@
+/**
+ * Declarative z-index tokens.
+ *
+ * Intra-input stacking:
+ *
+ *   - `z-input-field`   → native field / interactive foreground (e.g. an
+ *                          `<input>` or trigger button) sitting above the
+ *                          input's own background surface, icons, and
+ *                          adornments so keyboard/mouse focus is never
+ *                          hijacked by a decorative sibling.
+ *   - `z-input-popup`   → inline (non-teleported) overlays anchored to the
+ *                          input — dropdown menus, option lists, popovers —
+ *                          that must sit above surrounding form content but
+ *                          within the current stacking context.
+ *   - `z-input-overlay` → teleported overlays (rendered under `<body>` via
+ *                          `<Teleport>`) that must clear application chrome
+ *                          such as drawers, modals, and fixed headers.
+ *
+ * Values are intentionally small and well-spaced to make future additions
+ * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * introduce ad-hoc numeric z-index in input `.vue` files.
+ */
+
+export const zIndicesData = {
+  'z-input-field': { _: '1' },
+  'z-input-popup': { _: '10' },
+  'z-input-overlay': { _: '1100' },
+};
+
+export default { zIndicesData };