mljr-css 1.0.14 → 1.1.0

package/src/components/checkbox.css

@@ -18,7 +18,7 @@
   height: 1.25rem;
   background-color: var(--mljr-bg);
   border: none;
-  border-radius: var(--mljr-radius-sm);
+  border-radius: 5px;
   cursor: pointer;
   transition: all var(--mljr-transition-fast);
   flex-shrink: 0;

package/src/components/chip.css

@@ -29,49 +29,55 @@
 .mljr-chip-primary {
   background: var(--mljr-primary-100);
   color: var(--mljr-primary-700);
-  box-shadow: 
-    2px 2px 4px rgba(249, 115, 22, 0.15),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+  box-shadow:
+    2px 2px 4px rgba(249, 115, 22, 0.18),
+    inset -2px -2px 4px rgba(100, 60, 30, 0.08),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-secondary {
   background: var(--mljr-secondary-100);
   color: var(--mljr-secondary-700);
-  box-shadow: 
+  box-shadow:
     2px 2px 4px rgba(168, 85, 247, 0.15),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+    inset -2px -2px 4px rgba(80, 30, 140, 0.06),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-accent {
   background: var(--mljr-accent-100);
   color: var(--mljr-accent-700);
-  box-shadow: 
+  box-shadow:
     2px 2px 4px rgba(20, 184, 166, 0.15),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+    inset -2px -2px 4px rgba(5, 80, 70, 0.06),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-success {
   background: rgba(16, 185, 129, 0.15);
   color: var(--mljr-success-dark);
-  box-shadow: 
-    2px 2px 4px rgba(16, 185, 129, 0.1),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+  box-shadow:
+    2px 2px 4px rgba(16, 185, 129, 0.12),
+    inset -2px -2px 4px rgba(5, 80, 50, 0.06),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-warning {
   background: rgba(245, 158, 11, 0.15);
   color: var(--mljr-warning-dark);
-  box-shadow: 
-    2px 2px 4px rgba(245, 158, 11, 0.1),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+  box-shadow:
+    2px 2px 4px rgba(245, 158, 11, 0.12),
+    inset -2px -2px 4px rgba(120, 80, 5, 0.06),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-error {
   background: rgba(239, 68, 68, 0.15);
   color: var(--mljr-error-dark);
-  box-shadow: 
-    2px 2px 4px rgba(239, 68, 68, 0.1),
-    -2px -2px 4px rgba(255, 255, 255, 0.8);
+  box-shadow:
+    2px 2px 4px rgba(239, 68, 68, 0.12),
+    inset -2px -2px 4px rgba(120, 30, 30, 0.06),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.45);
 }
 
 .mljr-chip-outline {
@@ -183,21 +189,30 @@
 [data-theme="dark"] .mljr-chip-primary {
   background: rgba(249, 115, 22, 0.2);
   color: var(--mljr-primary-300);
-  box-shadow: 
+  box-shadow:
     2px 2px 4px rgba(0, 0, 0, 0.3),
-    -2px -2px 4px rgba(68, 64, 60, 0.2);
+    inset -2px -2px 4px rgba(0, 0, 0, 0.15),
+    inset 2px 2px 4px rgba(255, 200, 150, 0.06);
 }
 
 .dark .mljr-chip-secondary,
 [data-theme="dark"] .mljr-chip-secondary {
   background: rgba(168, 85, 247, 0.2);
   color: var(--mljr-secondary-300);
+  box-shadow:
+    2px 2px 4px rgba(0, 0, 0, 0.3),
+    inset -2px -2px 4px rgba(0, 0, 0, 0.15),
+    inset 2px 2px 4px rgba(255, 200, 150, 0.06);
 }
 
 .dark .mljr-chip-accent,
 [data-theme="dark"] .mljr-chip-accent {
   background: rgba(20, 184, 166, 0.2);
   color: var(--mljr-accent-300);
+  box-shadow:
+    2px 2px 4px rgba(0, 0, 0, 0.3),
+    inset -2px -2px 4px rgba(0, 0, 0, 0.15),
+    inset 2px 2px 4px rgba(255, 200, 150, 0.06);
 }
 
 .dark .mljr-chip-outline,

package/src/components/context-menu.css

@@ -0,0 +1,118 @@
+/* ============================================
+   MLJR CSS Framework - Context Menu Component
+   Claymorphism: Right-click contextual menu
+   ============================================ */
+
+.mljr-context-menu-trigger {
+  display: contents;
+}
+
+.mljr-context-menu {
+  position: fixed;
+  z-index: var(--mljr-z-dropdown, 1000);
+  min-width: 13rem;
+  padding: var(--mljr-space-2);
+  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-lg);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  animation: mljr-context-menu-in 0.12s ease-out;
+}
+
+@keyframes mljr-context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.mljr-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  width: 100%;
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  color: var(--mljr-text);
+  background: none;
+  border: none;
+  border-radius: var(--mljr-radius-md);
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+}
+
+.mljr-context-menu-item:hover:not(:disabled) {
+  background: var(--mljr-bg-secondary);
+  color: var(--mljr-primary-600);
+}
+
+.mljr-context-menu-item:focus-visible {
+  outline: none;
+  background: var(--mljr-bg-secondary);
+  color: var(--mljr-primary-600);
+}
+
+.mljr-context-menu-item:disabled,
+.mljr-context-menu-item-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.mljr-context-menu-item-danger {
+  color: var(--mljr-error);
+}
+
+.mljr-context-menu-item-danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--mljr-error);
+}
+
+.mljr-context-menu-item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.mljr-context-menu-item-label {
+  flex: 1;
+}
+
+.mljr-context-menu-item-shortcut {
+  margin-left: auto;
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+  white-space: nowrap;
+}
+
+.mljr-context-menu-divider {
+  height: 1px;
+  margin: var(--mljr-space-1) var(--mljr-space-1);
+  background: var(--mljr-border);
+}
+
+/* Dark mode */
+.dark .mljr-context-menu,
+[data-theme="dark"] .mljr-context-menu {
+  background: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow-lg);
+}
+
+.dark .mljr-context-menu-item:hover:not(:disabled),
+[data-theme="dark"] .mljr-context-menu-item:hover:not(:disabled) {
+  background: var(--mljr-bg-tertiary);
+  color: var(--mljr-primary-400);
+}

package/src/components/cookie-banner.css

@@ -0,0 +1,285 @@
+/* ============================================
+   Cookie Banner — GDPR consent UI
+   ============================================ */
+
+/* --- Banner bar (bottom / top) --- */
+.mljr-cookie-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 900;
+  padding: var(--mljr-space-4) var(--mljr-space-6);
+  background: var(--mljr-surface);
+  border-top: 1px solid var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mljr-space-4);
+  animation: mljr-cookie-slide-up 0.3s ease-out;
+}
+
+.mljr-cookie-banner--top {
+  bottom: auto;
+  top: 0;
+  border-top: none;
+  border-bottom: 1px solid var(--mljr-border);
+  animation: mljr-cookie-slide-down 0.3s ease-out;
+}
+
+@keyframes mljr-cookie-slide-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+@keyframes mljr-cookie-slide-down {
+  from { transform: translateY(-100%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}
+
+.mljr-cookie-banner__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mljr-cookie-banner__title {
+  font-size: var(--mljr-text-base);
+  font-weight: 700;
+  color: var(--mljr-text);
+  margin: 0 0 var(--mljr-space-1) 0;
+}
+
+.mljr-cookie-banner__desc {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.mljr-cookie-banner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mljr-space-2);
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* --- Settings overlay --- */
+.mljr-cookie-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 950;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mljr-space-4);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+  animation: mljr-fade-in 0.2s ease;
+}
+
+@keyframes mljr-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.mljr-cookie-settings {
+  background: var(--mljr-surface);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  padding: var(--mljr-space-6);
+  width: 100%;
+  max-width: 560px;
+  max-height: 80vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-5);
+}
+
+.mljr-cookie-settings__header {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-cookie-settings__back {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--mljr-text-muted);
+  padding: var(--mljr-space-1);
+  border-radius: var(--mljr-radius-sm);
+  display: flex;
+  align-items: center;
+  transition: color 0.15s, background 0.15s;
+}
+.mljr-cookie-settings__back:hover {
+  color: var(--mljr-text);
+  background: var(--mljr-surface-alt);
+}
+
+.mljr-cookie-settings__title {
+  font-size: var(--mljr-text-lg);
+  font-weight: 700;
+  color: var(--mljr-text);
+  margin: 0;
+}
+
+/* --- Category list --- */
+.mljr-cookie-categories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-cookie-category {
+  border: 1px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-md);
+  padding: var(--mljr-space-4);
+  background: var(--mljr-surface-alt);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mljr-space-4);
+}
+
+.mljr-cookie-category__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.mljr-cookie-category__name {
+  font-size: var(--mljr-text-sm);
+  font-weight: 600;
+  color: var(--mljr-text);
+  margin: 0 0 var(--mljr-space-1) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+}
+
+.mljr-cookie-category__required-badge {
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  color: var(--mljr-primary-600);
+  background: var(--mljr-primary-100);
+  padding: 1px 6px;
+  border-radius: var(--mljr-radius-full);
+}
+
+.mljr-cookie-category__desc {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Toggle (reuse switch-like pattern) */
+.mljr-cookie-toggle {
+  flex-shrink: 0;
+  position: relative;
+  width: 40px;
+  height: 22px;
+}
+
+.mljr-cookie-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.mljr-cookie-toggle__track {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--mljr-radius-full);
+  background: var(--mljr-border);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.mljr-cookie-toggle input:checked ~ .mljr-cookie-toggle__track {
+  background: var(--mljr-primary-500);
+}
+
+.mljr-cookie-toggle input:disabled ~ .mljr-cookie-toggle__track {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mljr-cookie-toggle__thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--mljr-radius-full);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  pointer-events: none;
+  transition: transform 0.2s;
+}
+
+.mljr-cookie-toggle input:checked ~ .mljr-cookie-toggle__track .mljr-cookie-toggle__thumb {
+  transform: translateX(18px);
+}
+
+/* --- Settings footer --- */
+.mljr-cookie-settings__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mljr-space-2);
+  justify-content: flex-end;
+  padding-top: var(--mljr-space-3);
+  border-top: 1px solid var(--mljr-border);
+}
+
+/* --- Floating settings button (bottom-left) --- */
+.mljr-cookie-fab {
+  position: fixed;
+  bottom: var(--mljr-space-4);
+  left: var(--mljr-space-4);
+  z-index: 800;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--mljr-radius-full);
+  background: var(--mljr-surface);
+  border: 1px solid var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--mljr-text-muted);
+  transition: box-shadow 0.2s, color 0.2s, transform 0.15s;
+}
+
+.mljr-cookie-fab:hover {
+  box-shadow: var(--mljr-clay-shadow);
+  color: var(--mljr-text);
+  transform: translateY(-2px);
+}
+
+/* --- Dark mode --- */
+.dark .mljr-cookie-category__required-badge {
+  background: color-mix(in srgb, var(--mljr-primary-600) 20%, transparent);
+  color: var(--mljr-primary-400);
+}
+
+/* --- Responsive --- */
+@media (max-width: 640px) {
+  .mljr-cookie-banner {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--mljr-space-4);
+  }
+
+  .mljr-cookie-banner__actions {
+    flex-direction: column;
+  }
+
+  .mljr-cookie-settings {
+    max-height: 90vh;
+  }
+}

package/src/components/diff-viewer.css

@@ -0,0 +1,199 @@
+/* ============================================
+   DiffViewer - Code/text diff display
+   ============================================ */
+
+.mljr-diff {
+  border-radius: var(--mljr-radius-md);
+  border: 1px solid var(--mljr-border);
+  overflow: hidden;
+  font-family: var(--mljr-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.65;
+  background: var(--mljr-surface);
+}
+
+/* Header bar */
+.mljr-diff-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.875rem;
+  background: var(--mljr-surface-2);
+  border-bottom: 1px solid var(--mljr-border);
+  font-family: var(--mljr-font-body);
+  font-size: 0.8125rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.mljr-diff-title {
+  font-weight: 600;
+  color: var(--mljr-text);
+}
+
+.mljr-diff-stats {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.mljr-diff-stat-added {
+  color: #16a34a;
+  font-weight: 600;
+}
+
+.mljr-diff-stat-removed {
+  color: #dc2626;
+  font-weight: 600;
+}
+
+.dark .mljr-diff-stat-added  { color: #4ade80; }
+.dark .mljr-diff-stat-removed { color: #f87171; }
+
+/* Mode toggle tabs */
+.mljr-diff-tabs {
+  display: flex;
+  gap: 0.125rem;
+  background: var(--mljr-surface-3, var(--mljr-surface));
+  border: 1px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-sm);
+  padding: 2px;
+}
+
+.mljr-diff-tab {
+  padding: 0.2rem 0.6rem;
+  border-radius: calc(var(--mljr-radius-sm) - 2px);
+  font-size: 0.75rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: var(--mljr-text-muted);
+  transition: background 150ms, color 150ms;
+  font-family: var(--mljr-font-body);
+}
+
+.mljr-diff-tab:hover { background: var(--mljr-surface-2); }
+
+.mljr-diff-tab-active {
+  background: var(--mljr-surface);
+  color: var(--mljr-text);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,.08);
+}
+
+/* ── Unified (inline) mode ── */
+.mljr-diff-unified {
+  overflow-x: auto;
+}
+
+.mljr-diff-line {
+  display: flex;
+  align-items: stretch;
+  min-width: max-content;
+}
+
+.mljr-diff-line-added    { background: rgba(22, 163, 74,  0.10); }
+.mljr-diff-line-removed  { background: rgba(220, 38, 38,  0.10); }
+.dark .mljr-diff-line-added   { background: rgba(22, 163, 74,  0.14); }
+.dark .mljr-diff-line-removed { background: rgba(220, 38, 38, 0.14); }
+
+.mljr-diff-gutter {
+  min-width: 2.5rem;
+  text-align: right;
+  padding: 0 0.5rem;
+  color: var(--mljr-text-muted);
+  user-select: none;
+  flex-shrink: 0;
+  border-right: 1px solid var(--mljr-border);
+  font-size: 0.75rem;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.mljr-diff-sign {
+  width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
+  font-weight: 700;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mljr-diff-line-added   .mljr-diff-sign { color: #16a34a; }
+.mljr-diff-line-removed .mljr-diff-sign { color: #dc2626; }
+.dark .mljr-diff-line-added   .mljr-diff-sign { color: #4ade80; }
+.dark .mljr-diff-line-removed .mljr-diff-sign { color: #f87171; }
+
+.mljr-diff-code {
+  padding: 0 0.875rem;
+  white-space: pre;
+  flex: 1;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+/* ── Split (side-by-side) mode ── */
+.mljr-diff-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow-x: auto;
+}
+
+.mljr-diff-split-col {
+  overflow: hidden;
+  min-width: 0;
+}
+
+.mljr-diff-split-col + .mljr-diff-split-col {
+  border-left: 2px solid var(--mljr-border);
+}
+
+.mljr-diff-split-label {
+  padding: 0.375rem 0.875rem;
+  background: var(--mljr-surface-2);
+  border-bottom: 1px solid var(--mljr-border);
+  font-family: var(--mljr-font-body);
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--mljr-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Empty / identical */
+.mljr-diff-empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--mljr-text-muted);
+  font-family: var(--mljr-font-body);
+}
+
+/* ── Syntax Highlighting Tokens ── */
+.mljr-diff-token-keyword  { color: #c792ea; font-weight: 600; }
+.mljr-diff-token-string   { color: #c3e88d; }
+.mljr-diff-token-comment  { color: #546e7a; font-style: italic; }
+.mljr-diff-token-number   { color: #f78c6c; }
+.mljr-diff-token-function { color: #82aaff; }
+.mljr-diff-token-type     { color: #ffcb6b; }
+.mljr-diff-token-operator { color: #89ddff; }
+.mljr-diff-token-tag      { color: #f07178; }
+.mljr-diff-token-attr     { color: #ffcb6b; }
+.mljr-diff-token-punct    { color: #89ddff; }
+
+/* Light mode overrides */
+:root:not(.dark) .mljr-diff-token-keyword  { color: #7c3aed; }
+:root:not(.dark) .mljr-diff-token-string   { color: #16a34a; }
+:root:not(.dark) .mljr-diff-token-comment  { color: #78716c; }
+:root:not(.dark) .mljr-diff-token-number   { color: #c2410c; }
+:root:not(.dark) .mljr-diff-token-function { color: #1d4ed8; }
+:root:not(.dark) .mljr-diff-token-type     { color: #b45309; }
+:root:not(.dark) .mljr-diff-token-operator { color: #0891b2; }
+:root:not(.dark) .mljr-diff-token-tag      { color: #dc2626; }
+:root:not(.dark) .mljr-diff-token-attr     { color: #92400e; }
+:root:not(.dark) .mljr-diff-token-punct    { color: #0891b2; }