microui-wc 0.1.0

package/src/styles/components/grid.css

@@ -0,0 +1,189 @@
+/**
+ * microUI grid Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   GRID - CSS Grid Layout
+   ============================================================================ */
+
+/* Base element - CSS fallback for before JS upgrade */
+mu-grid {
+    display: grid;
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+/* Attribute-based selectors for columns */
+mu-grid[cols="1"] {
+    grid-template-columns: repeat(1, 1fr);
+}
+
+mu-grid[cols="2"] {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+mu-grid[cols="3"] {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+mu-grid[cols="4"] {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+mu-grid[cols="6"] {
+    grid-template-columns: repeat(6, 1fr);
+}
+
+mu-grid[cols="12"] {
+    grid-template-columns: repeat(12, 1fr);
+}
+
+/* Attribute-based selectors for gap */
+mu-grid[gap="none"] {
+    gap: 0;
+}
+
+mu-grid[gap="xs"] {
+    gap: var(--md-sys-spacing-xs, 4px);
+}
+
+mu-grid[gap="sm"] {
+    gap: var(--md-sys-spacing-sm, 8px);
+}
+
+mu-grid[gap="md"] {
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+mu-grid[gap="lg"] {
+    gap: var(--md-sys-spacing-lg, 24px);
+}
+
+mu-grid[gap="xl"] {
+    gap: var(--md-sys-spacing-xl, 32px);
+}
+
+/* Responsive: collapse to single column on compact screens (MD3 < 600px) */
+/* !important is needed to override inline styles set by JS component */
+@media (max-width: 599px) {
+
+    mu-grid[cols="2"],
+    mu-grid[cols="3"],
+    mu-grid[cols="4"],
+    mu-grid[cols="6"] {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Legacy class-based selectors (for compatibility) */
+.mu-stack {
+    display: flex;
+}
+
+.mu-stack--row {
+    flex-direction: row;
+}
+
+.mu-stack--column {
+    flex-direction: column;
+}
+
+.mu-stack--row-reverse {
+    flex-direction: row-reverse;
+}
+
+.mu-stack--column-reverse {
+    flex-direction: column-reverse;
+}
+
+.mu-stack--gap-0 {
+    gap: 0;
+}
+
+.mu-stack--gap-1 {
+    gap: 4px;
+}
+
+.mu-stack--gap-2 {
+    gap: 8px;
+}
+
+.mu-stack--gap-3 {
+    gap: 12px;
+}
+
+.mu-stack--gap-4 {
+    gap: 16px;
+}
+
+.mu-stack--gap-5 {
+    gap: 20px;
+}
+
+.mu-stack--gap-6 {
+    gap: 24px;
+}
+
+.mu-stack--gap-8 {
+    gap: 32px;
+}
+
+.mu-stack--gap-10 {
+    gap: 40px;
+}
+
+.mu-stack--gap-12 {
+    gap: 48px;
+}
+
+.mu-stack--gap-16 {
+    gap: 64px;
+}
+
+.mu-stack--align-start {
+    align-items: flex-start;
+}
+
+.mu-stack--align-center {
+    align-items: center;
+}
+
+.mu-stack--align-end {
+    align-items: flex-end;
+}
+
+.mu-stack--align-stretch {
+    align-items: stretch;
+}
+
+.mu-stack--align-baseline {
+    align-items: baseline;
+}
+
+.mu-stack--justify-start {
+    justify-content: flex-start;
+}
+
+.mu-stack--justify-center {
+    justify-content: center;
+}
+
+.mu-stack--justify-end {
+    justify-content: flex-end;
+}
+
+.mu-stack--justify-between {
+    justify-content: space-between;
+}
+
+.mu-stack--justify-around {
+    justify-content: space-around;
+}
+
+.mu-stack--justify-evenly {
+    justify-content: space-evenly;
+}
+
+.mu-stack--wrap {
+    flex-wrap: wrap;
+}

package/src/styles/components/icon.css

@@ -0,0 +1,40 @@
+/**
+ * microUI icon Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   ICON - Material Symbols Integration
+   ============================================================================ */
+
+mu-icon,
+.mu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    vertical-align: middle;
+}
+
+mu-icon .material-symbols-outlined {
+    font-family: 'Material Symbols Outlined', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+}
+
+mu-icon svg {
+    display: block;
+}
+

package/src/styles/components/input.css

@@ -0,0 +1,203 @@
+/**
+ * microUI input Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   INPUT - MD3 Text Field
+   https://m3.material.io/components/text-fields
+   ============================================================================ */
+
+/* Wrapper contains the animated focus indicator */
+.mu-input {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+/* MD3 Floating Label */
+.mu-input__label {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%) scale(1);
+    transform-origin: left center;
+    font-size: 16px;
+    /* Fixed base size - scaling via transform for GPU acceleration */
+    color: var(--md-sys-color-on-surface-variant);
+    pointer-events: none;
+    transition:
+        top var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
+        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
+        color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+    z-index: 1;
+}
+
+/* Floating state - when focused or has value */
+.mu-input:focus-within .mu-input__label,
+.mu-input.has-value .mu-input__label {
+    top: 6px;
+    transform: translateY(0) scale(0.75);
+    /* 12px = 16px * 0.75 - GPU accelerated */
+}
+
+/* Primary color when focused */
+.mu-input:focus-within .mu-input__label {
+    color: var(--md-sys-color-primary);
+}
+
+/* Outlined variant: add background to label for border cutout effect */
+.mu-input--outlined .mu-input__label {
+    background: var(--md-sys-color-surface, #fff);
+    padding: 0 4px;
+    margin-left: -4px;
+}
+
+/* Adjust input padding when label is present */
+.mu-input:has(.mu-input__label) .mu-input__field {
+    padding-top: 24px;
+    padding-bottom: 8px;
+}
+
+/* Animated focus indicator - line expands from center */
+.mu-input::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: var(--md-sys-color-primary);
+    transition:
+        width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
+        left var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Focus state - line expands to full width (supports both JS class and native CSS) */
+.mu-input.is-focused::after,
+.mu-input:focus-within::after {
+    width: 100%;
+    left: 0;
+}
+
+/* Actual input field */
+.mu-input__field {
+    display: block;
+    width: 100%;
+    height: 56px;
+    padding: 16px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    color: var(--md-sys-color-on-surface);
+    background: var(--md-sys-color-surface-container-highest);
+    border: none;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
+    caret-color: var(--md-sys-color-primary);
+    transition:
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-input__field::placeholder {
+    color: var(--md-sys-color-on-surface-variant);
+    transition: opacity var(--md-sys-motion-duration-short2);
+}
+
+.mu-input__field:focus::placeholder {
+    opacity: 0.6;
+}
+
+.mu-input__field:hover:not(:disabled):not(:focus) {
+    background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 95%, var(--md-sys-color-on-surface) 5%);
+    border-bottom-color: var(--md-sys-color-on-surface);
+}
+
+/* Label background must match field on hover (MD3 state layer consistency) */
+.mu-input--outlined:has(.mu-input__field:hover:not(:disabled):not(:focus)) .mu-input__label {
+    background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 95%, var(--md-sys-color-on-surface) 5%);
+}
+
+.mu-input__field:focus {
+    outline: none;
+    border-bottom-color: transparent;
+    /* Hidden because animated line shows */
+}
+
+/* Sizes */
+.mu-input--sm .mu-input__field {
+    height: 40px;
+    padding: 8px 12px;
+    font-size: var(--md-sys-typescale-body-medium-size);
+}
+
+.mu-input--md .mu-input__field {
+    height: 56px;
+    padding: 16px;
+}
+
+.mu-input--lg .mu-input__field {
+    height: 64px;
+    padding: 20px;
+    font-size: 18px;
+}
+
+/* Filled Variant (default) */
+.mu-input--filled .mu-input__field {
+    background: var(--md-sys-color-surface-container-highest);
+}
+
+/* Outlined Variant */
+.mu-input--outlined .mu-input__field {
+    height: 56px;
+    padding: 16px;
+    background: transparent;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    transition:
+        border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-input--outlined .mu-input__field:hover:not(:disabled):not(:focus) {
+    border-color: var(--md-sys-color-on-surface);
+}
+
+.mu-input--outlined .mu-input__field:focus {
+    border-color: var(--md-sys-color-primary);
+    /* Use box-shadow inset to simulate 2px border without layout shift */
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+    outline: none;
+}
+
+/* Outlined doesn't use the bottom line indicator */
+.mu-input--outlined::after {
+    display: none;
+}
+
+/* Disabled */
+.mu-input.is-disabled .mu-input__field,
+.mu-input__field:disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    cursor: not-allowed;
+}
+
+/* ============================================================================
+   NUMBER INPUT - MD3 Style (hide browser spinners)
+   ============================================================================ */
+
+/* Hide native spinners - Chrome, Safari, Edge, Opera */
+.mu-input__field[type="number"]::-webkit-inner-spin-button,
+.mu-input__field[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Hide native spinners - Firefox */
+.mu-input__field[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}

package/src/styles/components/layout.css

@@ -0,0 +1,121 @@
+/**
+ * microUI layout Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   LAYOUT - MD3 Responsive Layout Container
+   ============================================================================ */
+
+mu-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: var(--md-sys-color-background);
+    color: var(--md-sys-color-on-background);
+    overflow: hidden;
+    /* SOTA 2026: Contain layout to prevent cascading repaints */
+    contain: layout style;
+}
+
+.mu-layout-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.mu-layout-header {
+    flex-shrink: 0;
+    width: 100%;
+    z-index: var(--z-sticky, 100);
+}
+
+.mu-layout-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.mu-layout-drawer {
+    flex-shrink: 0;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+@media (max-width: 599px) {
+    .mu-layout-drawer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: var(--mu-z-drawer, 250);
+    }
+}
+
+.mu-layout-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.mu-layout-content {
+    flex: 1;
+    padding: 16px;
+}
+
+mu-layout[has-bottom-nav] .mu-layout-content {
+    padding-bottom: calc(var(--mu-bottom-nav-height, 80px) + 16px + env(safe-area-inset-bottom, 0));
+}
+
+@media (max-width: 599px) {
+    .mu-layout-content {
+        padding: 8px;
+    }
+
+    mu-layout[has-bottom-nav] .mu-layout-content {
+        padding-bottom: calc(var(--mu-bottom-nav-height, 80px) + 8px + env(safe-area-inset-bottom, 0));
+    }
+}
+
+.mu-layout-footer {
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.mu-layout-bottom {
+    /* Bottom nav is fixed, no space needed here */
+}
+
+/* Loading state */
+mu-layout.mu-loading .mu-layout-content::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg,
+            var(--md-sys-color-primary) 0%,
+            var(--md-sys-color-primary-container) 50%,
+            var(--md-sys-color-primary) 100%);
+    background-size: 200% 100%;
+    animation: loading-bar 1.5s ease-in-out infinite;
+    z-index: var(--z-overlay, 9999);
+}
+
+@keyframes loading-bar {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
+}

package/src/styles/components/navbar.css

@@ -0,0 +1,91 @@
+/**
+ * microUI navbar Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   NAVBAR LINKS - MD3 Navigation Items
+   https://m3.material.io/components/navigation-rail
+   ============================================================================ */
+
+.mu-navbar__links {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 24px;
+}
+
+.mu-navbar__links a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 16px;
+    border-radius: var(--md-sys-shape-corner-full);
+    color: var(--md-sys-color-on-surface-variant);
+    text-decoration: none;
+    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);
+    overflow: hidden;
+    cursor: pointer;
+    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer */
+.mu-navbar__links a::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) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Hover state */
+.mu-navbar__links a:hover {
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-navbar__links a:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+/* Focus state */
+.mu-navbar__links a:focus-visible {
+    outline: none;
+}
+
+.mu-navbar__links a:focus-visible::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-navbar__links a:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border: 2px solid var(--md-sys-color-primary);
+    border-radius: calc(var(--md-sys-shape-corner-full) + 2px);
+    pointer-events: none;
+}
+
+/* Pressed state */
+.mu-navbar__links a:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Active/Selected state - with pill indicator */
+.mu-navbar__links a.active,
+.mu-navbar__links a[aria-current="page"] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-navbar__links a.active::before,
+.mu-navbar__links a[aria-current="page"]::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+