microui-wc 0.1.0

package/src/styles/animations.css

@@ -0,0 +1,252 @@
+/* ============================================
+   microUI Animation Utilities
+   
+   Usage: Add these classes for common animations
+   ============================================ */
+
+/* Fade animations */
+.mu-fade-in {
+    animation: mu-fade-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+    will-change: opacity;
+}
+
+.mu-fade-out {
+    animation: mu-fade-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+    will-change: opacity;
+}
+
+@keyframes mu-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes mu-fade-out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+/* Slide animations */
+.mu-slide-up {
+    animation: mu-slide-up var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+.mu-slide-down {
+    animation: mu-slide-down var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+.mu-slide-left {
+    animation: mu-slide-left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+.mu-slide-right {
+    animation: mu-slide-right var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+@keyframes mu-slide-up {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes mu-slide-down {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes mu-slide-left {
+    from {
+        transform: translateX(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes mu-slide-right {
+    from {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Scale animations */
+.mu-scale-in {
+    animation: mu-scale-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+.mu-scale-out {
+    animation: mu-scale-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+    will-change: transform, opacity;
+}
+
+@keyframes mu-scale-in {
+    from {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes mu-scale-out {
+    from {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+}
+
+/* Pulse animation */
+.mu-pulse {
+    animation: mu-pulse 2s infinite;
+    will-change: opacity;
+}
+
+@keyframes mu-pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Shake animation (for errors) */
+.mu-shake {
+    animation: mu-shake 0.4s var(--md-sys-motion-easing-emphasized);
+    will-change: transform;
+}
+
+@keyframes mu-shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    20%,
+    60% {
+        transform: translateX(-5px);
+    }
+
+    40%,
+    80% {
+        transform: translateX(5px);
+    }
+}
+
+/* Spin animation */
+.mu-spin {
+    animation: mu-spin 1s linear infinite;
+    will-change: transform;
+}
+
+@keyframes mu-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Bounce animation */
+.mu-bounce {
+    animation: mu-bounce 0.5s var(--md-sys-motion-easing-emphasized);
+    will-change: transform;
+}
+
+@keyframes mu-bounce {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+/* Transition utilities (GPU-accelerated only - transform, opacity, filter) */
+.mu-transition {
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
+        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
+        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+.mu-transition-slow {
+    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+}
+
+.mu-transition-fast {
+    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized),
+        opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized),
+        box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Hover utilities */
+.mu-hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--md-sys-elevation-2);
+    will-change: transform, box-shadow;
+}
+
+.mu-hover-glow:hover {
+    box-shadow: 0 0 20px var(--md-sys-color-primary);
+    will-change: box-shadow;
+}
+
+.mu-hover-scale:hover {
+    transform: scale(1.05);
+    will-change: transform;
+}

package/src/styles/common.css

@@ -0,0 +1,82 @@
+/**
+ * microUI Common Styles
+ * 
+ * Shared utilities and base styles loaded by all components.
+ * This file is automatically loaded when any microUI component is used.
+ */
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* ============================================================================
+   MD3 STATE LAYER UTILITIES (Reusable across components)
+   Reference: https://m3.material.io/foundations/interaction/states
+   
+   Usage: Add .mu-state-layer to any interactive element, then use one of:
+   - .mu-state-layer--surface (for outlined/text buttons, cards)
+   - .mu-state-layer--on-primary (for filled primary buttons)
+   - .mu-state-layer--on-secondary (for tonal buttons)
+   ============================================================================ */
+
+/* Base state layer setup - requires position:relative and overflow:hidden on parent */
+.mu-state-layer {
+    position: relative;
+    overflow: hidden;
+}
+
+.mu-state-layer::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Surface variant (default - for outlined, text, surface elements) */
+.mu-state-layer--surface::before,
+.mu-state-layer:not([class*="mu-state-layer--"])::before {
+    background: var(--md-sys-color-on-surface);
+}
+
+/* On-primary variant (for filled primary bg) */
+.mu-state-layer--on-primary::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+/* On-secondary variant (for tonal/secondary-container bg) */
+.mu-state-layer--on-secondary::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+/* On-error variant (for error buttons) */
+.mu-state-layer--on-error::before {
+    background: var(--md-sys-color-on-error);
+}
+
+/* State opacity changes */
+.mu-state-layer:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-state-layer:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-state-layer:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Disabled state - hide layer */
+.mu-state-layer:disabled::before,
+.mu-state-layer.is-disabled::before {
+    display: none;
+}

package/src/styles/components/animations.css

@@ -0,0 +1,129 @@
+/**
+ * microUI snackbar Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   ANIMATIONS - Material Design 3
+   ============================================================================ */
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-16px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* MD3 Ripple effect - CSS-only using :active */
+@keyframes ripple {
+    from {
+        transform: scale(0);
+        opacity: 0.4;
+    }
+
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+/* Apply ripple effect to buttons */
+.mu-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle, currentColor 10%, transparent 10.01%);
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform 0.3s, opacity 0.5s;
+}
+
+.mu-button:active::after {
+    transform: scale(0, 0);
+    opacity: 0.2;
+    transition: 0s;
+}
+

package/src/styles/components/avatar.css

@@ -0,0 +1,83 @@
+/**
+ * microUI avatar Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   THEME TOGGLE - Light/Dark Mode Switch
+   ============================================================================ */
+
+.mu-theme-toggle {
+    display: inline-flex;
+}
+
+.mu-theme-toggle__button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg,
+            var(--md-sys-color-primary-container) 0%,
+            var(--md-sys-color-secondary-container) 100%);
+    border: 2px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-full);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+
+.mu-theme-toggle__button:hover {
+    transform: scale(1.1);
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.2),
+        0 0 24px var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+}
+
+.mu-theme-toggle__button:active {
+    transform: scale(0.95);
+}
+
+.mu-theme-toggle__icon {
+    font-size: 22px;
+    transition: transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate);
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+.mu-theme-toggle__button:hover .mu-theme-toggle__icon {
+    transform: rotate(20deg) scale(1.1);
+}
+
+/* Dark mode specific glow */
+[data-theme="dark"] .mu-theme-toggle__button {
+    background: linear-gradient(135deg,
+            rgba(255, 200, 50, 0.15) 0%,
+            rgba(255, 150, 0, 0.1) 100%);
+    border-color: rgba(255, 200, 50, 0.3);
+}
+
+[data-theme="dark"] .mu-theme-toggle__button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.4),
+        0 0 32px rgba(255, 200, 50, 0.4);
+    border-color: rgba(255, 200, 50, 0.6);
+}
+
+/* Light mode specific glow */
+[data-theme="light"] .mu-theme-toggle__button {
+    background: linear-gradient(135deg,
+            rgba(100, 100, 200, 0.1) 0%,
+            rgba(50, 50, 150, 0.05) 100%);
+}
+
+[data-theme="light"] .mu-theme-toggle__button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.15),
+        0 0 24px rgba(100, 100, 200, 0.3);
+}
+

package/src/styles/components/badge.css

@@ -0,0 +1,80 @@
+/**
+ * microUI badge Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   BADGE - MD3 Badge
+   https://m3.material.io/components/badges
+   ============================================================================ */
+
+.mu-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-small-size);
+    font-weight: var(--md-sys-typescale-label-small-weight);
+    line-height: 1;
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+.mu-badge--sm {
+    min-width: 16px;
+    height: 16px;
+    font-size: 10px;
+}
+
+.mu-badge--md {
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+}
+
+.mu-badge--lg {
+    min-width: 24px;
+    height: 24px;
+    padding: 0 8px;
+    font-size: 13px;
+}
+
+.mu-badge--primary {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-badge--secondary {
+    background: var(--md-sys-color-secondary);
+    color: var(--md-sys-color-on-secondary);
+}
+
+.mu-badge--success {
+    background: #1B5E20;
+    color: white;
+}
+
+.mu-badge--warning {
+    background: #E65100;
+    color: white;
+}
+
+.mu-badge--error {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-badge--neutral {
+    background: var(--md-sys-color-surface-container-highest);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-badge--dot {
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+}
+

package/src/styles/components/bottom-nav.css

@@ -0,0 +1,37 @@
+/**
+ * microUI bottom-nav Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   BOTTOM NAV - MD3 Bottom Navigation Bar
+   https://m3.material.io/components/navigation-bar
+   ============================================================================ */
+
+mu-bottom-nav {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--mu-z-bottom-nav, 150);
+}
+
+.mu-bottom-nav-nav {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-around;
+    height: var(--mu-bottom-nav-height, 80px);
+    background: var(--md-sys-color-surface-container);
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    padding: 0 8px;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* Distribute items evenly */
+.mu-bottom-nav-nav>mu-nav-item,
+.mu-bottom-nav-nav>mu-drawer-item {
+    flex: 1;
+    max-width: 120px;
+}
+