@arclux/arc-ui-html 1.0.0

package/css/link.css

@@ -0,0 +1,74 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-link */
+.arc-link { display: inline; }
+
+      .arc-link .link {
+        font-family: var(--font-body);
+        font-size: inherit;
+        color: var(--accent-primary);
+        text-decoration: none;
+        cursor: pointer;
+        transition:
+          color var(--transition-fast),
+          opacity var(--transition-fast);
+        border: none;
+        background: none;
+        padding: 0;
+        min-height: var(--touch-min);
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .arc-link .link:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      .arc-link[data-variant="muted"] .link {
+        color: var(--text-muted);
+      }
+      .arc-link[data-variant="muted"] .link:hover {
+        color: var(--text-primary);
+      }
+
+      .arc-link[data-variant="nav"] .link {
+        color: var(--text-secondary);
+        font-size: var(--text-sm);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+      .arc-link[data-variant="nav"] .link:hover {
+        color: var(--text-primary);
+        text-decoration: none;
+      }
+
+      .arc-link[active] .link {
+        color: var(--accent-primary);
+      }
+
+      .arc-link .link:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-xs);
+      }
+
+      .arc-link .link__external-icon {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-left: 2px; /* cosmetic micro-spacing for external icon */
+        vertical-align: middle;
+        opacity: 0.6;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-link *,
+        .arc-link *::before,
+        .arc-link *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/markdown.css

@@ -0,0 +1,133 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-markdown */
+.arc-markdown { display: block; }
+
+      .arc-markdown .markdown {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        color: var(--text-secondary);
+      }
+
+      .arc-markdown .markdown h1,
+      .arc-markdown .markdown h2,
+      .arc-markdown .markdown h3,
+      .arc-markdown .markdown h4,
+      .arc-markdown .markdown h5,
+      .arc-markdown .markdown h6 {
+        font-family: var(--font-body);
+        color: var(--text-primary);
+        line-height: 1.3;
+        margin-top: var(--space-xl);
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-markdown .markdown h1 { font-size: var(--text-3xl); font-weight: 600; }
+      .arc-markdown .markdown h2 { font-size: var(--heading-size); font-weight: 600; }
+      .arc-markdown .markdown h3 { font-size: var(--text-lg); font-weight: 600; }
+      .arc-markdown .markdown h4 { font-size: var(--body-size); font-weight: 600; }
+      .arc-markdown .markdown h5 { font-size: var(--body-size); font-weight: 500; }
+      .arc-markdown .markdown h6 { font-size: var(--code-size); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
+
+      .arc-markdown .markdown h1:first-child,
+      .arc-markdown .markdown h2:first-child,
+      .arc-markdown .markdown h3:first-child,
+      .arc-markdown .markdown h4:first-child,
+      .arc-markdown .markdown h5:first-child,
+      .arc-markdown .markdown h6:first-child { margin-top: 0; }
+
+      .arc-markdown .markdown p {
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .arc-markdown .markdown p:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown strong { color: var(--text-primary); font-weight: 600; }
+
+      .arc-markdown .markdown em { font-style: italic; }
+
+      .arc-markdown .markdown a {
+        color: var(--accent-primary);
+        text-decoration: none;
+        transition: color var(--transition-fast);
+      }
+
+      .arc-markdown .markdown a:hover {
+        text-decoration: underline;
+      }
+
+      .arc-markdown .markdown code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--accent-secondary);
+        background: var(--bg-surface);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for inline code */
+        border-radius: var(--radius-sm);
+      }
+
+      .arc-markdown .markdown pre {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        padding: var(--space-md);
+        overflow-x: auto;
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .arc-markdown .markdown pre code {
+        background: none;
+        padding: 0;
+        border-radius: 0;
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+      }
+
+      .arc-markdown .markdown blockquote {
+        margin: 0 0 var(--space-md) 0;
+        padding: var(--space-sm) var(--space-md);
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      .arc-markdown .markdown blockquote p:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown ul,
+      .arc-markdown .markdown ol {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+        color: var(--text-secondary);
+      }
+
+      .arc-markdown .markdown li {
+        margin-bottom: var(--space-xs);
+      }
+
+      .arc-markdown .markdown li:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown hr {
+        border: none;
+        height: 1px;
+        background: var(--border-subtle);
+        margin: var(--space-xl) 0;
+      }
+
+      .arc-markdown .markdown img {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--radius-md);
+        margin: var(--space-sm) 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-markdown *,
+        .arc-markdown *::before,
+        .arc-markdown *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/meter.css

@@ -0,0 +1,59 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-meter */
+.arc-meter { display: block; }
+
+      .arc-meter .meter {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .arc-meter .meter__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .arc-meter .meter__label {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-secondary);
+        user-select: none;
+      }
+
+      .arc-meter .meter__value {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--text-muted);
+      }
+
+      .arc-meter .meter__track {
+        position: relative;
+        width: 100%;
+        height: 8px;
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+        overflow: hidden;
+      }
+
+      .arc-meter .meter__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        transition: width var(--transition-base), background var(--transition-base);
+        min-width: 0;
+      }
+
+      .arc-meter .meter__fill--success { background: var(--color-success); }
+      .arc-meter .meter__fill--warning { background: var(--color-warning); }
+      .arc-meter .meter__fill--error   { background: var(--color-error); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-meter *,
+        .arc-meter *::before,
+        .arc-meter *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/page-header.css

@@ -0,0 +1,55 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-page-header */
+.arc-page-header {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      .arc-page-header .page-header {
+        padding: var(--space-lg) 0 var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-page-header .page-header__breadcrumb {
+        margin-bottom: var(--space-sm);
+      }
+
+      .arc-page-header .page-header__title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        flex-wrap: wrap;
+      }
+
+      .arc-page-header .page-header__heading {
+        margin: 0;
+        font-family: var(--font-body);
+        font-size: 28px; /* size-variant, keep hardcoded */
+        font-weight: 700;
+        color: var(--text-primary);
+        line-height: 1.2;
+      }
+
+      .arc-page-header .page-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-page-header .page-header__description {
+        margin-top: var(--space-sm);
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: 1.5;
+      }
+
+      .arc-page-header .page-header__tabs {
+        margin-top: var(--space-md);
+      }
+
+      .arc-page-header .page-header__content {
+        margin-top: var(--space-md);
+      }

package/css/page-layout.css

@@ -0,0 +1,65 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-page-layout */
+.arc-page-layout {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .arc-page-layout .page-layout {
+        padding: var(--space-xl) var(--space-lg);
+        gap: var(--gap);
+        min-height: 100%;
+        box-sizing: border-box;
+      }
+
+      /* Centered layout */
+      .arc-page-layout([layout='centered']) .page-layout {
+        display: block;
+        max-width: var(--max-width);
+        margin: 0 auto;
+      }
+
+      /* Wide layout */
+      .arc-page-layout([layout='wide']) .page-layout {
+        display: block;
+      }
+
+      /* Sidebar left layout */
+      .arc-page-layout([layout='sidebar-left']) .page-layout {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+      }
+
+      /* Sidebar right layout */
+      .arc-page-layout([layout='sidebar-right']) .page-layout {
+        display: grid;
+        grid-template-columns: 1fr 300px;
+      }
+
+      .arc-page-layout .sidebar {
+        display: none;
+      }
+
+      .arc-page-layout([layout='sidebar-left']) .sidebar {
+        display: block;
+      }
+
+      .arc-page-layout .aside {
+        display: none;
+      }
+
+      .arc-page-layout([layout='sidebar-right']) .aside {
+        display: block;
+      }
+
+      .arc-page-layout .main {
+        min-width: 0;
+      }
+
+      @media (max-width: 768px) {
+        .arc-page-layout([layout='sidebar-left']) .page-layout,
+        .arc-page-layout([layout='sidebar-right']) .page-layout {
+          grid-template-columns: 1fr;
+        }
+      }

package/css/progress.css

@@ -0,0 +1,96 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-progress */
+.arc-progress { display: block; }
+
+      .arc-progress .progress__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);
+        margin-bottom: var(--space-xs);
+        display: block;
+      }
+
+      /* Bar */
+      .arc-progress .progress__track {
+        width: 100%;
+        border-radius: var(--radius-full);
+        background: var(--border-subtle);
+        overflow: hidden;
+      }
+
+      .arc-progress[data-size="sm"] .progress__track { height: 4px; }
+      .arc-progress:not([data-size]) .progress__track,
+      .arc-progress[data-size="md"] .progress__track { height: 8px; }
+      .arc-progress[data-size="lg"] .progress__track { height: 12px; }
+
+      .arc-progress .progress__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        background: var(--gradient-accent-text);
+        transition: width var(--transition-base);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      .arc-progress[indeterminate] .progress__fill {
+        width: 30% !important;
+        animation: progress-indeterminate 1.5s ease-in-out infinite;
+      }
+
+      /* Spinner */
+      .arc-progress .progress__spinner {
+        display: inline-block;
+      }
+
+      .arc-progress[data-size="sm"] .progress__spinner { width: 20px; height: 20px; }
+      .arc-progress:not([data-size]) .progress__spinner,
+      .arc-progress[data-size="md"] .progress__spinner { width: 32px; height: 32px; }
+      .arc-progress[data-size="lg"] .progress__spinner { width: 48px; height: 48px; }
+
+      .arc-progress .progress__spinner svg {
+        width: 100%;
+        height: 100%;
+        animation: spinner-rotate 1.4s linear infinite;
+      }
+
+      .arc-progress .progress__spinner-track {
+        fill: none;
+        stroke: var(--border-subtle);
+        stroke-width: 3;
+      }
+
+      .arc-progress .progress__spinner-fill {
+        fill: none;
+        stroke: var(--accent-primary);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 80, 200;
+        stroke-dashoffset: 0;
+        animation: spinner-dash 1.4s ease-in-out infinite;
+      }
+
+      @keyframes progress-indeterminate {
+        0%   { transform: translateX(-100%); }
+        100% { transform: translateX(400%); }
+      }
+
+      @keyframes spinner-rotate {
+        100% { transform: rotate(360deg); }
+      }
+
+      @keyframes spinner-dash {
+        0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
+        50%  { stroke-dasharray: 80, 200; stroke-dashoffset: -35; }
+        100% { stroke-dasharray: 80, 200; stroke-dashoffset: -125; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-progress .progress__fill,
+        .arc-progress .progress__spinner svg,
+        .arc-progress .progress__spinner-fill {
+          animation: none;
+        }
+      }

package/css/scroll-area.css

@@ -0,0 +1,70 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-scroll-area */
+.arc-scroll-area {
+        display: block;
+        position: relative;
+      }
+
+      .arc-scroll-area .scroll-area {
+        overflow: hidden;
+        scroll-behavior: smooth;
+        border-radius: inherit;
+      }
+
+      /* Orientation variants */
+      .arc-scroll-area[data-orientation="vertical"] .scroll-area,
+      .arc-scroll-area:not([data-orientation]) .scroll-area {
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .arc-scroll-area[data-orientation="horizontal"] .scroll-area {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .arc-scroll-area[data-orientation="both"] .scroll-area {
+        overflow: auto;
+      }
+
+      /* Webkit scrollbar styling */
+      .arc-scroll-area .scroll-area::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-track {
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb {
+        background: var(--border-bright);
+        border-radius: var(--radius-full);
+        transition: background var(--transition-fast);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb:hover {
+        background: var(--text-ghost);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-corner {
+        background: var(--bg-elevated);
+      }
+
+      /* Firefox scrollbar styling */
+      .arc-scroll-area .scroll-area {
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-bright) var(--bg-elevated);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-scroll-area *,
+        .arc-scroll-area *::before,
+        .arc-scroll-area *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/section.css

@@ -0,0 +1,27 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-section */
+.arc-section { display: block; }
+
+      .arc-section .section {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding: var(--space-3xl) var(--space-lg);
+        scroll-margin-top: var(--space-md);
+      }
+
+      @media (max-width: 768px) {
+        .arc-section .section { padding: var(--space-2xl) var(--space-md); }
+      }
+
+      .arc-section .section__label {
+        display: block;
+        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);
+        margin-bottom: var(--space-lg);
+      }

package/css/settings-layout.css

@@ -0,0 +1,55 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-settings-layout */
+.arc-settings-layout {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Left nav layout */
+      .arc-settings-layout .settings-layout--left {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        min-height: 100%;
+      }
+
+      .arc-settings-layout .settings-layout--left .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-right: 1px solid var(--border-subtle);
+      }
+
+      .arc-settings-layout .settings-layout--left .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      /* Top nav layout */
+      .arc-settings-layout .settings-layout--top {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
+
+      .arc-settings-layout .settings-layout--top .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-settings-layout .settings-layout--top .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      @media (max-width: 768px) {
+        .arc-settings-layout .settings-layout--left {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .arc-settings-layout .settings-layout--left .nav {
+          border-right: none;
+          border-bottom: 1px solid var(--border-subtle);
+        }
+      }

package/css/skeleton.css

@@ -0,0 +1,44 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-skeleton */
+.arc-skeleton { display: block; }
+
+      @keyframes shimmer {
+        0%   { background-position: -200% 0; }
+        100% { background-position: 200% 0; }
+      }
+
+      .arc-skeleton .skeleton {
+        background: linear-gradient(
+          90deg,
+          var(--bg-elevated) 25%,
+          var(--border-subtle) 37%,
+          var(--bg-elevated) 63%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.8s ease-in-out infinite;
+      }
+
+      .arc-skeleton[data-variant="text"] .skeleton {
+        width: 100%;
+        height: 1em;
+        border-radius: var(--radius-sm);
+      }
+
+      .arc-skeleton[data-variant="circle"] .skeleton {
+        border-radius: var(--radius-full);
+      }
+
+      .arc-skeleton[data-variant="rect"] .skeleton {
+        border-radius: var(--radius-md);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-skeleton *,
+        .arc-skeleton *::before,
+        .arc-skeleton *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }