mljr-css 0.1.0

package/src/components/popover.css

@@ -0,0 +1,175 @@
+/* ============================================
+   MLJR CSS Framework - Popover Component
+   Claymorphism: Soft frosted glass popovers
+   ============================================ */
+
+.mljr-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.mljr-popover-trigger {
+  cursor: pointer;
+}
+
+.mljr-popover-content {
+  position: absolute;
+  z-index: var(--mljr-z-popover);
+  min-width: 14rem;
+  max-width: 20rem;
+  padding: var(--mljr-space-4);
+  background: var(--mljr-frosted-bg-strong);
+  backdrop-filter: blur(12px);
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: all var(--mljr-transition-fast);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  border: 1px solid var(--mljr-frosted-border-strong);
+}
+
+/* Open state - show on explicit open class */
+.mljr-popover.mljr-popover-open .mljr-popover-content {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Hover/focus triggers - only for non-click popovers */
+.mljr-popover:not(.mljr-popover-click):hover .mljr-popover-content,
+.mljr-popover:not(.mljr-popover-click):focus-within .mljr-popover-content {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Position variants */
+.mljr-popover-top .mljr-popover-content {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  margin-bottom: var(--mljr-space-2);
+}
+
+.mljr-popover-top.mljr-popover-open .mljr-popover-content,
+.mljr-popover-top:not(.mljr-popover-click):hover .mljr-popover-content,
+.mljr-popover-top:not(.mljr-popover-click):focus-within .mljr-popover-content {
+  transform: translateX(-50%) translateY(0);
+}
+
+.mljr-popover-bottom .mljr-popover-content {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(8px);
+  margin-top: var(--mljr-space-2);
+}
+
+.mljr-popover-bottom.mljr-popover-open .mljr-popover-content,
+.mljr-popover-bottom:not(.mljr-popover-click):hover .mljr-popover-content,
+.mljr-popover-bottom:not(.mljr-popover-click):focus-within .mljr-popover-content {
+  transform: translateX(-50%) translateY(0);
+}
+
+.mljr-popover-left .mljr-popover-content {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-8px);
+  margin-right: var(--mljr-space-2);
+}
+
+.mljr-popover-left.mljr-popover-open .mljr-popover-content,
+.mljr-popover-left:not(.mljr-popover-click):hover .mljr-popover-content,
+.mljr-popover-left:not(.mljr-popover-click):focus-within .mljr-popover-content {
+  transform: translateY(-50%) translateX(0);
+}
+
+.mljr-popover-right .mljr-popover-content {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(8px);
+  margin-left: var(--mljr-space-2);
+}
+
+.mljr-popover-right.mljr-popover-open .mljr-popover-content,
+.mljr-popover-right:not(.mljr-popover-click):hover .mljr-popover-content,
+.mljr-popover-right:not(.mljr-popover-click):focus-within .mljr-popover-content {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Popover header */
+.mljr-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mljr-space-2);
+  margin-bottom: var(--mljr-space-3);
+  padding-bottom: var(--mljr-space-3);
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-popover-title {
+  font-weight: 600;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text);
+}
+
+.mljr-popover-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-popover-close:hover {
+  color: var(--mljr-text);
+  background: var(--mljr-bg-tertiary);
+}
+
+/* Popover body */
+.mljr-popover-body {
+  color: var(--mljr-text-secondary);
+  line-height: var(--mljr-leading-normal);
+}
+
+/* Popover footer */
+.mljr-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mljr-space-2);
+  margin-top: var(--mljr-space-3);
+  padding-top: var(--mljr-space-3);
+  border-top: 1px solid var(--mljr-border);
+}
+
+/* Size variants */
+.mljr-popover-sm .mljr-popover-content {
+  min-width: 10rem;
+  max-width: 14rem;
+  padding: var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-popover-lg .mljr-popover-content {
+  min-width: 20rem;
+  max-width: 28rem;
+  padding: var(--mljr-space-5);
+}
+
+/* Dark mode - shadow adjustments */
+.dark .mljr-popover-content,
+[data-theme="dark"] .mljr-popover-content {
+  box-shadow: var(--mljr-clay-shadow-lg);
+}

package/src/components/progress.css

@@ -0,0 +1,165 @@
+/* ============================================
+   MLJR CSS Framework - Progress Component
+   Claymorphism: Soft rounded progress bars
+   ============================================ */
+
+.mljr-progress {
+  position: relative;
+  width: 100%;
+  height: 0.75rem;
+  border-radius: var(--mljr-radius-full);
+  background-color: var(--mljr-bg-tertiary);
+  overflow: hidden;
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-progress-bar {
+  height: 100%;
+  border-radius: var(--mljr-radius-full);
+  background: var(--mljr-gradient-primary);
+  transition: width var(--mljr-transition-slow);
+  box-shadow:
+    2px 2px 4px rgba(249, 115, 22, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+/* Wrapper for labeled progress */
+.mljr-progress-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+/* Color Variants */
+.mljr-progress-secondary .mljr-progress-bar {
+  background: var(--mljr-gradient-secondary);
+  box-shadow:
+    2px 2px 4px rgba(20, 184, 166, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+.mljr-progress-accent .mljr-progress-bar {
+  background: var(--mljr-gradient-accent);
+  box-shadow:
+    2px 2px 4px rgba(168, 85, 247, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+.mljr-progress-success .mljr-progress-bar {
+  background: linear-gradient(135deg, var(--mljr-success-light) 0%, var(--mljr-success) 100%);
+  box-shadow:
+    2px 2px 4px rgba(16, 185, 129, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+.mljr-progress-warning .mljr-progress-bar {
+  background: linear-gradient(135deg, var(--mljr-warning-light) 0%, var(--mljr-warning) 100%);
+  box-shadow:
+    2px 2px 4px rgba(234, 179, 8, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+.mljr-progress-error .mljr-progress-bar {
+  background: linear-gradient(135deg, var(--mljr-error-light) 0%, var(--mljr-error) 100%);
+  box-shadow:
+    2px 2px 4px rgba(239, 68, 68, 0.2),
+    -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+
+/* Sizes */
+.mljr-progress-sm {
+  height: 0.5rem;
+}
+
+.mljr-progress-md {
+  height: 0.75rem;
+}
+
+.mljr-progress-lg {
+  height: 1rem;
+}
+
+.mljr-progress-xl {
+  height: 1.5rem;
+}
+
+/* Indeterminate state */
+.mljr-progress-indeterminate .mljr-progress-bar {
+  width: 30% !important;
+  animation: mljr-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes mljr-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* Striped animation */
+.mljr-progress-striped .mljr-progress-bar {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.mljr-progress-striped-animated .mljr-progress-bar {
+  animation: mljr-progress-stripes 1s linear infinite;
+}
+
+@keyframes mljr-progress-stripes {
+  0% { background-position: 1rem 0; }
+  100% { background-position: 0 0; }
+}
+
+/* With label */
+.mljr-progress-labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-progress-labeled .mljr-progress-wrapper {
+  flex: 1;
+}
+
+.mljr-progress-label {
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text-secondary);
+  min-width: 3rem;
+  text-align: right;
+}
+
+/* Dark mode */
+.dark .mljr-progress,
+[data-theme="dark"] .mljr-progress {
+  background-color: var(--mljr-bg-tertiary);
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.dark .mljr-progress .mljr-progress-bar,
+[data-theme="dark"] .mljr-progress .mljr-progress-bar {
+  box-shadow:
+    2px 2px 4px rgba(0, 0, 0, 0.3),
+    -2px -2px 4px rgba(68, 64, 60, 0.1),
+    0 0 8px rgba(249, 115, 22, 0.2);
+}
+
+.dark .mljr-progress-secondary .mljr-progress-bar,
+[data-theme="dark"] .mljr-progress-secondary .mljr-progress-bar {
+  box-shadow:
+    2px 2px 4px rgba(0, 0, 0, 0.3),
+    -2px -2px 4px rgba(68, 64, 60, 0.1),
+    0 0 8px rgba(20, 184, 166, 0.2);
+}

package/src/components/radio.css

@@ -0,0 +1,200 @@
+/* ============================================
+   MLJR CSS Framework - Radio Button Component
+   Claymorphism: Soft rounded radio buttons
+   ============================================ */
+
+.mljr-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-radio-group-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.mljr-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  cursor: pointer;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text);
+  user-select: none;
+}
+
+.mljr-radio-input {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  appearance: none;
+  background: var(--mljr-bg);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-inset-sm);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-radio-input::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--mljr-primary-500);
+  border-radius: var(--mljr-radius-full);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--mljr-transition-fast);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.mljr-radio-input:checked {
+  box-shadow: var(--mljr-clay-inset-xs);
+}
+
+.mljr-radio-input:checked::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.mljr-radio-input:hover:not(:checked):not(:disabled) {
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-radio-input:focus {
+  outline: none;
+  box-shadow: 
+    var(--mljr-clay-inset-xs),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-radio-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mljr-radio-input:disabled + .mljr-radio-label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mljr-radio-label {
+  cursor: pointer;
+}
+
+/* Secondary Color */
+.mljr-radio-secondary .mljr-radio-input::after {
+  background: var(--mljr-secondary-500);
+}
+
+.mljr-radio-secondary .mljr-radio-input:focus {
+  box-shadow: 
+    var(--mljr-clay-inset-xs),
+    0 0 0 3px var(--mljr-secondary-200);
+}
+
+/* Accent Color */
+.mljr-radio-accent .mljr-radio-input::after {
+  background: var(--mljr-accent-500);
+}
+
+.mljr-radio-accent .mljr-radio-input:focus {
+  box-shadow: 
+    var(--mljr-clay-inset-xs),
+    0 0 3px var(--mljr-accent-200);
+}
+
+/* Sizes */
+.mljr-radio-sm .mljr-radio-input {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mljr-radio-sm .mljr-radio-input::after {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.mljr-radio-sm {
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-radio-lg .mljr-radio-input {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mljr-radio-lg .mljr-radio-input::after {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.mljr-radio-lg {
+  font-size: var(--mljr-text-base);
+}
+
+/* Card Style Radio */
+.mljr-radio-card {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-4);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+  cursor: pointer;
+}
+
+.mljr-radio-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-radio-card:has(.mljr-radio-input:checked) {
+  box-shadow: 
+    var(--mljr-clay-shadow-sm),
+    inset 0 0 0 2px var(--mljr-primary-300);
+}
+
+.mljr-radio-card:has(.mljr-radio-input:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.mljr-radio-card-content {
+  flex: 1;
+}
+
+.mljr-radio-card-title {
+  font-weight: 600;
+  color: var(--mljr-text);
+  margin-bottom: var(--mljr-space-1);
+}
+
+.mljr-radio-card-description {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+}
+
+/* Dark Mode */
+.dark .mljr-radio-input,
+[data-theme="dark"] .mljr-radio-input {
+  background: var(--mljr-bg-secondary);
+}
+
+.dark .mljr-radio-input:focus,
+[data-theme="dark"] .mljr-radio-input:focus {
+  box-shadow: 
+    var(--mljr-clay-inset-xs),
+    0 0 0 3px rgba(249, 115, 22, 0.2);
+}
+
+.dark .mljr-radio-card,
+[data-theme="dark"] .mljr-radio-card {
+  background: var(--mljr-bg-secondary);
+}

package/src/components/select.css

@@ -0,0 +1,165 @@
+/* ============================================
+   MLJR CSS Framework - Select Component
+   Claymorphism: Soft rounded select inputs
+   Note: Container base styles are in input.css
+   ============================================ */
+
+/* When using a container, the container provides the shadow */
+.mljr-select-container {
+  position: relative;
+  display: block;
+  width: 100%;
+  border-radius: var(--mljr-radius-md);
+  box-shadow: var(--mljr-clay-inset);
+  background: var(--mljr-bg);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-select-container:hover {
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-select-container:focus-within {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-select-container .mljr-select {
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: var(--mljr-radius-md);
+}
+
+.mljr-select-container .mljr-select:hover {
+  background-color: transparent;
+}
+
+.mljr-select-container .mljr-select:focus {
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.mljr-select {
+  display: block;
+  width: 100%;
+  padding: var(--mljr-space-3) var(--mljr-space-10) var(--mljr-space-3) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+  line-height: var(--mljr-leading-normal);
+  color: var(--mljr-text);
+  background-color: var(--mljr-bg);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right var(--mljr-space-3) center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  border: none;
+  border-radius: var(--mljr-radius-md);
+  appearance: none;
+  cursor: pointer;
+  box-shadow: var(--mljr-clay-inset);
+  transition: box-shadow var(--mljr-transition-fast), background-color var(--mljr-transition-fast);
+}
+
+.mljr-select:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-select:focus {
+  outline: none;
+  background-color: var(--mljr-bg);
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-select:disabled {
+  background-color: var(--mljr-bg-tertiary);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Select Sizes */
+.mljr-select-sm {
+  padding: var(--mljr-space-2) var(--mljr-space-8) var(--mljr-space-2) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-select-lg {
+  padding: var(--mljr-space-4) var(--mljr-space-12) var(--mljr-space-4) var(--mljr-space-5);
+  font-size: var(--mljr-text-base);
+  border-radius: var(--mljr-radius-lg);
+}
+
+/* Select States */
+.mljr-select-error {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-error-light);
+}
+
+.mljr-select-error:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+.mljr-select-success {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-success-light);
+}
+
+.mljr-select-success:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+/* Multi Select (native) */
+.mljr-select[multiple] {
+  padding: var(--mljr-space-2);
+  background-image: none;
+  height: auto;
+}
+
+.mljr-select[multiple] option {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  border-radius: var(--mljr-radius-sm);
+}
+
+/* Option styling (limited browser support) */
+.mljr-select option {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  background-color: var(--mljr-bg);
+  color: var(--mljr-text);
+  font-family: var(--mljr-font-sans);
+}
+
+.mljr-select option:hover,
+.mljr-select option:focus,
+.mljr-select option:checked {
+  background: var(--mljr-gradient-primary);
+  color: white;
+}
+
+.mljr-select optgroup {
+  font-weight: 600;
+  font-family: var(--mljr-font-sans);
+  color: var(--mljr-text-muted);
+  background-color: var(--mljr-bg-secondary);
+}
+
+/* Dark mode adjustment for select arrow */
+.dark .mljr-select,
+[data-theme="dark"] .mljr-select {
+  background-color: var(--mljr-bg-secondary);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a8a29e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+.dark .mljr-select:focus,
+[data-theme="dark"] .mljr-select:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(249, 115, 22, 0.2);
+}