microui-wc 0.1.0

package/src/styles/components/button.css

@@ -0,0 +1,348 @@
+/**
+ * microUI button Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   BUTTON - MD3 Common Button
+   https://m3.material.io/components/buttons
+   ============================================================================ */
+
+.mu-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 48px;
+    height: 40px;
+    padding: 0 24px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-large-size);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: 0.1px;
+    text-decoration: none;
+    white-space: nowrap;
+    /* Prevent text wrapping */
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full);
+    cursor: pointer;
+    overflow: hidden;
+    /* Note: hover shadow uses ::before opacity (GPU-composited), not box-shadow transition */
+}
+
+/* State layer overlay */
+.mu-button::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);
+}
+
+/* Sizes */
+.mu-button--sm {
+    height: 32px;
+    padding: 0 16px;
+    font-size: var(--md-sys-typescale-label-medium-size);
+}
+
+.mu-button--md {
+    height: 40px;
+    padding: 0 24px;
+}
+
+.mu-button--lg {
+    height: 48px;
+    padding: 0 32px;
+    font-size: var(--md-sys-typescale-body-large-size);
+}
+
+/* FILLED Button (Primary action) */
+.mu-button--primary {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.mu-button--primary::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+.mu-button--primary:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--primary:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--primary:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-button--primary:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* TONAL Button (Secondary action) */
+.mu-button--secondary {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--secondary::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--secondary:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--secondary:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--secondary:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-button--secondary:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* OUTLINED Button */
+.mu-button--ghost {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    border: 1px solid var(--md-sys-color-outline);
+}
+
+.mu-button--ghost::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--ghost:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--ghost:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+/* ERROR/Danger Button */
+.mu-button--danger {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-button--danger::before {
+    background: var(--md-sys-color-on-error);
+}
+
+.mu-button--danger:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--danger:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* Disabled State */
+.mu-button:disabled,
+.mu-button.is-disabled {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.mu-button:disabled::before,
+.mu-button.is-disabled::before {
+    display: none;
+}
+
+/* ==========================================================================
+   MD3 OFFICIAL BUTTON VARIANTS
+   https://m3.material.io/components/buttons/overview
+   ========================================================================== */
+
+/* ELEVATED Button - Surface with shadow */
+.mu-button--elevated {
+    background: var(--md-sys-color-surface-container-low);
+    color: var(--md-sys-color-primary);
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--elevated::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--elevated:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--elevated:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level2);
+}
+
+.mu-button--elevated:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--elevated:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* FILLED Button - Same as primary */
+.mu-button--filled {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.mu-button--filled::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+.mu-button--filled:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--filled:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--filled:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--filled:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* TONAL Button - Secondary container */
+.mu-button--tonal {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--tonal::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--tonal:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--tonal:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--tonal:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--tonal:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* OUTLINED Button - Border only */
+.mu-button--outlined {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    border: 1px solid var(--md-sys-color-outline);
+}
+
+.mu-button--outlined::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--outlined:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--outlined:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--outlined:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* TEXT Button - Minimal, no container */
+.mu-button--text {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    padding: 0 12px;
+}
+
+.mu-button--text::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--text:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--text:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--text:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* MD3 Ripple Effect Animation */
+@keyframes md-ripple {
+    from {
+        transform: scale(0);
+        opacity: 0.12;
+    }
+
+    to {
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}
+
+/* Universal Ripple Animation (used by ripple.js) */
+@keyframes mu-ripple-expand {
+    from {
+        transform: scale(0);
+        opacity: 0.20;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.mu-button.ripple::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: currentColor;
+    transform: scale(0);
+    animation: md-ripple var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Loading State */
+.mu-button.is-loading {
+    color: transparent;
+}
+
+.mu-button.is-loading::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+}

package/src/styles/components/card.css

@@ -0,0 +1,138 @@
+/**
+ * microUI card Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   CARD - MD3 Card Container
+   https://m3.material.io/components/cards
+   ============================================================================ */
+
+.mu-card {
+    display: block;
+    border-radius: var(--md-sys-shape-corner-medium);
+    overflow: hidden;
+    padding: 20px;
+    /* MD3: 20dp default padding */
+}
+
+/* Filled Card (default) - Surface container highest */
+.mu-card--flat,
+.mu-card--filled {
+    background: var(--md-sys-color-surface-container-highest);
+    box-shadow: none;
+}
+
+/* Elevated Card - Surface with Level1 elevation */
+.mu-card--elevated {
+    background: var(--md-sys-color-surface-container-low);
+    box-shadow: var(--md-sys-elevation-level1);
+    /* GPU-composited hover: use transform instead of box-shadow transition */
+    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* GPU-composited hover effect - subtle lift instead of shadow change */
+.mu-card--elevated:hover {
+    transform: translateY(-2px);
+}
+
+/* Outlined Card - Surface with border */
+.mu-card--outlined {
+    background: var(--md-sys-color-surface);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    box-shadow: none;
+}
+
+/* Card Padding Variants - MD3 standard: 16-24dp depending on content */
+.mu-card--padding-none {
+    padding: 0;
+}
+
+.mu-card--padding-sm {
+    padding: 12px;
+}
+
+.mu-card--padding-md {
+    padding: 20px;
+    /* MD3: 20dp for comfortable content spacing */
+}
+
+.mu-card--padding-lg {
+    padding: 28px;
+    /* MD3: 28dp for prominent cards */
+}
+
+/* Card Radius Variants */
+.mu-card--radius-none {
+    border-radius: 0;
+}
+
+.mu-card--radius-sm {
+    border-radius: var(--md-sys-shape-corner-small);
+}
+
+.mu-card--radius-md {
+    border-radius: var(--md-sys-shape-corner-medium);
+}
+
+.mu-card--radius-lg {
+    border-radius: var(--md-sys-shape-corner-large);
+}
+
+.mu-card--radius-full {
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+/* Clickable Card with state layer */
+.mu-card--clickable {
+    cursor: pointer;
+    position: relative;
+    /* Note: hover effect uses ::before opacity (GPU-composited), not box-shadow transition */
+}
+
+.mu-card--clickable::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2);
+    pointer-events: none;
+}
+
+.mu-card--clickable:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-card--clickable:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Card internal elements (optional) */
+.mu-card__header {
+    padding: 16px;
+    padding-bottom: 0;
+}
+
+.mu-card__body {
+    padding: 16px;
+}
+
+.mu-card__footer {
+    padding: 16px;
+    padding-top: 0;
+}
+
+/* Card typography */
+.mu-card h3 {
+    margin: 0 0 8px;
+    font-size: var(--md-sys-typescale-title-medium-size);
+    font-weight: var(--md-sys-typescale-title-medium-weight);
+}
+
+.mu-card p {
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-sys-typescale-body-medium-size);
+}

package/src/styles/components/checkbox.css

@@ -0,0 +1,201 @@
+/**
+ * microUI checkbox Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   DROPDOWN - MD3 Exposed Dropdown Menu (Select)
+   https://m3.material.io/components/menus
+   ============================================================================ */
+
+.mu-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* MD3 Trigger - styled like an outlined text field */
+.mu-dropdown__trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 200px;
+    height: 56px;
+    /* MD3 standard text field height */
+    padding: 0 16px;
+    background: var(--md-sys-color-surface);
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    /* 4dp */
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for hover/pressed - MD3 spec */
+.mu-dropdown__trigger::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+    border-radius: inherit;
+}
+
+.mu-dropdown__trigger:hover::before {
+    opacity: var(--md-sys-state-hover-opacity, 0.08);
+}
+
+.mu-dropdown__trigger:active::before {
+    opacity: var(--md-sys-state-pressed-opacity, 0.12);
+}
+
+/* Focus state - MD3 uses primary color border */
+.mu-dropdown__trigger:focus-visible {
+    outline: none;
+    border-color: var(--md-sys-color-primary);
+    border-width: 2px;
+}
+
+/* Disabled state - MD3 38% opacity */
+.mu-dropdown__trigger:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+    background: var(--md-sys-color-surface-container);
+}
+
+.mu-dropdown__trigger:disabled::before {
+    display: none;
+}
+
+/* Arrow icon - rotates 180° when open */
+.mu-dropdown__arrow {
+    flex-shrink: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+.mu-dropdown.is-open .mu-dropdown__arrow {
+    transform: rotate(180deg);
+}
+
+/* Open state - primary border */
+.mu-dropdown.is-open .mu-dropdown__trigger {
+    border-color: var(--md-sys-color-primary);
+    border-width: 2px;
+}
+
+/* MD3 Menu container - now uses Popover API for top-layer */
+.mu-dropdown__menu {
+    position: fixed;
+    min-width: 160px;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 8px 0;
+    margin: 0;
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    /* 4dp */
+    box-shadow: var(--md-sys-elevation-level2);
+    list-style: none;
+
+    /* Reset popover UA styles */
+    border: none;
+    inset: unset;
+    /* Let JS position it */
+
+    /* Hidden by default - MD3 enter animation */
+    opacity: 0;
+    visibility: hidden;
+    transform: scaleY(0.92) translateY(-8px);
+    transform-origin: top center;
+    transition:
+        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
+        visibility var(--md-sys-motion-duration-short4),
+        transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
+    pointer-events: none;
+}
+
+/* Popover API: :popover-open pseudo-class (native top-layer) */
+.mu-dropdown__menu:popover-open {
+    opacity: 1;
+    visibility: visible;
+    transform: scaleY(1) translateY(0);
+    pointer-events: auto;
+}
+
+/* Fallback: is-open class for older browsers or manual control */
+.mu-dropdown__menu.is-open {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: scaleY(1) translateY(0);
+    pointer-events: auto;
+}
+
+/* MD3 Menu items - 48dp height (touch-friendly) */
+.mu-dropdown__item,
+.mu-dropdown__option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    /* MD3 touch target minimum */
+    padding: 0 16px;
+    font-size: var(--md-sys-typescale-body-large-size);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    overflow: hidden;
+    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for options - MD3 spec */
+.mu-dropdown__item::before,
+.mu-dropdown__option::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+.mu-dropdown__item:hover::before,
+.mu-dropdown__option:hover::before {
+    opacity: var(--md-sys-state-hover-opacity, 0.08);
+}
+
+.mu-dropdown__item:active::before,
+.mu-dropdown__option:active::before {
+    opacity: var(--md-sys-state-pressed-opacity, 0.12);
+}
+
+.mu-dropdown__item:focus-visible,
+.mu-dropdown__option:focus-visible {
+    outline: none;
+}
+
+.mu-dropdown__item:focus-visible::before,
+.mu-dropdown__option:focus-visible::before {
+    opacity: var(--md-sys-state-focus-opacity, 0.12);
+}
+
+/* Selected state - secondary container bg */
+.mu-dropdown__item.is-selected,
+.mu-dropdown__option.is-active {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-dropdown__item.is-selected::before,
+.mu-dropdown__option.is-active::before {
+    background: var(--md-sys-color-on-secondary-container);
+}