@aziontech/theme 4.0.0 → 4.1.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;
@@ -979,6 +987,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;
@@ -979,6 +987,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.1.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {

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 }