juxscript 1.0.19 → 1.0.21

package/presets/base.css

@@ -0,0 +1,1166 @@
+
+/* ============================================
+   GLOBAL RESET & BASE STYLES
+   ============================================ */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  transition: background-color var(--transition-base), color var(--transition-base);
+  overflow: hidden;
+}
+
+/* ============================================
+   APP CONTAINER - Main Layout Grid
+   ============================================ */
+#app {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header header"
+    "sidebar main aside"
+    "footer footer footer";
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER - Top Navigation Bar
+   ============================================ */
+#appheader {
+  grid-area: header;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-lg);
+  height: 48px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+
+#appheader-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--space-xl);
+}
+
+#appheader-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+}
+
+#appheader-logo:hover {
+  background: var(--color-surface-hover);
+}
+
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+#appheader-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+/* ============================================
+   SIDEBAR - Left Navigation
+   ============================================ */
+#appsidebar {
+  grid-area: sidebar;
+  width: 260px;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--transition-base), background-color var(--transition-base);
+}
+
+#appsidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-lg);
+}
+
+/* Custom scrollbar for sidebar */
+#appsidebar-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+#appsidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#appsidebar-content::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+#appsidebar-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+
+#appsidebar-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+/* Menu items */
+#appsidebar-menu .jux-menu-item {
+  list-style: none;
+}
+
+#appsidebar-menu .jux-menu-button,
+#appsidebar-menu a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+}
+
+#appsidebar-menu .jux-menu-button:hover,
+#appsidebar-menu a:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+#appsidebar-menu .jux-menu-button:active,
+#appsidebar-menu a:active {
+  background: var(--color-surface-active);
+}
+
+/* Active menu item */
+#appsidebar-menu .jux-menu-item.active .jux-menu-button,
+#appsidebar-menu .jux-menu-item.active a {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Submenu */
+#appsidebar-menu .jux-menu-submenu {
+  display: none;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding-left: var(--space-xl);
+  margin-top: var(--space-xs);
+  border-left: 2px solid var(--color-border);
+  margin-left: var(--space-lg);
+}
+
+#appsidebar-menu .jux-menu-submenu.open {
+  display: flex;
+}
+
+#appsidebar-menu .jux-menu-submenu .jux-menu-button,
+#appsidebar-menu .jux-menu-submenu a {
+  font-size: var(--font-size-xs);
+  padding: var(--space-xs) var(--space-md);
+}
+
+#appsidebar-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-elevated);
+  transition: border-color var(--transition-base);
+}
+
+/* ============================================
+   MAIN CONTENT - Center Area
+   ============================================ */
+#appmain {
+  grid-area: main;
+  background: var(--color-background);
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+#appmain-content {
+  flex: 1;
+  padding: var(--space-3xl) var(--space-2xl);
+  max-width: 1600px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Custom scrollbar for main content */
+#appmain::-webkit-scrollbar {
+  width: 8px;
+}
+
+#appmain::-webkit-scrollbar-track {
+  background: var(--color-surface-base);
+}
+
+#appmain::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+#appmain::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+
+/* ============================================
+   RIGHT SIDEBAR (Aside) - Optional Panel
+   ============================================ */
+#appaside {
+  grid-area: aside;
+  width: 280px;
+  background: var(--color-surface-base);
+  border-left: var(--border-width) solid var(--color-border);
+  display: none; /* Hidden by default */
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--transition-base), background-color var(--transition-base);
+}
+
+#appaside.show {
+  display: flex;
+}
+
+#appaside.collapsed {
+  width: 0;
+  border: none;
+}
+
+#appaside-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+#appaside-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-lg);
+}
+
+#appaside-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+#appaside-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#appaside-content::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+#appaside-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+
+#appaside-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   FOOTER - Bottom Bar
+   ============================================ */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-lg) var(--space-2xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+
+#appfooter-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+#appfooter-legal {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+#appfooter a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+#appfooter a:hover {
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   THEME TOGGLE - Dark/Light Mode Button
+   ============================================ */
+#theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+#theme-toggle button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: var(--color-surface-hover);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-size: var(--font-size-lg);
+}
+
+#theme-toggle button:hover {
+  background: var(--color-surface-active);
+  color: var(--color-text-primary);
+  transform: scale(1.05);
+}
+
+#theme-toggle button:active {
+  transform: scale(0.95);
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 1024px) {
+  #appaside {
+    display: none;
+  }
+  
+  #app {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "header header"
+      "sidebar main"
+      "footer footer";
+  }
+}
+
+@media (max-width: 768px) {
+  #appsidebar {
+    position: fixed;
+    left: 0;
+    top: 48px;
+    bottom: 0;
+    z-index: 90;
+    transform: translateX(-100%);
+    transition: transform var(--transition-base);
+  }
+  
+  #appsidebar.open {
+    transform: translateX(0);
+  }
+  
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  
+  #appmain-content {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+  
+  #appheader {
+    padding: 0 var(--space-md);
+  }
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-base) ease-out;
+}
+
+.animate-slide-in {
+  animation: slideIn var(--transition-base) ease-out;
+}
+
+/* ============================================
+   JUX COMPONENT STYLES
+   ============================================ */
+
+/* Hero Component */
+.jux-hero {
+  padding: var(--space-3xl) 0;
+  margin-bottom: var(--space-2xl);
+}
+
+.jux-hero-title {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-md);
+  line-height: var(--line-height-tight);
+}
+
+.jux-hero-subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+/* Hero centered variant */
+.jux-hero.jux-hero-centered {
+  text-align: center;
+}
+
+.jux-hero.jux-hero-centered .jux-hero-title,
+.jux-hero.jux-hero-centered .jux-hero-subtitle {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Card Component */
+.jux-card {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.jux-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-brand), var(--color-info));
+  transform: translateY(-100%);
+  transition: transform var(--transition-base);
+}
+
+.jux-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border-hover);
+  transform: translateY(-2px);
+}
+
+.jux-card:hover::before {
+  transform: translateY(0);
+}
+
+.jux-card-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-lg);
+  letter-spacing: -0.01em;
+}
+
+.jux-card-icon {
+  position: absolute;
+  top: var(--space-xl);
+  right: var(--space-xl);
+  font-size: var(--font-size-2xl);
+  line-height: 1;
+  opacity: 0.8;
+  transition: opacity var(--transition-fast);
+}
+
+.jux-card:hover .jux-card-icon {
+  opacity: 1;
+}
+
+.jux-card-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.jux-card-body .jux-card-title {
+  display: block;
+  margin-top: 0;
+}
+
+.jux-card-content {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  text-align: center;
+  padding: var(--space-xl) 0;
+}
+
+.jux-card-body .jux-card-content {
+  font-size: var(--font-size-sm);
+  text-align: left;
+  padding: 0;
+  font-weight: var(--font-weight-normal);
+}
+
+/* List Component */
+.jux-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.jux-list-wrapper {
+  /* No extra styling - list renders inside cards */
+}
+
+.jux-list-header {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-lg);
+  letter-spacing: -0.01em;
+}
+
+.jux-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.jux-list-item:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+  transform: translateX(4px);
+  box-shadow: var(--shadow-sm);
+}
+
+.jux-list-item::before {
+  content: attr(data-icon);
+  font-size: var(--font-size-xl);
+  flex-shrink: 0;
+}
+
+/* Container Component */
+.jux-container {
+  width: 100%;
+}
+
+/* Button Component */
+.jux-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.jux-button::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.1);
+  transform: translate(-50%, -50%);
+  transition: width var(--transition-slow), height var(--transition-slow);
+}
+
+.jux-button:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.jux-button:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+.jux-button-primary {
+  background: var(--color-brand);
+  color: var(--color-text-inverse);
+  border-color: var(--color-brand);
+}
+
+.jux-button-primary:hover {
+  background: var(--color-brand-hover);
+  border-color: var(--color-brand-hover);
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+.jux-button:active {
+  transform: translateY(0);
+}
+
+.jux-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Table Component */
+.jux-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+}
+
+.jux-table thead {
+  background: var(--color-surface-base);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.jux-table th {
+  padding: var(--space-md) var(--space-lg);
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-table td {
+  padding: var(--space-md) var(--space-lg);
+  color: var(--color-text-primary);
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-table tbody tr {
+  transition: background-color var(--transition-fast);
+}
+
+.jux-table tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Alternating row colors for better readability */
+.jux-table tbody tr:nth-child(even) {
+  background: var(--color-surface-base);
+}
+
+.jux-table tbody tr:nth-child(even):hover {
+  background: var(--color-surface-hover);
+}
+
+/* Input Component */
+.jux-input {
+  margin-bottom: var(--space-lg);
+  position: relative;
+}
+
+.jux-input-label {
+  display: block;
+  margin-bottom: var(--space-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+}
+
+.jux-input-required {
+  color: var(--color-error);
+}
+
+.jux-input-element {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  box-sizing: border-box;
+  font-family: var(--font-family-base);
+}
+
+.jux-input-element:hover {
+  border-color: var(--color-border-hover);
+}
+
+.jux-input-element:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 3px var(--color-brand-subtle);
+}
+
+.jux-input-element:disabled {
+  background-color: var(--color-surface-hover);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.jux-input-element.jux-input-invalid {
+  border-color: var(--color-error);
+}
+
+.jux-input-element.jux-input-invalid:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.jux-input-element::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.jux-input-error {
+  color: var(--color-error);
+  font-size: var(--font-size-xs);
+  margin-top: var(--space-xs);
+}
+
+.jux-input-counter {
+  text-align: right;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-xs);
+}
+
+.jux-input-icon {
+  position: absolute;
+  left: var(--space-lg);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+  font-size: var(--font-size-lg);
+  z-index: 1;
+}
+
+.jux-input-container.jux-input-with-icon .jux-input-element {
+  padding-left: calc(var(--space-lg) * 2 + var(--font-size-lg));
+}
+
+.jux-input-container:not(.jux-input-with-icon) .jux-input-element {
+  padding-left: var(--space-lg);
+}
+
+/* File Upload Component */
+.jux-fileupload {
+  margin-bottom: var(--space-lg);
+  position: relative;
+}
+
+.jux-fileupload-input {
+  display: none;
+}
+
+.jux-fileupload-dropzone {
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3xl) var(--space-2xl);
+  text-align: center;
+  background: var(--color-surface-elevated);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  position: relative;
+}
+
+.jux-fileupload-dropzone:hover {
+  border-color: var(--color-brand);
+  background: var(--color-surface-hover);
+}
+
+.jux-fileupload-dropzone-active {
+  border-color: var(--color-brand);
+  background: var(--color-brand-subtle);
+  transform: scale(1.02);
+}
+
+.jux-fileupload-icon {
+  font-size: var(--font-size-3xl);
+  margin-bottom: var(--space-md);
+  opacity: 0.5;
+}
+
+.jux-fileupload-text {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.jux-fileupload-list {
+  margin-top: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.jux-fileupload-file {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.jux-fileupload-file:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+}
+
+.jux-fileupload-file-name {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jux-fileupload-file-size {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.jux-fileupload-file-remove {
+  padding: var(--space-xs) var(--space-sm);
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  font-size: var(--font-size-xl);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jux-fileupload-file-remove:hover {
+  background: var(--color-surface-active);
+  color: var(--color-danger);
+}
+
+/* Progress Component */
+.jux-progress {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-progress-label {
+  margin-bottom: var(--space-sm);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+.jux-progress-track {
+  width: 100%;
+  height: 8px;
+  background: var(--color-surface-base);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  position: relative;
+}
+
+.jux-progress-bar {
+  height: 100%;
+  background: var(--color-brand);
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slow);
+  position: relative;
+}
+
+.jux-progress-bar-default {
+  background: var(--color-brand);
+}
+
+.jux-progress-bar-success {
+  background: var(--color-success);
+}
+
+.jux-progress-bar-warning {
+  background: var(--color-warning);
+}
+
+.jux-progress-bar-error {
+  background: var(--color-danger);
+}
+
+.jux-progress-bar-info {
+  background: var(--color-info);
+}
+
+.jux-progress-bar-striped {
+  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;
+}
+
+.jux-progress-bar-animated {
+  animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+  0% { background-position: 1rem 0; }
+  100% { background-position: 0 0; }
+}
+
+/* Progress size variants */
+.jux-progress-sm .jux-progress-track {
+  height: 4px;
+}
+
+.jux-progress-md .jux-progress-track {
+  height: 8px;
+}
+
+.jux-progress-lg .jux-progress-track {
+  height: 12px;
+}
+
+/* Alert Component */
+.jux-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid;
+  margin-bottom: var(--space-lg);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  position: relative;
+  animation: slideIn var(--transition-base) ease-out;
+  transition: all var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+}
+
+.jux-alert-icon {
+  flex-shrink: 0;
+  font-size: var(--font-size-xl);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jux-alert-content {
+  flex: 1;
+  color: inherit;
+  font-weight: var(--font-weight-medium);
+}
+
+.jux-alert-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: var(--font-size-2xl);
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  opacity: 0.6;
+}
+
+.jux-alert-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+  transform: scale(1.1);
+}
+
+.jux-alert-close:active {
+  transform: scale(0.95);
+}
+
+/* Alert Type Variants */
+.jux-alert-info {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: #3b82f6;
+}
+
+.jux-alert-success {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: #22c55e;
+}
+
+.jux-alert-warning {
+  background: rgba(251, 191, 36, 0.1);
+  border-color: rgba(251, 191, 36, 0.3);
+  color: #f59e0b;
+}
+
+.jux-alert-error {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+
+/* Dark mode adjustments for alerts */
+@media (prefers-color-scheme: dark) {
+  .jux-alert-info {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.4);
+    color: #60a5fa;
+  }
+
+  .jux-alert-success {
+    background: rgba(34, 197, 94, 0.15);
+    border-color: rgba(34, 197, 94, 0.4);
+    color: #4ade80;
+  }
+
+  .jux-alert-warning {
+    background: rgba(251, 191, 36, 0.15);
+    border-color: rgba(251, 191, 36, 0.4);
+    color: #fbbf24;
+  }
+
+  .jux-alert-error {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.4);
+    color: #f87171;
+  }
+}
+
+/* Alert animations */
+@keyframes alertSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes alertSlideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.jux-alert[style*="display: none"] {
+  animation: alertSlideOut var(--transition-fast) ease-out forwards;
+}