microui-wc 0.1.0

package/src/styles/components/schema-form.css

@@ -0,0 +1,85 @@
+/**
+ * microUI schema-form Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   SCHEMA FORM - Auto-Generated Forms from JSON Schema
+   ============================================================================ */
+
+mu-schema-form {
+    display: block;
+    font-family: var(--md-sys-typescale-font);
+}
+
+.mu-schema-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.mu-schema-form.mu-schema-form-inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.mu-schema-form.mu-schema-form-inline .mu-schema-form-field {
+    flex: 1;
+    min-width: 200px;
+}
+
+.mu-schema-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.mu-schema-form-field.mu-schema-form-field-error mu-input,
+.mu-schema-form-field.mu-schema-form-field-error mu-dropdown,
+.mu-schema-form-field.mu-schema-form-field-error mu-textarea {
+    --md-sys-color-outline: var(--md-sys-color-error);
+}
+
+.mu-schema-form-description {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-on-surface-variant);
+    margin-top: 2px;
+}
+
+.mu-schema-form-error {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-error);
+    margin-top: 2px;
+}
+
+.mu-schema-form-switch-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.mu-schema-form-switch-label {
+    font-size: var(--md-sys-typescale-body-medium-size);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-schema-form-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 8px;
+    padding-top: 16px;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.mu-schema-form-actions mu-button {
+    flex: 0 0 auto;
+}
+
+.mu-schema-form-empty-state {
+    padding: 24px;
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-medium);
+}
+

package/src/styles/components/switch.css

@@ -0,0 +1,69 @@
+/**
+ * microUI switch Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   SPINNER - MD3 Circular Progress Indicator
+   https://m3.material.io/components/progress-indicators
+   ============================================================================ */
+
+.mu-spinner {
+    display: inline-block;
+}
+
+.mu-spinner__circle {
+    display: block;
+    border: 3px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin var(--md-sys-motion-duration-extra-long1) linear infinite;
+}
+
+.mu-spinner--xs .mu-spinner__circle {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+}
+
+.mu-spinner--sm .mu-spinner__circle {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+}
+
+.mu-spinner--md .mu-spinner__circle {
+    width: 48px;
+    /* MD3: 48dp standard circular diameter */
+    height: 48px;
+    border-width: 4px;
+}
+
+.mu-spinner--lg .mu-spinner__circle {
+    width: 40px;
+    height: 40px;
+    border-width: 4px;
+}
+
+.mu-spinner--xl .mu-spinner__circle {
+    width: 48px;
+    height: 48px;
+    border-width: 4px;
+}
+
+.mu-spinner--primary {
+    color: var(--md-sys-color-primary);
+}
+
+.mu-spinner--secondary {
+    color: var(--md-sys-color-secondary);
+}
+
+.mu-spinner--current {
+    color: currentColor;
+}
+
+.mu-spinner--white {
+    color: white;
+}
+

package/src/styles/components/tabs.css

@@ -0,0 +1,145 @@
+/**
+ * microUI tabs Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   TABS - MD3 Tabs with sliding indicator
+   https://m3.material.io/components/tabs
+   ============================================================================ */
+
+.mu-tabs {
+    display: block;
+    /* Required for margin to work */
+    width: 100%;
+    position: relative;
+    margin-bottom: 24px;
+    /* MD3: proper spacing between tabs and content */
+}
+
+.mu-tabs__list {
+    display: flex;
+    position: relative;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+}
+
+.mu-tabs__tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 90px;
+    height: 48px;
+    padding: 0 16px;
+    background: transparent;
+    border: none;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-title-small-size);
+    font-weight: var(--md-sys-typescale-title-small-weight);
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for hover/focus */
+.mu-tabs__tab::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-primary);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-tabs__tab:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-tabs__tab:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-tabs__tab.is-active {
+    color: var(--md-sys-color-primary);
+}
+
+/* Remove per-tab indicator - we use sliding indicator now */
+.mu-tabs__tab::after {
+    display: none;
+}
+
+/* Sliding indicator - ::after pseudo-element (no DOM element needed)
+   Position controlled via CSS custom properties set by JS */
+.mu-tabs__list::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background: var(--md-sys-color-primary);
+    border-radius: 3px 3px 0 0;
+    /* Dynamic positioning via CSS custom properties */
+    width: var(--indicator-width, 33.3333%);
+    left: var(--indicator-left, 0);
+    /* Smooth sliding animation */
+    transition: left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Legacy support: hide old DOM indicator if present */
+.mu-tabs__indicator {
+    display: none;
+}
+
+.mu-tabs__panel,
+mu-tab-panel {
+    display: block;
+    padding: 16px 0;
+    animation: fadeIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+
+/* Tab panel visibility - hidden by default, shown when active */
+mu-tab-panel:not([active]),
+.mu-tab-panel:not(.active),
+.doc-tab-content:not(:first-of-type) {
+    display: none;
+}
+
+/* Pills Variant */
+.mu-tabs--pills .mu-tabs__list {
+    border-bottom: none;
+    gap: 8px;
+    padding: 4px;
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-full);
+    width: fit-content;
+}
+
+.mu-tabs--pills .mu-tabs__tab {
+    flex: none;
+    height: 36px;
+    min-width: auto;
+    border-radius: var(--md-sys-shape-corner-full);
+    transition:
+        color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+/* NoHide indicator for pills - use background instead */
+.mu-tabs--pills .mu-tabs__indicator {
+    display: none;
+}
+
+.mu-tabs--pills .mu-tabs__tab.is-active {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+/* Underline Variant - thinner indicator */
+.mu-tabs--underline .mu-tabs__indicator {
+    height: 2px;
+}
+

package/src/styles/components/tooltip.css

@@ -0,0 +1,93 @@
+/**
+ * microUI tooltip Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   TOOLTIP - MD3 Tooltip
+   https://m3.material.io/components/tooltips
+   ============================================================================ */
+
+.mu-tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* Hidden by default - CSS-only approach */
+.mu-tooltip__content {
+    position: absolute;
+    padding: 8px 12px;
+    background: var(--md-sys-color-inverse-surface);
+    color: var(--md-sys-color-inverse-on-surface);
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    white-space: nowrap;
+    z-index: var(--mu-z-tooltip);
+    pointer-events: none;
+
+    /* Hidden state */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) scale(0.9);
+    transition:
+        opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+        visibility var(--md-sys-motion-duration-short3),
+        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Show on hover */
+.mu-tooltip:hover .mu-tooltip__content,
+.mu-tooltip:focus-within .mu-tooltip__content {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) scale(1);
+}
+
+/* Position variants */
+.mu-tooltip--top .mu-tooltip__content {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(4px) scale(0.9);
+    margin-bottom: 8px;
+}
+
+.mu-tooltip--top:hover .mu-tooltip__content {
+    transform: translateX(-50%) translateY(0) scale(1);
+}
+
+.mu-tooltip--bottom .mu-tooltip__content {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px) scale(0.9);
+    margin-top: 8px;
+}
+
+.mu-tooltip--bottom:hover .mu-tooltip__content {
+    transform: translateX(-50%) translateY(0) scale(1);
+}
+
+.mu-tooltip--left .mu-tooltip__content {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(4px) scale(0.9);
+    margin-right: 8px;
+}
+
+.mu-tooltip--left:hover .mu-tooltip__content {
+    transform: translateY(-50%) translateX(0) scale(1);
+}
+
+.mu-tooltip--right .mu-tooltip__content {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(-4px) scale(0.9);
+    margin-left: 8px;
+}
+
+.mu-tooltip--right:hover .mu-tooltip__content {
+    transform: translateY(-50%) translateX(0) scale(1);
+}
+

package/src/styles/components/virtual-list.css

@@ -0,0 +1,36 @@
+/**
+ * microUI virtual-list Component Styles
+ * Auto-extracted from components.css
+ */
+
+/* ============================================================================
+   FETCH - Data fetcher component states
+   ============================================================================ */
+
+mu-fetch {
+    display: block;
+}
+
+.mu-fetch__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+}
+
+.mu-fetch__error {
+    margin: 16px 0;
+}
+
+.mu-fetch__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-fetch__data {
+    display: block;
+}
+