juxscript 1.0.55 → 1.0.57

package/presets/default/layout.css

@@ -412,4 +412,1021 @@ li {
   line-height: 1.6;
   color: var(--color-text-secondary);
   margin-bottom: var(--space-sm);
+}
+
+/* ============================================
+   COMPONENT STYLES (Extracted from TypeScript)
+   ============================================ */
+
+/* Alert Component */
+.jux-alert {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-md);
+    position: relative;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.jux-alert-info {
+    background: #dbeafe;
+    border-left: 4px solid #3b82f6;
+    color: #1e40af;
+}
+
+.jux-alert-success {
+    background: #d1fae5;
+    border-left: 4px solid #10b981;
+    color: #065f46;
+}
+
+.jux-alert-warning {
+    background: #fef3c7;
+    border-left: 4px solid #f59e0b;
+    color: #92400e;
+}
+
+.jux-alert-error {
+    background: #fee2e2;
+    border-left: 4px solid #ef4444;
+    color: #991b1b;
+}
+
+.jux-alert-icon {
+    flex-shrink: 0;
+}
+
+.jux-alert-content {
+    flex: 1;
+    font-size: 14px;
+}
+
+.jux-alert-close {
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.jux-alert-close:hover {
+    opacity: 1;
+}
+
+/* Badge Component */
+.jux-badge {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-md);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-base);
+}
+
+.jux-badge-pill {
+    border-radius: 10rem;
+}
+
+.jux-badge-default {
+    color: #374151;
+    background-color: #e5e7eb;
+}
+
+.jux-badge-success {
+    color: #065f46;
+    background-color: #d1fae5;
+}
+
+.jux-badge-warning {
+    color: #92400e;
+    background-color: #fef3c7;
+}
+
+.jux-badge-error {
+    color: #991b1b;
+    background-color: #fee2e2;
+}
+
+.jux-badge-info {
+    color: #1e40af;
+    background-color: #dbeafe;
+}
+
+/* Button Component - Add missing variants */
+.jux-button-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.jux-button-danger:hover {
+    background: #dc2626;
+}
+
+.jux-button-link {
+    background: transparent;
+    color: #3b82f6;
+    text-decoration: underline;
+}
+
+.jux-button-link:hover {
+    color: #2563eb;
+}
+
+.jux-button-reset,
+.jux-button-submit {
+    /* Use default button styles */
+}
+
+/* Card Component - Add missing classes */
+.jux-card-icon {
+    flex-shrink: 0;
+    margin-right: var(--space-md);
+}
+
+.jux-card-hoverable {
+    transition: box-shadow var(--transition-base), transform var(--transition-base);
+}
+
+.jux-card-hoverable:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+/* Checkbox Component - Add container class */
+.jux-checkbox-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.jux-checkbox-checkmark {
+    /* Alias for jux-checkbox-mark */
+}
+
+/* Datepicker Component - Add missing classes */
+.jux-datepicker-calendar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: var(--space-xs);
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    padding: var(--space-lg);
+    z-index: 1000;
+}
+
+.jux-datepicker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-md);
+}
+
+.jux-datepicker-nav {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.125rem;
+    padding: var(--space-xs) var(--space-sm);
+    color: var(--color-text-secondary);
+    transition: color var(--transition-base);
+}
+
+.jux-datepicker-nav:hover {
+    color: var(--color-text-primary);
+}
+
+.jux-datepicker-month {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--color-text-primary);
+}
+
+.jux-datepicker-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--space-xs);
+}
+
+.jux-datepicker-day {
+    padding: var(--space-sm);
+    text-align: center;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    font-size: 0.875rem;
+    transition: background-color var(--transition-base);
+}
+
+.jux-datepicker-day:hover {
+    background-color: var(--color-surface-hover);
+}
+
+.jux-datepicker-day-selected {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.jux-datepicker-day-disabled {
+    color: var(--color-text-tertiary);
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/* Dialog Component - Add missing variant classes */
+.jux-dialog-default {
+    /* Uses base dialog styles */
+}
+
+.jux-dialog-warning {
+    border-top: 4px solid #f59e0b;
+}
+
+.jux-dialog-danger {
+    border-top: 4px solid #ef4444;
+}
+
+.jux-dialog-button-cancel {
+    background: var(--color-surface-hover);
+    color: var(--color-text-primary);
+    border: var(--border-width) solid var(--color-border);
+}
+
+/* Divider Component - Add variants */
+.jux-divider-default {
+    border-top: var(--border-width) solid var(--color-border);
+}
+
+.jux-divider-dashed {
+    border-top: var(--border-width) dashed var(--color-border);
+}
+
+.jux-divider-dotted {
+    border-top: var(--border-width) dotted var(--color-border);
+}
+
+.jux-divider-text {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin: var(--space-2xl) 0;
+    color: var(--color-text-secondary);
+    font-size: 0.875rem;
+}
+
+.jux-divider-text::before,
+.jux-divider-text::after {
+    content: '';
+    flex: 1;
+    border-top: var(--border-width) solid var(--color-border);
+}
+
+.jux-divider-text::before {
+    margin-right: var(--space-md);
+}
+
+.jux-divider-text::after {
+    margin-left: var(--space-md);
+}
+
+/* Dropdown Component - Add divider */
+.jux-dropdown-divider {
+    height: var(--border-width);
+    background: var(--color-border);
+    margin: var(--space-xs) 0;
+}
+
+/* Element Component - Semantic HTML elements */
+.jux-header,
+.jux-footer,
+.jux-main,
+.jux-aside,
+.jux-section,
+.jux-article {
+    display: block;
+}
+
+/* Error Handler Component */
+.jux-error-container {
+    position: fixed;
+    top: var(--space-lg);
+    right: var(--space-lg);
+    max-width: 500px;
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid #ef4444;
+    border-radius: var(--radius-lg);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+    z-index: 9999;
+    animation: slideIn 0.3s ease-out;
+}
+
+.jux-error-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-lg);
+    border-bottom: var(--border-width) solid var(--color-border);
+    background: #fee2e2;
+}
+
+.jux-error-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #991b1b;
+}
+
+.jux-error-close {
+    background: transparent;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #991b1b;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.jux-error-message {
+    padding: var(--space-lg);
+    color: var(--color-text-primary);
+    font-size: 0.875rem;
+    font-family: var(--font-family-mono);
+}
+
+.jux-error-stack,
+.jux-error-context,
+.jux-error-location,
+.jux-error-time {
+    padding: var(--space-md) var(--space-lg);
+    border-top: var(--border-width) solid var(--color-border);
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    font-family: var(--font-family-mono);
+}
+
+/* File Upload Component */
+.jux-fileupload-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--space-md);
+}
+
+.jux-fileupload-button {
+    padding: var(--space-sm) var(--space-lg);
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: background-color var(--transition-base);
+}
+
+.jux-fileupload-button:hover {
+    background: #2563eb;
+}
+
+.jux-fileupload-icon {
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--space-md);
+    color: var(--color-text-secondary);
+}
+
+.jux-fileupload-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-md);
+    background: var(--color-surface-hover);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-sm);
+}
+
+.jux-fileupload-list {
+    margin-top: var(--space-lg);
+}
+
+/* Heading Component - Add level variants */
+.jux-heading-1 { font-size: 2rem; }
+.jux-heading-2 { font-size: 1.5rem; }
+.jux-heading-3 { font-size: 1.25rem; }
+.jux-heading-4 { font-size: 1.125rem; }
+.jux-heading-5 { font-size: 1rem; }
+.jux-heading-6 { font-size: 0.875rem; }
+
+/* Hero Component - Add all variants */
+.jux-hero-centered {
+    text-align: center;
+}
+
+.jux-hero-centered .jux-hero-content {
+    align-items: center;
+}
+
+/* KPI Card Component */
+.jux-kpicard {
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+}
+
+.jux-kpicard-title {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-sm);
+}
+
+.jux-kpicard-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.jux-kpicard-delta {
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.jux-kpicard-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/* List Component - Add all variant classes */
+.jux-list-wrapper {
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.jux-list-header {
+    padding: var(--space-lg);
+    background: var(--color-surface-base);
+    border-bottom: var(--border-width) solid var(--color-border);
+    font-weight: 600;
+    color: var(--color-text-primary);
+}
+
+.jux-list-item {
+    padding: var(--space-lg);
+    border-bottom: var(--border-width) solid var(--color-border);
+    transition: background-color var(--transition-base);
+}
+
+.jux-list-item:last-child {
+    border-bottom: none;
+}
+
+.jux-list-item-bordered {
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-sm);
+}
+
+.jux-list-item-hoverable:hover {
+    background-color: var(--color-surface-hover);
+    cursor: pointer;
+}
+
+.jux-list-item-selected {
+    background-color: #eff6ff;
+    border-left: 4px solid #3b82f6;
+}
+
+.jux-list-item-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.jux-list-item-striped:nth-child(even) {
+    background-color: var(--color-surface-base);
+}
+
+.jux-list-item-icon {
+    margin-right: var(--space-md);
+    color: var(--color-text-secondary);
+}
+
+.jux-list-item-title {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.jux-list-item-text,
+.jux-list-item-body {
+    color: var(--color-text-secondary);
+    font-size: 0.875rem;
+}
+
+.jux-list-item-content {
+    flex: 1;
+}
+
+.jux-list-item-metadata {
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+    margin-top: var(--space-xs);
+}
+
+/* List item type variants */
+.jux-list-item-default { /* default styles */ }
+.jux-list-item-info { background-color: #eff6ff; }
+.jux-list-item-success { background-color: #f0fdf4; }
+.jux-list-item-warning { background-color: #fffbeb; }
+.jux-list-item-error { background-color: #fef2f2; }
+
+/* Loading Component - Add variants */
+.jux-loading-dots {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.jux-loading-dot {
+    width: 8px;
+    height: 8px;
+    background: #3b82f6;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.jux-loading-dot:nth-child(1) { animation-delay: -0.32s; }
+.jux-loading-dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+
+.jux-loading-pulse {
+    width: 40px;
+    height: 40px;
+    background: #3b82f6;
+    border-radius: 50%;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Menu Component */
+.jux-menu-button {
+    background: transparent;
+    border: none;
+    padding: var(--space-md);
+    cursor: pointer;
+    color: var(--color-text-primary);
+}
+
+.jux-menu-icon {
+    margin-right: var(--space-sm);
+}
+
+.jux-menu-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-tertiary);
+    text-transform: uppercase;
+    padding: var(--space-md);
+}
+
+.jux-menu-link {
+    display: flex;
+    align-items: center;
+    padding: var(--space-md);
+    color: var(--color-text-primary);
+    text-decoration: none;
+    transition: background-color var(--transition-base);
+}
+
+.jux-menu-link:hover {
+    background-color: var(--color-surface-hover);
+}
+
+.jux-menu-link-active {
+    background-color: #eff6ff;
+    color: #3b82f6;
+    font-weight: 600;
+}
+
+.jux-menu-submenu {
+    padding-left: var(--space-2xl);
+}
+
+/* Modal Component - Add variants */
+.jux-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.jux-modal {
+    background: var(--color-surface-elevated);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.jux-modal-header {
+    padding: var(--space-xl);
+    border-bottom: var(--border-width) solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.jux-modal-body {
+    padding: var(--space-xl);
+}
+
+.jux-modal-close {
+    background: transparent;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--color-text-secondary);
+}
+
+/* Nav Component - Add all variants */
+.jux-nav-brand {
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--color-text-primary);
+}
+
+.jux-nav-items {
+    display: flex;
+    gap: var(--space-md);
+    align-items: center;
+}
+
+.jux-nav-item-wrapper {
+    position: relative;
+}
+
+.jux-nav-item-active {
+    font-weight: 600;
+}
+
+.jux-nav-link {
+    padding: var(--space-md) var(--space-lg);
+    text-decoration: none;
+    color: var(--color-text-primary);
+    transition: color var(--transition-base);
+}
+
+.jux-nav-link:hover {
+    color: #3b82f6;
+}
+
+.jux-nav-link-active {
+    color: #3b82f6;
+    font-weight: 600;
+}
+
+.jux-nav-tabs {
+    border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-nav-tabs .jux-nav-link {
+    border-bottom: 2px solid transparent;
+}
+
+.jux-nav-tabs .jux-nav-link-active {
+    border-bottom-color: #3b82f6;
+}
+
+.jux-nav-pills .jux-nav-link {
+    border-radius: var(--radius-md);
+}
+
+.jux-nav-pills .jux-nav-link-active {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.jux-nav-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+/* Page Helper */
+.jux-page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Progress Component - Fix class name */
+.jux-progress-track {
+    /* Alias for jux-progress-bar */
+    width: 100%;
+    height: 8px;
+    background-color: var(--color-surface-base);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+/* Radio Component - Add orientation classes */
+.jux-radio-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.jux-radio-vertical {
+    flex-direction: column;
+}
+
+/* Script/Style placeholders */
+.jux-script-,
+.jux-style- {
+    /* These are injected dynamically */
+}
+
+/* Sidebar Component - Add toggle */
+.jux-sidebar-toggle {
+    position: absolute;
+    top: var(--space-lg);
+    right: calc(var(--space-lg) * -1);
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    padding: var(--space-sm);
+    cursor: pointer;
+}
+
+/* Table Component - Add missing classes */
+.jux-table-wrapper {
+    overflow-x: auto;
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-lg);
+}
+
+.jux-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.jux-table-striped tbody tr:nth-child(even) {
+    background-color: var(--color-surface-base);
+}
+
+.jux-table-hoverable tbody tr:hover {
+    background-color: var(--color-surface-hover);
+}
+
+.jux-table-bordered th,
+.jux-table-bordered td {
+    border: var(--border-width) solid var(--color-border);
+}
+
+.jux-table-row-selected {
+    background-color: #eff6ff !important;
+}
+
+.jux-bulk-checkbox {
+    margin: 0;
+}
+
+.jux-table-filter {
+    padding: var(--space-lg);
+    border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-table-pagination {
+    padding: var(--space-lg);
+    border-top: var(--border-width) solid var(--color-border);
+    display: flex;
+    justify-content: center;
+    gap: var(--space-sm);
+}
+
+/* Tabs Component */
+.jux-tabs-list {
+    display: flex;
+    gap: var(--space-sm);
+    border-bottom: var(--border-width) solid var(--color-border);
+    margin-bottom: var(--space-lg);
+}
+
+.jux-tabs-button {
+    padding: var(--space-md) var(--space-lg);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    font-weight: 500;
+    transition: all var(--transition-base);
+}
+
+.jux-tabs-button:hover {
+    color: var(--color-text-primary);
+}
+
+.jux-tabs-button-active {
+    color: #3b82f6;
+    border-bottom-color: #3b82f6;
+}
+
+.jux-tabs-panels {
+    position: relative;
+}
+
+.jux-tabs-panel {
+    display: none;
+}
+
+.jux-tabs-panel-active {
+    display: block;
+}
+
+/* Theme Toggle Component */
+.jux-theme {
+    /* Theme wrapper class */
+}
+
+.jux-theme-toggle {
+    cursor: pointer;
+}
+
+.jux-theme-toggle-button {
+    background: var(--color-surface-hover);
+    border: var(--border-width) solid var(--color-border);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+}
+
+.jux-theme-toggle-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: var(--space-xs);
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    min-width: 150px;
+    z-index: 1000;
+}
+
+.jux-theme-toggle-select {
+    /* Native select styling */
+}
+
+.jux-theme-toggle-cycle {
+    /* Button that cycles through themes */
+}
+
+/* Token Calculator Component */
+.jux-token-calculator {
+    background: var(--color-surface-elevated);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+}
+
+.jux-token-calculator-header {
+    margin-bottom: var(--space-xl);
+    padding-bottom: var(--space-lg);
+    border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-token-calculator-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+
+.jux-token-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.jux-token-details {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.jux-token-row-highlight {
+    background-color: #fffbeb;
+}
+
+.jux-token-bar-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.jux-token-bar-row {
+    display: flex;
+    gap: var(--space-xs);
+    align-items: center;
+}
+
+.jux-token-bar-label {
+    min-width: 100px;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.jux-token-bar-jux {
+    height: 24px;
+    background: #3b82f6;
+    border-radius: var(--radius-sm);
+}
+
+.jux-token-bar-other {
+    height: 24px;
+    background: #e5e7eb;
+    border-radius: var(--radius-sm);
+}
+
+.jux-token-bar-value {
+    min-width: 60px;
+    text-align: right;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+/* View Component */
+.jux-view {
+    display: flex;
+    flex-direction: column;
+}
+
+.jux-view-header {
+    padding: var(--space-xl);
+    border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-view-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.jux-view-description {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.jux-view-content {
+    padding: var(--space-xl);
+}
+
+.jux-view-item {
+    padding: var(--space-lg);
+    border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-view-item:last-child {
+    border-bottom: none;
 }