@aziontech/theme 4.0.0 → 4.2.0

package/dist/v4/globals.css

@@ -407,6 +407,10 @@
   --animate-highlight-fade: highlight ease-in forwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
 }
@@ -648,6 +652,10 @@
   --animate-highlight-fade: highlight ease-in forwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --ring-offset: 0.5px;
@@ -661,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;
@@ -979,6 +990,26 @@
   100% { opacity: 0; transform: scale(0.95); }
 }
 
+@keyframes slideInLeft {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slideOutLeft {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes slideInRight {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slideOutRight {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(100%); }
+}
+
 @keyframes progressIndeterminate {
   0% { inset-inline-start: -35%; inset-inline-end: 100%; }
   60% { inset-inline-start: 100%; inset-inline-end: -90%; }

package/dist/v4/globals.scss

@@ -407,6 +407,10 @@
   --animate-highlight-fade: highlight ease-in forwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
 }
@@ -648,6 +652,10 @@
   --animate-highlight-fade: highlight ease-in forwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-left: slideOutLeft 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --animate-slide-in-right: slideInRight 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --ring-offset: 0.5px;
@@ -661,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;
@@ -979,6 +990,26 @@
   100% { opacity: 0; transform: scale(0.95); }
 }
 
+@keyframes slideInLeft {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slideOutLeft {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes slideInRight {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes slideOutRight {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(100%); }
+}
+
 @keyframes progressIndeterminate {
   0% { inset-inline-start: -35%; inset-inline-end: 100%; }
   60% { inset-inline-start: 100%; inset-inline-end: -90%; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "4.0.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/primitives/animations/animate.d.ts

@@ -27,6 +27,30 @@ export const animate: {
     'highlight-fade': string;
     'popup-scale-in': string;
     'popup-scale-out': string;
+    'slide-in-left': string;
+    'slide-out-left': string;
+    'slide-in-right': string;
+    'slide-out-right': string;
+    'progress-indeterminate': string;
+    'progress-indeterminate-short': string;
+};
+export const useWhen: {
+    spin: string;
+    ping: string;
+    pulse: string;
+    bounce: string;
+    shimmer: string;
+    blink: string;
+    'fade-in': string;
+    'fade-out': string;
+    'slide-down': string;
+    'highlight-fade': string;
+    'popup-scale-in': string;
+    'popup-scale-out': string;
+    'slide-in-left': string;
+    'slide-out-left': string;
+    'slide-in-right': string;
+    'slide-out-right': string;
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
 };
@@ -34,6 +58,7 @@ declare namespace _default {
     export { animate };
     export { curve };
     export { duration };
+    export { useWhen };
 }
 export default _default;
 //# sourceMappingURL=animate.d.ts.map

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;EAeC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;EAmBC;AAED;;;;;;;;;;;;;;;;;;;EAsBC"}

package/src/tokens/primitives/animations/animate.js

@@ -29,8 +29,36 @@ export const animate = {
   'highlight-fade': 'highlight ease-in forwards',
   'popup-scale-in': `popupScaleIn ${duration['moderate-01']} ${curve['productive-entrance']}`,
   'popup-scale-out': `popupScaleOut ${duration['fast-02']} ${curve['productive-exit']}`,
+  'slide-in-left': `slideInLeft ${duration['moderate-02']} ${curve['productive-entrance']}`,
+  'slide-out-left': `slideOutLeft ${duration['moderate-01']} ${curve['productive-exit']}`,
+  'slide-in-right': `slideInRight ${duration['moderate-02']} ${curve['productive-entrance']}`,
+  'slide-out-right': `slideOutRight ${duration['moderate-01']} ${curve['productive-exit']}`,
   'progress-indeterminate': `progressIndeterminate ${duration['slow-04']} ${curve['productive-entrance']} infinite`,
   'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`
 }
 
-export default { animate, curve, duration }
+export const useWhen = {
+  spin: 'Indeterminate circular spinners (loading icons).',
+  ping: 'One-off attention ring radiating from a small element (notification dot).',
+  pulse: 'Skeleton/placeholder opacity pulse while content loads.',
+  bounce: 'Playful attention bounce (scroll-down hints); use sparingly.',
+  shimmer: 'Skeleton shimmer sweep while content loads.',
+  blink: 'Text caret / terminal cursor blink.',
+  'fade-in': 'Content or backdrop appearing in place (no directional origin).',
+  'fade-out': 'Content or backdrop leaving in place (pair of fade-in).',
+  'slide-down': 'Vertical disclosure expanding (accordion panel, expandable row).',
+  'highlight-fade': 'Row/item briefly highlighted after an update (recently changed).',
+  'popup-scale-in':
+    'Anchored overlays opening (dropdown, popover, tooltip, menu); set --popup-origin.',
+  'popup-scale-out': 'Anchored overlays closing (pair of popup-scale-in).',
+  'slide-in-left':
+    'Left-anchored panel entering (sidebar, navigation drawer). Wrap the v-if region in a Vue Transition with enter-active-class.',
+  'slide-out-left':
+    'Left-anchored panel leaving (pair of slide-in-left; use as leave-active-class).',
+  'slide-in-right': 'Right-anchored panel entering (settings/detail drawer).',
+  'slide-out-right': 'Right-anchored panel leaving (pair of slide-in-right).',
+  'progress-indeterminate': 'Indeterminate linear progress bar (primary sweep).',
+  'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).'
+}
+
+export default { animate, curve, duration, useWhen }

package/src/tokens/primitives/animations/keyframes.d.ts

@@ -31,6 +31,22 @@ export namespace keyframes {
         '0%': string;
         '100%': string;
     };
+    let slideInLeft: {
+        '0%': string;
+        '100%': string;
+    };
+    let slideOutLeft: {
+        '0%': string;
+        '100%': string;
+    };
+    let slideInRight: {
+        '0%': string;
+        '100%': string;
+    };
+    let slideOutRight: {
+        '0%': string;
+        '100%': string;
+    };
     let progressIndeterminate: {
         '0%': string;
         '60%': string;

package/src/tokens/primitives/animations/keyframes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA;;;;GAIG;AACH;;;;;;;EAGE"}
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;;;;GAIG;AACH;;;;;;;EAGC"}

package/src/tokens/primitives/animations/keyframes.js

@@ -14,47 +14,63 @@
 export const keyframes = {
   fadeIn: {
     '0%': 'opacity: 0',
-    '100%': 'opacity: 1',
+    '100%': 'opacity: 1'
   },
   fadeOut: {
     '0%': 'opacity: 1',
-    '100%': 'opacity: 0',
+    '100%': 'opacity: 0'
   },
   slideDown: {
     '0%': 'height: 0',
-    '100%': 'height: auto',
+    '100%': 'height: auto'
   },
   blink: {
     '0%, 100%': 'opacity: 1',
-    '50%': 'opacity: 0',
+    '50%': 'opacity: 0'
   },
   highlight: {
     '0%': 'background-color: var(--surface-hover); font-weight: 500',
-    '100%': 'background-color: var(--surface-hover); font-weight: 500',
+    '100%': 'background-color: var(--surface-hover); font-weight: 500'
   },
   shimmer: {
     '0%': 'background-position: 200% 0',
-    '100%': 'background-position: -200% 0',
+    '100%': 'background-position: -200% 0'
   },
   popupScaleIn: {
     '0%': 'opacity: 0; transform: scale(0.95)',
-    '100%': 'opacity: 1; transform: scale(1)',
+    '100%': 'opacity: 1; transform: scale(1)'
   },
   popupScaleOut: {
     '0%': 'opacity: 1; transform: scale(1)',
-    '100%': 'opacity: 0; transform: scale(0.95)',
+    '100%': 'opacity: 0; transform: scale(0.95)'
+  },
+  slideInLeft: {
+    '0%': 'transform: translateX(-100%)',
+    '100%': 'transform: translateX(0)'
+  },
+  slideOutLeft: {
+    '0%': 'transform: translateX(0)',
+    '100%': 'transform: translateX(-100%)'
+  },
+  slideInRight: {
+    '0%': 'transform: translateX(100%)',
+    '100%': 'transform: translateX(0)'
+  },
+  slideOutRight: {
+    '0%': 'transform: translateX(0)',
+    '100%': 'transform: translateX(100%)'
   },
   progressIndeterminate: {
     '0%': 'inset-inline-start: -35%; inset-inline-end: 100%',
     '60%': 'inset-inline-start: 100%; inset-inline-end: -90%',
-    '100%': 'inset-inline-start: 100%; inset-inline-end: -90%',
+    '100%': 'inset-inline-start: 100%; inset-inline-end: -90%'
   },
   progressIndeterminateShort: {
     '0%': 'inset-inline-start: -200%; inset-inline-end: 100%',
     '60%': 'inset-inline-start: 107%; inset-inline-end: -8%',
-    '100%': 'inset-inline-start: 107%; inset-inline-end: -8%',
-  },
-};
+    '100%': 'inset-inline-start: 107%; inset-inline-end: -8%'
+  }
+}
 
 /**
  * Utilities that need CSS properties beyond the `animation` shorthand
@@ -63,7 +79,7 @@ export const keyframes = {
  */
 export const animateExtras = {
   'animate-popup-scale-in': { 'transform-origin': 'var(--popup-origin, center)' },
-  'animate-popup-scale-out': { 'transform-origin': 'var(--popup-origin, center)' },
-};
+  'animate-popup-scale-out': { 'transform-origin': 'var(--popup-origin, center)' }
+}
 
-export default { keyframes, animateExtras };
+export default { keyframes, animateExtras }

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 };