@arclux/arc-ui-html 1.0.0

package/css/spinner.css

@@ -0,0 +1,46 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-spinner */
+.arc-spinner { display: inline-flex; }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .arc-spinner .spinner {
+        border-radius: var(--radius-full);
+        border-style: solid;
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+        animation: spin 0.75s linear infinite;
+        box-sizing: border-box;
+      }
+
+      .arc-spinner[data-size="sm"] .spinner { width: 16px; height: 16px; border-width: 2px; }
+      .arc-spinner[data-size="md"] .spinner { width: 24px; height: 24px; border-width: 2.5px; }
+      .arc-spinner[data-size="lg"] .spinner { width: 40px; height: 40px; border-width: 3px; }
+
+      .arc-spinner[data-variant="primary"] .spinner {
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+      }
+
+      .arc-spinner[data-variant="secondary"] .spinner {
+        border-color: var(--accent-secondary);
+        border-top-color: transparent;
+      }
+
+      .arc-spinner[data-variant="white"] .spinner {
+        border-color: var(--text-primary);
+        border-top-color: transparent;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-spinner *,
+        .arc-spinner *::before,
+        .arc-spinner *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/stack.css

@@ -0,0 +1,38 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-stack */
+.arc-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        align-items: stretch;
+        justify-content: flex-start;
+      }
+
+      /* Direction */
+      .arc-stack[data-direction="horizontal"] { flex-direction: row; }
+      .arc-stack[data-direction="vertical"]   { flex-direction: column; }
+
+      /* Gap */
+      .arc-stack[data-gap="xs"]  { gap: var(--space-xs); }
+      .arc-stack[data-gap="sm"]  { gap: var(--space-sm); }
+      .arc-stack[data-gap="md"]  { gap: var(--space-md); }
+      .arc-stack[data-gap="lg"]  { gap: var(--space-lg); }
+      .arc-stack[data-gap="xl"]  { gap: var(--space-xl); }
+      .arc-stack[data-gap="2xl"] { gap: var(--space-2xl); }
+
+      /* Align */
+      .arc-stack[data-align="start"]   { align-items: flex-start; }
+      .arc-stack[data-align="center"]  { align-items: center; }
+      .arc-stack[data-align="end"]     { align-items: flex-end; }
+      .arc-stack[data-align="stretch"] { align-items: stretch; }
+
+      /* Justify */
+      .arc-stack[data-justify="start"]   { justify-content: flex-start; }
+      .arc-stack[data-justify="center"]  { justify-content: center; }
+      .arc-stack[data-justify="end"]     { justify-content: flex-end; }
+      .arc-stack[data-justify="between"] { justify-content: space-between; }
+      .arc-stack[data-justify="around"]  { justify-content: space-around; }
+
+      /* Wrap */
+      .arc-stack[wrap] { flex-wrap: wrap; }

package/css/stat.css

@@ -0,0 +1,42 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-stat */
+.arc-stat { display: block; }
+
+      .arc-stat .stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+        text-align: center;
+        padding: var(--space-lg) var(--space-md);
+      }
+
+      .arc-stat .stat__value {
+        font-size: clamp(32px, 4.5vw, 48px);
+        font-weight: 200;
+        letter-spacing: -1px;
+        line-height: 1;
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 16px rgba(var(--accent-primary-rgb),0.3))
+                drop-shadow(0 0 40px rgba(var(--accent-secondary-rgb),0.12));
+      }
+
+      .arc-stat .stat__rule {
+        width: 24px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
+        opacity: 0.4;
+      }
+
+      .arc-stat .stat__label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--label-inline-size);
+        letter-spacing: var(--label-inline-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }

package/css/status-bar.css

@@ -0,0 +1,50 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-status-bar */
+.arc-status-bar {
+        display: block;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .arc-status-bar([position='fixed']) {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+      }
+
+      .arc-status-bar .status-bar {
+        display: flex;
+        align-items: center;
+        height: 28px;
+        padding: 0 var(--space-sm);
+        background: var(--bg-deep);
+        border-top: 1px solid var(--border-subtle);
+        gap: var(--space-sm);
+      }
+
+      .arc-status-bar .status-bar__left {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-status-bar .status-bar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .arc-status-bar .status-bar__right {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }

package/css/stepper.css

@@ -0,0 +1,134 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-stepper */
+.arc-stepper { display: block; }
+
+      .arc-stepper .stepper {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-xs);
+      }
+
+      .arc-stepper .step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        padding: 0 var(--space-sm);
+      }
+
+      .arc-stepper .step__header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        position: relative;
+      }
+
+      .arc-stepper .step__circle {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--radius-full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-size: var(--text-sm);
+        font-weight: 700;
+        letter-spacing: 1px;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+        transition: background var(--transition-base),
+                    color var(--transition-base),
+                    border-color var(--transition-base),
+                    box-shadow var(--transition-base);
+        margin: 0 auto;
+        box-sizing: border-box;
+      }
+
+      /* Upcoming (default) */
+      .arc-stepper .step__circle {
+        background: var(--bg-elevated);
+        color: var(--text-ghost);
+        border: 1px solid var(--border-default);
+      }
+
+      /* Active */
+      .arc-stepper .step--active .step__circle {
+        background: transparent;
+        color: var(--accent-primary);
+        border: 2px solid var(--accent-primary);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      /* Completed */
+      .arc-stepper .step--completed .step__circle {
+        background: var(--accent-primary);
+        color: var(--text-primary);
+        border: 2px solid var(--accent-primary);
+      }
+
+      .arc-stepper .step__line {
+        position: absolute;
+        top: 50%;
+        height: 1px;
+        background: var(--border-default);
+        transform: translateY(-50%);
+      }
+
+      .arc-stepper .step__line--left {
+        left: calc(-1 * var(--space-xs) - var(--space-sm));
+        right: calc(50% + 20px);
+      }
+
+      .arc-stepper .step__line--right {
+        left: calc(50% + 20px);
+        right: calc(-1 * var(--space-xs) - var(--space-sm));
+      }
+
+      .arc-stepper .step--completed .step__line--left,
+      .arc-stepper .step--active .step__line--left {
+        background: var(--accent-primary);
+      }
+
+      .arc-stepper .step--completed .step__line--right {
+        background: var(--accent-primary);
+      }
+
+      .arc-stepper .step__label {
+        margin-top: var(--space-md);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        text-align: center;
+        transition: color var(--transition-base);
+      }
+
+      .arc-stepper .step--active .step__label {
+        color: var(--text-primary);
+      }
+
+      .arc-stepper .step--completed .step__label {
+        color: var(--text-secondary);
+      }
+
+      .arc-stepper .step__check {
+        font-size: var(--text-sm);
+        line-height: 1;
+      }
+
+      .arc-stepper .stepper__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-stepper *,
+        .arc-stepper *::before,
+        .arc-stepper *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/table.css

@@ -0,0 +1,85 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-table */
+.arc-table {
+        display: block;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+      }
+
+      .arc-table .table-wrap {
+        overflow-x: auto;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+      }
+
+      thead {
+        background: var(--bg-elevated);
+      }
+
+      th {
+        text-align: left;
+        padding: var(--space-sm) var(--space-md);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        border-bottom: 1px solid var(--border-default);
+        white-space: nowrap;
+      }
+
+      .arc-table[compact] th {
+        padding: var(--space-xs) var(--space-sm);
+      }
+
+      td {
+        padding: var(--space-sm) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-secondary);
+        line-height: 1.5;
+        font-size: var(--text-sm);
+      }
+
+      .arc-table[compact] td {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--text-sm);
+      }
+
+      tr:last-child td {
+        border-bottom: none;
+      }
+
+      .arc-table[striped] tbody tr:nth-child(odd) {
+        background: var(--bg-surface);
+      }
+
+      .arc-table[striped] tbody tr:nth-child(even) {
+        background: var(--bg-card);
+      }
+
+      tbody tr {
+        transition: background var(--transition-fast);
+      }
+
+      tbody tr:hover {
+        background: var(--bg-hover);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-table *,
+        .arc-table *::before,
+        .arc-table *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/text.css

@@ -0,0 +1,77 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-text */
+.arc-text { display: block; }
+      .arc-text[data-variant="accent"],
+      .arc-text[data-variant="code"] { display: inline; }
+
+      .arc-text .text--display {
+        font-size: var(--display-xl-size);
+        font-weight: var(--display-xl-weight);
+        letter-spacing: var(--display-xl-spacing);
+        line-height: 1.2;
+        padding-bottom: 0.1em;
+        background: var(--gradient-display-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .arc-text .text--heading {
+        font-size: var(--heading-size);
+        font-weight: var(--heading-weight);
+        color: var(--text-primary);
+        line-height: 1.4;
+        text-wrap: balance;
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-text .text--body {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        text-wrap: balance;
+      }
+
+      .arc-text .text--muted { color: var(--text-muted); }
+      .arc-text .text--ghost { color: var(--text-ghost); }
+
+      .arc-text .text--accent {
+        font-family: var(--font-accent);
+        font-weight: var(--ui-accent-weight);
+        font-size: var(--ui-accent-size);
+        letter-spacing: var(--ui-accent-spacing);
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 12px var(--accent-primary-glow));
+      }
+
+      .arc-text .text--label {
+        font-family: var(--font-accent);
+        font-weight: var(--section-title-weight);
+        font-size: var(--section-title-size);
+        letter-spacing: var(--section-title-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+
+      .arc-text .text--wordmark {
+        font-weight: var(--wordmark-weight);
+        font-size: var(--wordmark-size);
+        letter-spacing: var(--wordmark-spacing);
+        text-transform: uppercase;
+        color: var(--text-primary);
+        text-shadow: 0 0 30px var(--accent-primary-glow);
+      }
+
+      .arc-text .text--code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--accent-secondary);
+        text-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.3);
+      }

package/css/timeline.css

@@ -0,0 +1,117 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-timeline */
+.arc-timeline { display: block; }
+
+      .arc-timeline .timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+      }
+
+      .arc-timeline .timeline__item {
+        display: flex;
+        gap: var(--space-lg);
+        position: relative;
+        padding-bottom: var(--space-xl);
+      }
+
+      .arc-timeline .timeline__item:last-child { padding-bottom: 0; }
+
+      .arc-timeline .timeline__marker {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        width: 24px;
+        position: relative;
+      }
+
+      .arc-timeline .timeline__dot {
+        width: 12px;
+        height: 12px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        border: 2px solid var(--bg-deep);
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.3),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.25);
+        flex-shrink: 0;
+        z-index: 1;
+        position: relative;
+        transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+      }
+
+      .arc-timeline .timeline__item:hover .timeline__dot {
+        box-shadow:
+          0 0 0 2px rgba(var(--accent-primary-rgb), 0.4),
+          0 0 14px rgba(var(--accent-primary-rgb), 0.4);
+        transform: scale(1.2);
+      }
+
+      .arc-timeline .timeline__line {
+        position: absolute;
+        top: 16px;
+        bottom: calc(-1 * var(--space-xl));
+        left: 50%;
+        width: 1px;
+        transform: translateX(-50%);
+        background: linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.4), var(--border-default) 40%);
+      }
+
+      .arc-timeline .timeline__item:last-child .timeline__line { display: none; }
+
+      .arc-timeline .timeline__content {
+        flex: 1;
+        min-width: 0;
+        padding-top: 0;
+      }
+
+      .arc-timeline .timeline__title {
+        margin: 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-primary);
+        line-height: 1.4;
+        transition: color var(--transition-fast);
+      }
+
+      .arc-timeline .timeline__item:hover .timeline__title {
+        color: var(--accent-primary);
+      }
+
+      .arc-timeline .timeline__desc {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.6;
+        color: var(--text-muted);
+      }
+
+      .arc-timeline .timeline__date {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .arc-timeline .timeline__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-timeline *,
+        .arc-timeline *::before,
+        .arc-timeline *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/toolbar.css

@@ -0,0 +1,54 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-toolbar */
+.arc-toolbar {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      .arc-toolbar[sticky] {
+        position: sticky;
+        top: 0;
+        z-index: 50;
+      }
+
+      .arc-toolbar .toolbar {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        padding: 0 var(--space-md);
+        background: var(--bg-card);
+        gap: var(--space-sm);
+      }
+
+      .arc-toolbar([size='sm']) .toolbar {
+        height: 36px;
+        padding: 0 var(--space-sm);
+      }
+
+      .arc-toolbar[border] .toolbar {
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-toolbar .toolbar__start {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-toolbar .toolbar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .arc-toolbar .toolbar__end {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }