accessible-kit 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.3] - 2025-12-20
+
+### Fixed
+- **CSS Architecture**: Fixed inconsistent placement of animations in Offcanvas and Modal components
+- Moved `transition` properties from `theme.css` to `core.css` for Offcanvas component
+- Moved `transition` properties from `theme.css` to `core.css` for Modal component
+- Animations now work out-of-the-box even when using custom themes without importing `theme.css`
+
+### Changed
+- Updated `package.json` exports to include `style` condition for better CSS import compatibility
+- Improved CSS imports documentation for Tailwind CSS and other bundlers
+
+### Details
+All components now follow consistent CSS architecture:
+- **Core CSS** (`*.core.css`): Contains layout, positioning, behavior, and **animations**
+- **Theme CSS** (`*.theme.css`): Contains only visual styling (colors, spacing, borders, shadows)
+
+This ensures animations work correctly even when developers create custom themes.
+
+## [1.0.2] - 2025-12-20
+
+### Changed
+- Minor version bump for package.json exports improvements
+
 ## [1.0.1] - 2025-12-20
 
 ### Changed
@@ -65,5 +89,7 @@ document.addEventListener('DOMContentLoaded', () => {
 - Zero dependencies
 - Full TypeScript-ready exports
 
+[1.0.3]: https://github.com/5ulo/accessible-kit/compare/v1.0.2...v1.0.3
+[1.0.2]: https://github.com/5ulo/accessible-kit/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/5ulo/accessible-kit/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/5ulo/accessible-kit/releases/tag/v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-kit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Lightweight, accessible UI component library with full ARIA support. Zero dependencies, vanilla JavaScript.",
   "main": "src/js/index.js",
   "type": "module",
@@ -61,16 +61,46 @@
     "./accordion": {
       "import": "./src/js/a11y-accordion.js"
     },
-    "./styles/dropdown-core": "./src/css/a11y-dropdown.core.css",
-    "./styles/dropdown-theme": "./src/css/a11y-dropdown.theme.css",
-    "./styles/tabs-core": "./src/css/a11y-tabs.core.css",
-    "./styles/tabs-theme": "./src/css/a11y-tabs.theme.css",
-    "./styles/offcanvas-core": "./src/css/a11y-offcanvas.core.css",
-    "./styles/offcanvas-theme": "./src/css/a11y-offcanvas.theme.css",
-    "./styles/modal-core": "./src/css/a11y-modal.core.css",
-    "./styles/modal-theme": "./src/css/a11y-modal.theme.css",
-    "./styles/accordion-core": "./src/css/a11y-accordion.core.css",
-    "./styles/accordion-theme": "./src/css/a11y-accordion.theme.css"
+    "./styles/dropdown-core": {
+      "style": "./src/css/a11y-dropdown.core.css",
+      "default": "./src/css/a11y-dropdown.core.css"
+    },
+    "./styles/dropdown-theme": {
+      "style": "./src/css/a11y-dropdown.theme.css",
+      "default": "./src/css/a11y-dropdown.theme.css"
+    },
+    "./styles/tabs-core": {
+      "style": "./src/css/a11y-tabs.core.css",
+      "default": "./src/css/a11y-tabs.core.css"
+    },
+    "./styles/tabs-theme": {
+      "style": "./src/css/a11y-tabs.theme.css",
+      "default": "./src/css/a11y-tabs.theme.css"
+    },
+    "./styles/offcanvas-core": {
+      "style": "./src/css/a11y-offcanvas.core.css",
+      "default": "./src/css/a11y-offcanvas.core.css"
+    },
+    "./styles/offcanvas-theme": {
+      "style": "./src/css/a11y-offcanvas.theme.css",
+      "default": "./src/css/a11y-offcanvas.theme.css"
+    },
+    "./styles/modal-core": {
+      "style": "./src/css/a11y-modal.core.css",
+      "default": "./src/css/a11y-modal.core.css"
+    },
+    "./styles/modal-theme": {
+      "style": "./src/css/a11y-modal.theme.css",
+      "default": "./src/css/a11y-modal.theme.css"
+    },
+    "./styles/accordion-core": {
+      "style": "./src/css/a11y-accordion.core.css",
+      "default": "./src/css/a11y-accordion.core.css"
+    },
+    "./styles/accordion-theme": {
+      "style": "./src/css/a11y-accordion.theme.css",
+      "default": "./src/css/a11y-accordion.theme.css"
+    }
   },
   "files": [
     "src/js",

package/src/css/a11y-modal.core.css

@@ -15,6 +15,8 @@
     justify-content: center;
     visibility: hidden;
     opacity: 0;
+    transition: opacity var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease),
+                visibility var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 [data-modal][aria-hidden="false"] {
@@ -31,6 +33,7 @@
     max-width: 90vw;
     overflow: hidden;
     transform: scale(0.95);
+    transition: transform var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 [data-modal][aria-hidden="false"] [data-modal-dialog] {

package/src/css/a11y-modal.theme.css

@@ -5,8 +5,6 @@
 /* Modal wrapper */
 [data-modal] {
     padding: 1rem;
-    transition: opacity var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease),
-                visibility var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 /* Modal dialog */
@@ -16,7 +14,6 @@
     border-radius: 0.5rem;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
         0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    transition: transform var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 /* Modal header */
@@ -208,10 +205,8 @@
     }
 }
 
-/* Reduced motion support */
+/* Reduced motion support for theme transitions */
 @media (prefers-reduced-motion: reduce) {
-    [data-modal],
-    [data-modal-dialog],
     [data-modal-close] {
         transition: none !important;
     }

package/src/css/a11y-offcanvas.core.css

@@ -9,6 +9,8 @@
     visibility: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    transition: transform var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
+                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 [data-offcanvas-panel][aria-hidden="false"] {
@@ -96,6 +98,8 @@
     z-index: 999;
     visibility: hidden;
     opacity: 0;
+    transition: opacity var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
+                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 [data-offcanvas-backdrop][aria-hidden="false"] {

package/src/css/a11y-offcanvas.theme.css

@@ -8,8 +8,6 @@
     max-width: 100%;
     background: #fff;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-    transition: transform var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
-                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
     display: flex;
     flex-direction: column;
 }
@@ -80,8 +78,6 @@
 /* Backdrop */
 [data-offcanvas-backdrop] {
     background: rgba(0, 0, 0, 0.5);
-    transition: opacity var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
-                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 /* Wide variant */
@@ -160,10 +156,8 @@
     }
 }
 
-/* Reduced motion support */
+/* Reduced motion support for theme transitions */
 @media (prefers-reduced-motion: reduce) {
-    [data-offcanvas-panel],
-    [data-offcanvas-backdrop],
     [data-offcanvas-close] {
         transition: none !important;
     }

package/src/js/index.js

@@ -2,7 +2,7 @@
  * a11y-kit
  * Lightweight, accessible UI component library with full ARIA support
  *
- * @version 1.0.1
+ * @version 1.0.3
  * @license MIT
  */