nk_jtb 0.19.1 → 0.21.0

package/.stylelintrc.json

@@ -11,6 +11,7 @@
         "scss/comment-no-empty": null,
         "order/properties-alphabetical-order": true,
         "scss/dollar-variable-colon-space-after": "always",
-        "scss/dollar-variable-empty-line-before": null
+        "scss/dollar-variable-empty-line-before": null,
+        "hue-degree-notation": null
     }
 }

package/_root.scss

@@ -0,0 +1,31 @@
+
+@use '../color-and-themes/themes' as *;
+@use '../maps_and_variables/property-and-value-maps' as *;
+@use 'sass:map';
+
+:root {
+    // create css variables
+    @each $color, $value in $color-map {
+        --#{$color}: #{$value};
+    }
+}
+
+// Mixin to generate CSS custom properties from a theme map
+@mixin theme-properties($theme-map) {
+    @each $property, $value in $theme-map {
+        --#{'' + $property}: #{$value};
+    }
+}
+
+:root,
+[data-theme='light'] {
+    @include theme-properties($light);
+}
+
+[data-theme='dark'] {
+    @include theme-properties($dark);
+}
+
+[data-theme='docs'] {
+    @include theme-properties($docs);
+}

package/_themes.scss

@@ -0,0 +1,165 @@
+@use 'colors' as c;
+@use 'sass:map';
+
+// prettier-ignore
+$light: (
+    // Brand Colors - Primary Semantic Colors
+    color-primary: oklch(62.3% 0.214 259.815), // blue-500
+    color-secondary: oklch(37.2% 0.044 257.287), // slate-700
+    color-accent: oklch(79.5% 0.184 86.047), // yellow-500
+
+    // Typography - Text Colors
+    text-base: oklch(20.8% 0.042 265.755), // slate-900
+    text-muted: oklch(55.4% 0.046 257.417), // slate-500
+    text-heading: oklch(20.8% 0.042 265.755), // slate-900
+    text-lead: oklch(44.6% 0.043 257.281), // slate-600
+
+    // Links
+    text-link: oklch(58.8% 0.158 241.966), // sky-600
+    text-link-hover: oklch(50% 0.134 242.749), // sky-700
+
+    // Code
+    // text-code: oklch(54.1% 0.281 293.009), // violet-600
+    // text-code-comment: oklch(55.4% 0.046 257.417), // slate-500
+
+    // Backgrounds - Surface Colors
+    bg-body: oklch(98.5% 0 0), // white
+    bg-surface: oklch(98.4% 0.003 247.858), // slate-50
+
+    // Interactive backgrounds
+    // bg-hover: oklch(92.9% 0.013 255.508), // slate-200
+    // bg-active: oklch(86.9% 0.022 252.894), // slate-300
+    // bg-selected: oklch(88.2% 0.059 254.128), // blue-200
+    // bg-focus: oklch(93.2% 0.032 255.585), // blue-100
+
+    // Overlays
+    // bg-overlay: oklch(20.8% 0.042 265.755 / 50%), // slate-900 at 50%
+    // bg-modal: oklch(98.5% 0 0), // white
+    // bg-tooltip: oklch(27.9% 0.041 260.031), // slate-800
+
+    // Code blocks
+    // bg-code: oklch(96.8% 0.007 247.896), // slate-100
+    // bg-code-block: oklch(98.4% 0.003 247.858), // slate-50
+
+    // Borders - Edge Colors
+    // border-default: oklch(92.9% 0.013 255.508), // slate-200
+    // border-strong: oklch(86.9% 0.022 252.894), // slate-300
+    // border-subtle: oklch(96.8% 0.007 247.896), // slate-100
+    // border-focus: oklch(62.3% 0.214 259.815), // blue-500
+    // border-error: oklch(63.7% 0.237 25.331), // red-500
+    // border-success: oklch(72.3% 0.219 149.579), // green-500
+    // border-warning: oklch(76.9% 0.188 70.08), // amber-500
+
+    // Component-specific
+    // border-input: oklch(86.9% 0.022 252.894), // slate-300
+    // border-input-hover: oklch(70.4% 0.04 256.788), // slate-400
+    // border-input-focus: oklch(62.3% 0.214 259.815), // blue-500
+
+    // Shadows - Elevation & Depth
+    // shadow-xs: 0 1px 2px 0 oklch(20.8% 0.042 265.755 / 5%),
+    // --shadow-sm: 0 1px 3px 0 oklch(20.8% 0.042 265.755 / 10%),
+        // 1px 2px -1px oklch(20.8% 0.042 265.755 / 10%),
+    // --shadow-md: 0 4px 6px -1px oklch(20.8% 0.042 265.755 / 10%),
+        // 2px 4px -2px oklch(20.8% 0.042 265.755 / 10%),
+    // --shadow-lg: 0 10px 15px -3px oklch(20.8% 0.042 265.755 / 10%),
+        // 4px 6px -4px oklch(20.8% 0.042 265.755 / 10%),
+    // --shadow-xl: 0 20px 25px -5px oklch(20.8% 0.042 265.755 / 10%),
+        // 8px 10px -6px oklch(20.8% 0.042 265.755 / 10%),
+    // shadow-2xl: 0 25px 50px -12px oklch(20.8% 0.042 265.755 / 25%),
+    // shadow-focus: 0 0 0 3px oklch(62.3% 0.214 259.815 / 20%), // blue-500 at 20%
+    // shadow-focus-danger: 0 0 0 3px oklch(63.7% 0.237 25.331 / 20%), // red-500 at 20%
+
+    // Effects - Opacity & Filters
+    // opacity-disabled: 0.5,
+    // opacity-hover: 0.8,
+    // opacity-loading: 0.6,
+
+    // Transitions - Animation Durations
+    // Note: These could be SASS variables, but keeping as CSS props allows
+    // runtime modification (e.g., for reduced motion preferences)
+    // transition-fast: 150ms,
+    // transition-base: 250ms,
+    // transition-slow: 350ms,
+    // transition-slower: 500ms,
+);
+
+// prettier-ignore
+$dark: (
+    // Brand Colors - Primary Semantic Colors
+    color-primary: oklch(70.7% 0.165 254.624), // blue-400
+    color-secondary: oklch(44.6% 0.043 257.281), // slate-600
+    color-accent: oklch(85.2% 0.199 91.936), // yellow-400
+
+    // Typography - Text Colors (Inverted)
+    text-base: oklch(96.8% 0.007 247.896), // slate-100
+    text-muted: oklch(55.4% 0.046 257.417), // slate-500
+    text-heading: oklch(98.4% 0.003 247.858), // slate-50
+    text-lead: oklch(70.4% 0.04 256.788), // slate-400
+
+    // Links
+    text-link: oklch(74.6% 0.16 232.661), // sky-400
+    text-link-hover: oklch(82.8% 0.111 230.318), // sky-300
+
+    // Code
+    // text-code: oklch(70.2% 0.183 293.541), // violet-400
+    // text-code-comment: oklch(55.4% 0.046 257.417), // slate-500
+
+    // Backgrounds - Surface Colors (Dark)
+    bg-body: oklch(20.8% 0.042 265.755), // slate-900
+    bg-surface: oklch(27.9% 0.041 260.031), // slate-800
+
+    // Interactive backgrounds
+    // bg-hover: oklch(37.2% 0.044 257.287), // slate-700
+    // bg-active: oklch(44.6% 0.043 257.281), // slate-600
+    // bg-selected: oklch(42.4% 0.199 265.638), // blue-800
+    // bg-focus: oklch(37.9% 0.146 265.522), // blue-900
+
+    // Overlays
+    // bg-overlay: oklch(20.8% 0.042 265.755 / 75%), // slate-900 at 75%
+    // bg-modal: oklch(27.9% 0.041 260.031), // slate-800
+    // bg-tooltip: oklch(37.2% 0.044 257.287), // slate-700
+
+    // Code blocks
+    // bg-code: oklch(27.9% 0.041 260.031), // slate-800
+    // bg-code-block: oklch(20.8% 0.042 265.755), // slate-900
+
+    // Borders - Edge Colors (Lighter in dark mode)
+    // border-default: oklch(37.2% 0.044 257.287), // slate-700
+    // border-strong: oklch(44.6% 0.043 257.281), // slate-600
+    // border-subtle: oklch(27.9% 0.041 260.031), // slate-800
+    // border-focus: oklch(70.7% 0.165 254.624), // blue-400
+    // border-error: oklch(70.4% 0.191 22.216), // red-400
+    // border-success: oklch(79.2% 0.209 151.711), // green-400
+    // border-warning: oklch(82.8% 0.189 84.429), // amber-400
+
+    // Component-specific
+    // border-input: oklch(44.6% 0.043 257.281), // slate-600
+    // border-input-hover: oklch(55.4% 0.046 257.417), // slate-500
+    // border-input-focus: oklch(70.7% 0.165 254.624), // blue-400
+);
+
+// prettier-ignore
+$docs: (
+    // Brand Colors - Primary Semantic Colors
+    color-primary: hsl(224 76% 40%),
+    color-secondary: hsl(215 25% 27%),
+    color-accent: hsl(217 91% 60%),
+    // accent-bg: hsl(211 51% 24%),
+    
+    // Typography Colors
+    text-base: hsl(214 32% 83%),      
+    text-muted: hsl(215 16% 47%),     // Menu titles, TOC titles, labels
+    text-secondary: hsl(215 20% 65%), // TOC links, less prominent text
+    text-heading: hsl(210 40% 96%),
+    
+    // Links
+    link-color: hsl(199 89% 61%),
+    link-color-hover: hsl(199 89% 58%),
+    
+    // Backgrounds
+    bg-body: hsl(222 47% 11%),
+    surface-bg: hsl(217 33% 17%),     // Sidebar, code blocks
+    
+    // Borders
+    border-color: hsl(215 25% 27%),   // Main borders
+);

package/dev.html

@@ -3,15 +3,217 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NayKel JTB</title>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <title>DEV</title>
+    <!-- order matters, make sure the plugin comes before alpine.js -->
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 
-<body class="zebra c-py-5-3-2">
-    <div id="app"></div>
+<body class="container py-5 bg-gray-200">
+    <div class="x">some text</div>
+    <section id="horizontal-menu-examples">
+        <h2>Horizontal Menu Examples</h2>
+        <p>All parents are identical except for the alpine.js triggers.</p>
+        <div class="menu-title">Utility Example</div>
+        <nav id="utility-example" class="bx pxy-1 bdr bdr-blue">
+            <ul class="flex gap-05 txt-sm">
+                <li>
+                    <a href="#" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <svg class="wh-1.25 bdr bdr-blue bg-stripes-blue"></svg>
+                        Item
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="bg-gray-200 flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700">
+                        <svg class="wh-1.25 bdr bdr-blue bg-stripes-blue"></svg>
+                        Active
+                    </a>
+                </li>
+                <!-- Click to toggle -->
+                <li class="relative" x-data="{ open: false }">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-blue bg-stripes-blue"></svg>
+                            Parent (Click)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse x-cloak class="absolute mt-05 flex w-10 z-100">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <!-- Click with click.away -->
+                <li class="relative" x-data="{ open: false }" x-on:click.away="open = false">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-blue bg-stripes-blue"></svg>
+                            Parent (Click Away)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse class="absolute mt-05 flex w-10 z-100" style="display: none;">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <!-- Hover to show -->
+                <li class="relative" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-blue bg-stripes-blue"></svg>
+                            Parent (Hover)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse x-cloak class="absolute mt-05 flex w-10 z-100">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+        <div class="menu-title">Menu Class Example</div>
+        <nav id="menu-class-example" class="menu bx pxy-1 bdr bdr-green">
+            <ul class="flex gap-05 txt-sm">
+                <li>
+                    <a href="#" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <svg class="wh-1.25 bdr bdr-green bg-stripes-green"></svg>
+                        Item
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="bg-gray-200 flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700">
+                        <svg class="wh-1.25 bdr bdr-green bg-stripes-green"></svg>
+                        Active
+                    </a>
+                </li>
+                <!-- Click to toggle -->
+                <li class="relative" x-data="{ open: false }">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-green bg-stripes-green"></svg>
+                            Parent (Click)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse x-cloak class="absolute mt-05 flex w-10 z-100">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <!-- Click with click.away -->
+                <li class="relative" x-data="{ open: false }" x-on:click.away="open = false">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-green bg-stripes-green"></svg>
+                            Parent (Click Away)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse class="absolute mt-05 flex w-10 z-100" style="display: none;">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <!-- Hover to show -->
+                <li class="relative" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false">
+                    <button x-on:click="open = ! open" class="flex items-center gap-075 px-075 py-05 rounded-lg txt-gray-700 hover:bg-gray-100">
+                        <span class="flex items-center gap-075">
+                            <svg class="wh-1.25 bdr bdr-green bg-stripes-green"></svg>
+                            Parent (Hover)
+                        </span>
+                        <svg class="wh-1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path x-show="open" d="m6 15 6-6 6 6" />
+                            <path x-show="!open" d="m6 9 6 6 6-6" />
+                        </svg>
+                    </button>
+                    <div x-show="open" x-collapse x-cloak class="absolute mt-05 flex w-10 z-100">
+                        <ul class="bx pxy-0 w-full flex-col gap-0">
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="flex items-center gap-075 px-075 py-05 txt-gray-700 hover:bg-gray-100">
+                                    Child Item
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+
+    </section>
     <script type="module" src="/main.js"></script>
 </body>
 

package/dev1.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <title>DEV 1</title>
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <style>
+        /* Transform Transitions */
+        .scale-box {
+            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
+            transition: transform 0.3s ease;
+        }
+
+        .scale-box:hover {
+            transform: scale(1.2);
+        }
+
+        .rotate-box {
+            background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
+            transition: transform 0.5s ease;
+        }
+
+        .rotate-box:hover {
+            transform: rotate(180deg);
+        }
+
+        .translate-box {
+            background: linear-gradient(45deg, #fa709a 0%, #fee140 100%);
+            transition: transform 0.4s ease;
+        }
+
+        .translate-box:hover {
+            transform: translateY(-20px);
+        }
+
+        /* Opacity Transition */
+        .fade-box {
+            background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
+            color: #333;
+            transition: opacity 0.5s ease;
+        }
+
+        .fade-box:hover {
+            opacity: 0.3;
+        }
+
+        /* Multiple Properties */
+        .multi-box {
+            background: linear-gradient(45deg, #ffecd2 0%, #fcb69f 100%);
+            box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
+            color: #333;
+            transition: all 0.4s ease;
+        }
+
+        .multi-box:hover {
+            background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
+            box-shadow: 0 15px 35px rgb(0 0 0 / 30%);
+            transform: scale(1.1) rotate(5deg);
+        }
+
+        /* Timing Functions Demo */
+        .timing-demo {
+            flex-direction: column;
+            gap: 15px;
+            width: 100%;
+        }
+
+        .timing-row {
+            gap: 15px;
+        }
+
+        .timing-label {
+            color: #333;
+        }
+
+        .timing-bar {
+            background: #3498db;
+            border-radius: 5px;
+            flex: 1;
+            height: 50px;
+            transition-duration: 2s;
+            transition-property: transform;
+        }
+
+        .timing-bar.linear {
+            transition-timing-function: linear;
+        }
+
+        .timing-bar.ease {
+            transition-timing-function: ease;
+        }
+
+        .timing-bar.ease-in {
+            transition-timing-function: ease-in;
+        }
+
+        .timing-bar.ease-out {
+            transition-timing-function: ease-out;
+        }
+
+        .timing-bar.ease-in-out {
+            transition-timing-function: ease-in-out;
+        }
+
+        .timing-bar.active {
+            transform: translateX(200px);
+        }
+
+        .reset-btn {
+            background: #667eea;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            margin-block-start: 15px;
+            padding: 12px 30px;
+            transition: all 0.3s ease;
+        }
+
+        .reset-btn:hover {
+            background: #764ba2;
+            box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+
+<body class="pxy">
+
+    <!-- The key thing to remember is that transitions need two states (like
+    normal and :hover) and a transition property that tells the browser how to
+    animate between them. -->
+
+    <div class="container-md">
+        <h1>CSS Transitions Interactive Demo</h1>
+        <div class="bx">
+            <h2>1. Color Transition</h2>
+            <p>Hover over the box to see the color change smoothly. Uses: <code>transition: background-color 0.5s ease;</code></p>
+            <div class="bx light flex-centered gap">
+                <div class="transition wh-8 rounded-1 flex-centered txt-white blue hover:bg-red">Hover Me!</div>
+            </div>
+        </div>
+
+        <div class="bx">
+            <h2>2. Transform Transitions</h2>
+            <p>Hover over each box to see different transform effects:</p>
+            <div class="bx light flex-centered gap">
+                <div class="wh-8 rounded-1 flex-centered txt-white scale-box">Scale</div>
+                <div class="wh-8 rounded-1 flex-centered txt-white rotate-box">Rotate</div>
+                <div class="wh-8 rounded-1 flex-centered txt-white translate-box">Translate</div>
+            </div>
+        </div>
+
+        <div class="bx">
+            <h2>3. Opacity Transition</h2>
+            <p>Hover to fade. Uses: <code>transition: opacity 0.5s ease;</code></p>
+            <div class="bx light flex-centered gap">
+                <div class="wh-8 rounded-1 flex-centered txt-white fade-box">Fade Me!</div>
+            </div>
+        </div>
+
+        <div class="bx">
+            <h2>4. Multiple Properties</h2>
+            <p>This box transitions multiple properties at once: color, transform, and shadow. Uses: <code>transition: all 0.4s ease;</code></p>
+            <div class="bx light flex-centered gap">
+                <div class="multi-box">All Together!</div>
+            </div>
+        </div>
+
+        <div class="bx">
+            <h2>5. Timing Functions</h2>
+            <p>Click the button to see how different timing functions affect animation speed. All take 2 seconds but move differently:</p>
+            <div class="bx light flex-centered gap">
+                <div class="timing-demo">
+                    <div class="timing-row">
+                        <div class="timing-label">linear</div>
+                        <div class="timing-bar linear"></div>
+                    </div>
+                    <div class="timing-row">
+                        <div class="timing-label">ease</div>
+                        <div class="timing-bar ease"></div>
+                    </div>
+                    <div class="timing-row">
+                        <div class="timing-label">ease-in</div>
+                        <div class="timing-bar ease-in"></div>
+                    </div>
+                    <div class="timing-row">
+                        <div class="timing-label">ease-out</div>
+                        <div class="timing-bar ease-out"></div>
+                    </div>
+                    <div class="timing-row">
+                        <div class="timing-label">ease-in-out</div>
+                        <div class="timing-bar ease-in-out"></div>
+                    </div>
+                    <button class="reset-btn" onclick="animateBars()">Animate Bars</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function animateBars() {
+            const bars = document.querySelectorAll('.timing-bar');
+            bars.forEach(bar => bar.classList.remove('active'));
+
+            setTimeout(() => {
+                bars.forEach(bar => bar.classList.add('active'));
+            }, 50);
+
+            setTimeout(() => {
+                bars.forEach(bar => bar.classList.remove('active'));
+            }, 2500);
+        }
+    </script>
+    <script type="module" src="/main.js"></script>
+</body>
+
+</html>

package/dev2.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <title>DEV 2</title>
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+
+<body class="pxy">
+
+    <script type="module" src="/main.js"></script>
+</body>
+
+</html>