mljr-css 1.0.14 → 1.1.0

package/src/components/navigation-rail.css

@@ -0,0 +1,220 @@
+/* ============================================
+   MLJR CSS Framework - Navigation Rail Component
+   Claymorphism: Compact vertical nav with icons + labels
+   ============================================ */
+
+.mljr-nav-rail {
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  min-height: 100%;
+  background: linear-gradient(
+    180deg,
+    var(--mljr-bg) 0%,
+    var(--mljr-bg-secondary) 100%
+  );
+  box-shadow: var(--mljr-clay-shadow);
+  border-radius: var(--mljr-radius-xl);
+  border: 1px solid var(--mljr-frosted-border);
+  padding: var(--mljr-space-3) var(--mljr-space-2);
+  gap: var(--mljr-space-1);
+  transition: width var(--mljr-transition), all var(--mljr-transition);
+  overflow: hidden;
+}
+
+/* Expanded variant - shows labels next to icons */
+.mljr-nav-rail-expanded {
+  width: 200px;
+}
+
+/* With labels below icons (default) */
+.mljr-nav-rail-labeled {
+  width: 88px;
+}
+
+/* Nav rail header/logo area */
+.mljr-nav-rail-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mljr-space-2) var(--mljr-space-1);
+  margin-bottom: var(--mljr-space-2);
+}
+
+.mljr-nav-rail-expanded .mljr-nav-rail-header {
+  justify-content: flex-start;
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+}
+
+/* Nav rail item */
+.mljr-nav-rail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-1);
+  padding: var(--mljr-space-2) var(--mljr-space-1);
+  border-radius: var(--mljr-radius-lg);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--mljr-text-secondary);
+  background: transparent;
+  border: none;
+  width: 100%;
+  font-family: inherit;
+  transition: all var(--mljr-transition-fast);
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mljr-nav-rail-item:hover {
+  background: linear-gradient(
+    145deg,
+    var(--mljr-bg-secondary) 0%,
+    var(--mljr-bg-tertiary) 100%
+  );
+  color: var(--mljr-text);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transform: translateY(-1px);
+}
+
+.mljr-nav-rail-item-active {
+  background: linear-gradient(
+    145deg,
+    var(--mljr-primary-50) 0%,
+    var(--mljr-primary-100) 100%
+  );
+  color: var(--mljr-primary-600);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-nav-rail-item-active:hover {
+  background: linear-gradient(
+    145deg,
+    var(--mljr-primary-100) 0%,
+    var(--mljr-primary-200) 100%
+  );
+  color: var(--mljr-primary-700);
+}
+
+.dark .mljr-nav-rail-item-active {
+  background: linear-gradient(
+    145deg,
+    rgba(249, 115, 22, 0.15) 0%,
+    rgba(249, 115, 22, 0.08) 100%
+  );
+  color: var(--mljr-primary-400);
+}
+
+/* Item icon */
+.mljr-nav-rail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+
+/* Item label */
+.mljr-nav-rail-label {
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  text-align: center;
+  line-height: 1;
+}
+
+/* Expanded mode - horizontal layout */
+.mljr-nav-rail-expanded .mljr-nav-rail-item {
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: var(--mljr-space-3) var(--mljr-space-3);
+  gap: var(--mljr-space-3);
+}
+
+.mljr-nav-rail-expanded .mljr-nav-rail-label {
+  font-size: var(--mljr-text-sm);
+  text-align: left;
+}
+
+/* Active indicator dot */
+.mljr-nav-rail-item-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  background: var(--mljr-primary-500);
+  border-radius: 0 var(--mljr-radius-full) var(--mljr-radius-full) 0;
+}
+
+/* Badge support */
+.mljr-nav-rail-item-badge {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  background: var(--mljr-error);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: var(--mljr-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Footer area */
+.mljr-nav-rail-footer {
+  margin-top: auto;
+  padding-top: var(--mljr-space-2);
+  border-top: 1px solid var(--mljr-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-1);
+}
+
+/* Divider */
+.mljr-nav-rail-divider {
+  height: 1px;
+  background: var(--mljr-border);
+  margin: var(--mljr-space-2) var(--mljr-space-2);
+  border-radius: var(--mljr-radius-full);
+}
+
+/* Toggle button */
+.mljr-nav-rail-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--mljr-space-2);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--mljr-radius-lg);
+  color: var(--mljr-text-secondary);
+  transition: all var(--mljr-transition-fast);
+  font-family: inherit;
+}
+
+.mljr-nav-rail-toggle:hover {
+  background: var(--mljr-bg-secondary);
+  color: var(--mljr-text);
+}
+
+/* Dark mode */
+.dark .mljr-nav-rail {
+  background: linear-gradient(
+    180deg,
+    var(--mljr-bg) 0%,
+    var(--mljr-bg-secondary) 100%
+  );
+}

package/src/components/notification-center.css

@@ -0,0 +1,306 @@
+/* ============================================
+   MLJR CSS Framework - Notification Center
+   Claymorphism: Bell icon + notification panel
+   ============================================ */
+
+.mljr-notification-center {
+  position: relative;
+  display: inline-flex;
+}
+
+.mljr-notification-bell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: var(--mljr-bg-secondary);
+  border: 1.5px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-lg);
+  color: var(--mljr-text);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-notification-bell:hover {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-700);
+  border-color: var(--mljr-primary-200);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-notification-bell:focus-visible {
+  outline: 2px solid var(--mljr-primary-500);
+  outline-offset: 2px;
+}
+
+.mljr-notification-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  padding: 0 4px;
+  background: var(--mljr-error);
+  color: white;
+  border-radius: var(--mljr-radius-full);
+  font-size: 0.625rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
+  border: 1.5px solid var(--mljr-bg);
+}
+
+/* Panel */
+.mljr-notification-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  z-index: var(--mljr-z-dropdown, 1000);
+  width: 340px;
+  max-width: 90vw;
+  background: var(--mljr-frosted-bg-strong, var(--mljr-bg));
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--mljr-frosted-border, var(--mljr-border));
+  border-radius: var(--mljr-radius-xl);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  overflow: hidden;
+  animation: mljr-notif-panel-in 0.15s ease-out;
+}
+
+@keyframes mljr-notif-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Panel header */
+.mljr-notification-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-notification-panel-title {
+  font-size: var(--mljr-text-base);
+  font-weight: 700;
+  color: var(--mljr-text);
+}
+
+.mljr-notification-panel-actions {
+  display: flex;
+  gap: var(--mljr-space-2);
+}
+
+.mljr-notification-action-btn {
+  background: none;
+  border: none;
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  color: var(--mljr-primary-600);
+  cursor: pointer;
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+  border-radius: var(--mljr-radius-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-notification-action-btn:hover {
+  background: var(--mljr-primary-50);
+  color: var(--mljr-primary-700);
+}
+
+/* Notification list */
+.mljr-notification-list {
+  max-height: 380px;
+  overflow-y: auto;
+}
+
+.mljr-notification-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.mljr-notification-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mljr-notification-list::-webkit-scrollbar-thumb {
+  background: var(--mljr-border-strong);
+  border-radius: var(--mljr-radius-full);
+}
+
+/* Notification item */
+.mljr-notification-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  border-bottom: 1px solid var(--mljr-border);
+  cursor: pointer;
+  transition: background var(--mljr-transition-fast);
+  position: relative;
+}
+
+.mljr-notification-item:last-child {
+  border-bottom: none;
+}
+
+.mljr-notification-item:hover {
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-notification-item-unread {
+  background: rgba(249, 115, 22, 0.04);
+}
+
+.mljr-notification-item-unread::before {
+  content: '';
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: var(--mljr-radius-full);
+  background: var(--mljr-primary-500);
+}
+
+.mljr-notification-item-unread .mljr-notification-item-body {
+  padding-left: 0.875rem;
+}
+
+.mljr-notification-type-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--mljr-radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+}
+
+.mljr-notification-type-info .mljr-notification-type-icon {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--mljr-info, #3b82f6);
+}
+
+.mljr-notification-type-success .mljr-notification-type-icon {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--mljr-success, #10b981);
+}
+
+.mljr-notification-type-warning .mljr-notification-type-icon {
+  background: rgba(234, 179, 8, 0.15);
+  color: var(--mljr-warning, #eab308);
+}
+
+.mljr-notification-type-error .mljr-notification-type-icon {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--mljr-error, #ef4444);
+}
+
+.mljr-notification-item-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.mljr-notification-item-title {
+  font-size: var(--mljr-text-sm);
+  font-weight: 600;
+  color: var(--mljr-text);
+  line-height: 1.3;
+  margin-bottom: 2px;
+}
+
+.mljr-notification-item-message {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mljr-notification-item-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mljr-space-2);
+  margin-top: 4px;
+}
+
+.mljr-notification-item-time {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-notification-item-actions {
+  display: flex;
+  gap: var(--mljr-space-1);
+  opacity: 0;
+  transition: opacity var(--mljr-transition-fast);
+}
+
+.mljr-notification-item:hover .mljr-notification-item-actions {
+  opacity: 1;
+}
+
+.mljr-notification-item-action {
+  background: none;
+  border: none;
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: var(--mljr-radius-sm);
+  display: flex;
+  font-size: var(--mljr-text-xs);
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-notification-item-action:hover {
+  color: var(--mljr-primary-600);
+}
+
+/* Empty state */
+.mljr-notification-empty {
+  padding: var(--mljr-space-8) var(--mljr-space-4);
+  text-align: center;
+  color: var(--mljr-text-muted);
+  font-size: var(--mljr-text-sm);
+}
+
+/* Dark mode */
+.dark .mljr-notification-panel,
+[data-theme="dark"] .mljr-notification-panel {
+  background: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+}
+
+.dark .mljr-notification-item-unread,
+[data-theme="dark"] .mljr-notification-item-unread {
+  background: rgba(249, 115, 22, 0.07);
+}
+
+.dark .mljr-notification-item:hover,
+[data-theme="dark"] .mljr-notification-item:hover {
+  background: var(--mljr-bg-tertiary);
+}
+
+.dark .mljr-notification-bell:hover,
+[data-theme="dark"] .mljr-notification-bell:hover {
+  background: rgba(249, 115, 22, 0.15);
+  color: var(--mljr-primary-300);
+}

package/src/components/number-input.css

@@ -0,0 +1,134 @@
+/* ============================================
+   MLJR CSS Framework - Number Input Component
+   Claymorphism: Stepper numeric input
+   ============================================ */
+
+.mljr-number-input {
+  display: inline-flex;
+  align-items: center;
+  background: var(--mljr-bg);
+  border: 1.5px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-md);
+  box-shadow: var(--mljr-clay-inset-sm);
+  overflow: hidden;
+  transition: border-color var(--mljr-transition-fast), box-shadow var(--mljr-transition-fast);
+}
+
+.mljr-number-input:focus-within {
+  border-color: var(--mljr-primary-400);
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(249, 115, 22, 0.12);
+}
+
+.mljr-number-input-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  color: var(--mljr-text);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  user-select: none;
+}
+
+.mljr-number-input-btn:hover:not(:disabled) {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-700);
+}
+
+.mljr-number-input-btn:active:not(:disabled) {
+  background: var(--mljr-primary-200);
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-number-input-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.mljr-number-input-decrement {
+  border-right: 1px solid var(--mljr-border);
+}
+
+.mljr-number-input-increment {
+  border-left: 1px solid var(--mljr-border);
+}
+
+.mljr-number-input-field {
+  flex: 1;
+  min-width: 3rem;
+  padding: 0 var(--mljr-space-2);
+  border: none;
+  background: transparent;
+  color: var(--mljr-text);
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  text-align: center;
+  outline: none;
+  -moz-appearance: textfield;
+}
+
+.mljr-number-input-field::-webkit-outer-spin-button,
+.mljr-number-input-field::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Size variants */
+.mljr-number-input-sm .mljr-number-input-btn {
+  width: 1.875rem;
+  height: 1.875rem;
+  font-size: 1rem;
+}
+
+.mljr-number-input-sm .mljr-number-input-field {
+  font-size: var(--mljr-text-xs);
+  min-width: 2.5rem;
+}
+
+.mljr-number-input-lg .mljr-number-input-btn {
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 1.25rem;
+}
+
+.mljr-number-input-lg .mljr-number-input-field {
+  font-size: var(--mljr-text-base);
+  min-width: 3.5rem;
+}
+
+/* Disabled state */
+.mljr-number-input-disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+/* Readonly state */
+.mljr-number-input-readonly .mljr-number-input-btn {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Dark mode */
+.dark .mljr-number-input,
+[data-theme="dark"] .mljr-number-input {
+  background: var(--mljr-bg);
+  border-color: var(--mljr-border);
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.dark .mljr-number-input-btn:hover:not(:disabled),
+[data-theme="dark"] .mljr-number-input-btn:hover:not(:disabled) {
+  background: rgba(249, 115, 22, 0.15);
+  color: var(--mljr-primary-300);
+}

package/src/components/number-ticker.css

@@ -0,0 +1,65 @@
+/* ============================================
+   Number Ticker Component
+   Animated number counter for stats/dashboards
+   ============================================ */
+
+.mljr-number-ticker {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.125em;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mljr-number-ticker-prefix,
+.mljr-number-ticker-suffix {
+  font-weight: 500;
+  opacity: 0.75;
+}
+
+.mljr-number-ticker-value {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sizes */
+.mljr-number-ticker-sm {
+  font-size: var(--mljr-text-lg);
+}
+
+.mljr-number-ticker-md {
+  font-size: var(--mljr-text-3xl);
+}
+
+.mljr-number-ticker-lg {
+  font-size: var(--mljr-text-5xl);
+}
+
+.mljr-number-ticker-xl {
+  font-size: var(--mljr-text-7xl);
+}
+
+/* Colors */
+.mljr-number-ticker-default {
+  color: var(--mljr-text);
+}
+
+.mljr-number-ticker-primary {
+  color: var(--mljr-primary-600);
+}
+
+.mljr-number-ticker-secondary {
+  color: var(--mljr-secondary-600);
+}
+
+.mljr-number-ticker-success {
+  color: var(--mljr-success-600);
+}
+
+.mljr-number-ticker-warning {
+  color: var(--mljr-warning-600);
+}
+
+.mljr-number-ticker-error {
+  color: var(--mljr-error-600);
+}