@arclux/arc-ui-html 1.0.0

package/css/aspect-ratio.css

@@ -0,0 +1,23 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-aspect-ratio */
+.arc-aspect-ratio { display: block; }
+
+      .arc-aspect-ratio .aspect-ratio {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        border-radius: var(--radius-md);
+      }
+
+      .arc-aspect-ratio .aspect-ratio__inner {
+        width: 100%;
+        height: 100%;
+      }
+
+      ::slotted(*) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }

package/css/auth-shell.css

@@ -0,0 +1,98 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-auth-shell */
+.arc-auth-shell {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Centered variant */
+      .arc-auth-shell .auth-shell--centered {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--centered .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--centered .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--centered .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      /* Split variant */
+      .arc-auth-shell .auth-shell--split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        min-height: 100vh;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--split .form-side {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+      }
+
+      .arc-auth-shell .auth-shell--split .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--split .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--split .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--split .aside-side {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-deep);
+        padding: var(--space-xl);
+      }
+
+      @media (max-width: 768px) {
+        .arc-auth-shell .auth-shell--split {
+          grid-template-columns: 1fr;
+        }
+
+        .arc-auth-shell .auth-shell--split .aside-side {
+          display: none;
+        }
+      }

package/css/avatar-group.css

@@ -0,0 +1,49 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-avatar-group */
+.arc-avatar-group { display: inline-flex; }
+
+      .arc-avatar-group .group {
+        display: flex;
+        align-items: center;
+      }
+
+      ::slotted(*) {
+        position: relative;
+        box-sizing: border-box;
+        box-shadow: 0 0 0 3px var(--bg-deep);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      ::slotted(:hover) {
+        transform: translateY(-2px) scale(1.08);
+        z-index: 100 !important;
+        box-shadow: 0 0 0 3px var(--bg-deep), 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .arc-avatar-group .group__overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        letter-spacing: 0.5px;
+        color: var(--text-ghost);
+        user-select: none;
+        padding-left: var(--space-sm);
+      }
+
+      .arc-avatar-group[data-overlap="sm"] .group__overflow { padding-left: var(--space-xs); }
+      .arc-avatar-group[data-overlap="lg"] .group__overflow { padding-left: var(--space-md); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-avatar-group *,
+        .arc-avatar-group *::before,
+        .arc-avatar-group *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/avatar.css

@@ -0,0 +1,53 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-avatar */
+.arc-avatar { display: inline-flex; }
+
+      .arc-avatar .avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border-default);
+        overflow: hidden;
+        background: var(--bg-elevated);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .arc-avatar .avatar:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
+      }
+
+      .arc-avatar[data-size="sm"] .avatar { width: 32px; height: 32px; }
+      .arc-avatar[data-size="md"] .avatar { width: 40px; height: 40px; }
+      .arc-avatar[data-size="lg"] .avatar { width: 56px; height: 56px; }
+
+      .arc-avatar .avatar__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: var(--radius-full);
+      }
+
+      .arc-avatar .avatar__initials {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        color: var(--text-primary);
+        text-transform: uppercase;
+        user-select: none;
+      }
+
+      .arc-avatar[data-size="sm"] .avatar__initials { font-size: var(--text-xs); }
+      .arc-avatar[data-size="md"] .avatar__initials { font-size: var(--text-sm); }
+      .arc-avatar[data-size="lg"] .avatar__initials { font-size: var(--text-lg); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-avatar *,
+        .arc-avatar *::before,
+        .arc-avatar *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/badge.css

@@ -0,0 +1,76 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-badge */
+.arc-badge { display: inline-flex; }
+
+      .arc-badge .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: var(--space-xs) var(--space-sm);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        background: var(--bg-hover);
+        transition: box-shadow 200ms ease, border-color 200ms ease;
+        line-height: 1.4;
+      }
+
+      .arc-badge[data-variant="primary"] .badge {
+        border-color: var(--accent-primary-border);
+        color: var(--accent-primary);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="secondary"] .badge {
+        border-color: var(--accent-secondary-border);
+        color: var(--accent-secondary);
+        background: rgba(var(--accent-secondary-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="success"] .badge {
+        border-color: rgba(var(--color-success-rgb), 0.2);
+        color: var(--color-success);
+        background: rgba(var(--color-success-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="warning"] .badge {
+        border-color: rgba(var(--color-warning-rgb), 0.2);
+        color: var(--color-warning);
+        background: rgba(var(--color-warning-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="error"] .badge {
+        border-color: rgba(var(--color-error-rgb), 0.2);
+        color: var(--color-error);
+        background: rgba(var(--color-error-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="info"] .badge {
+        border-color: rgba(var(--color-info-rgb), 0.2);
+        color: var(--color-info);
+        background: rgba(var(--color-info-rgb), 0.06);
+      }
+
+      .arc-badge:hover .badge { border-color: var(--border-bright); }
+      .arc-badge[data-variant="primary"]:hover .badge { box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15); }
+      .arc-badge[data-variant="secondary"]:hover .badge { box-shadow: 0 0 12px rgba(var(--accent-secondary-rgb), 0.15); }
+      .arc-badge[data-variant="success"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-success-rgb), 0.15); }
+      .arc-badge[data-variant="warning"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15); }
+      .arc-badge[data-variant="error"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15); }
+      .arc-badge[data-variant="info"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-info-rgb), 0.15); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-badge *,
+        .arc-badge *::before,
+        .arc-badge *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/button.css

@@ -0,0 +1,94 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-button */
+.arc-button { display: inline-flex; }
+      .arc-button[disabled] { pointer-events: none; }
+
+      .arc-button .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-sm);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        transition:
+          background var(--transition-base),
+          border-color var(--transition-base),
+          box-shadow var(--transition-base),
+          color var(--transition-base),
+          transform var(--transition-fast);
+        text-decoration: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+        min-height: var(--touch-min);
+      }
+
+      /* Sizes */
+      .arc-button[data-size="sm"] .btn { font-size: var(--text-xs); padding: var(--space-xs) var(--space-md); }
+      .arc-button:not([data-size]) .btn,
+      .arc-button[data-size="md"] .btn { font-size: var(--text-xs); padding: var(--space-sm) var(--space-lg); }
+      .arc-button[data-size="lg"] .btn { font-size: var(--text-xs); padding: var(--space-md) var(--space-xl); letter-spacing: 3px; }
+
+      /* Primary */
+      .arc-button:not([data-variant]) .btn,
+      .arc-button[data-variant="primary"] .btn {
+        background: var(--accent-primary);
+        color: var(--bg-deep);
+        border-color: var(--accent-primary);
+      }
+      .arc-button:not([data-variant]) .btn:hover,
+      .arc-button[data-variant="primary"] .btn:hover { box-shadow: var(--glow-primary); }
+      .arc-button:not([data-variant]) .btn:active,
+      .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5); }
+
+      /* Secondary */
+      .arc-button[data-variant="secondary"] .btn {
+        background: transparent;
+        color: var(--text-primary);
+        border-color: var(--border-default);
+      }
+      .arc-button[data-variant="secondary"] .btn:hover {
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 0 20px var(--accent-primary-ring);
+      }
+      .arc-button[data-variant="secondary"] .btn:active {
+        transform: scale(0.97);
+        background: rgba(var(--accent-primary-rgb),0.05);
+      }
+
+      /* Ghost */
+      .arc-button[data-variant="ghost"] .btn {
+        background: transparent;
+        color: var(--text-muted);
+        border-color: transparent;
+      }
+      .arc-button[data-variant="ghost"] .btn:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+      .arc-button[data-variant="ghost"] .btn:active {
+        transform: scale(0.97);
+        background: var(--bg-elevated);
+      }
+
+      /* Focus */
+      .arc-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
+
+      /* Disabled */
+      .arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-button *,
+        .arc-button *::before,
+        .arc-button *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/callout.css

@@ -0,0 +1,84 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-callout */
+.arc-callout { display: block; }
+
+      .arc-callout .callout {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-lg);
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        background: var(--bg-card);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        color: var(--text-secondary);
+      }
+
+      .arc-callout .callout__header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .arc-callout .callout__icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .arc-callout .callout__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+      }
+
+      .arc-callout .callout__content {
+        min-width: 0;
+      }
+
+      /* ── Info ── */
+      .arc-callout[data-variant="info"] .callout {
+        border-color: rgba(var(--accent-primary-rgb), 0.12);
+        background: rgba(var(--accent-primary-rgb), 0.04);
+      }
+      .arc-callout[data-variant="info"] .callout__icon { color: var(--accent-primary); }
+      .arc-callout[data-variant="info"] .callout__label { color: var(--accent-primary); }
+
+      /* ── Warning ── */
+      .arc-callout[data-variant="warning"] .callout {
+        border-color: rgba(var(--color-warning-rgb), 0.15);
+        background: rgba(var(--color-warning-rgb), 0.04);
+      }
+      .arc-callout[data-variant="warning"] .callout__icon { color: var(--color-warning); }
+      .arc-callout[data-variant="warning"] .callout__label { color: var(--color-warning); }
+
+      /* ── Tip ── */
+      .arc-callout[data-variant="tip"] .callout {
+        border-color: rgba(var(--color-success-rgb), 0.15);
+        background: rgba(var(--color-success-rgb), 0.04);
+      }
+      .arc-callout[data-variant="tip"] .callout__icon { color: var(--color-success); }
+      .arc-callout[data-variant="tip"] .callout__label { color: var(--color-success); }
+
+      /* ── Danger ── */
+      .arc-callout[data-variant="danger"] .callout {
+        border-color: rgba(var(--color-error-rgb), 0.15);
+        background: rgba(var(--color-error-rgb), 0.04);
+      }
+      .arc-callout[data-variant="danger"] .callout__icon { color: var(--color-error); }
+      .arc-callout[data-variant="danger"] .callout__label { color: var(--color-error); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-callout *,
+        .arc-callout *::before,
+        .arc-callout *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/card.css

@@ -0,0 +1,50 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-card */
+.arc-card { display: block; }
+
+      .arc-card .card {
+        position: relative;
+        border-radius: var(--radius-lg);
+        padding: 1px;
+        background: var(--border-subtle);
+        transition: background var(--transition-slow);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .arc-card[href] .card:hover {
+        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
+      }
+
+      .arc-card .card__inner {
+        position: relative;
+        background: var(--bg-card);
+        border-radius: calc(var(--radius-lg) - 1px);
+        padding: var(--space-xl) var(--space-lg);
+        flex: 1;
+        min-height: 0;
+        transition: box-shadow var(--transition-slow);
+      }
+
+      .arc-card .card:hover .card__inner {
+        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
+      }
+
+      .arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
+
+      @media (max-width: 768px) {
+        .arc-card .card__inner { padding: var(--space-lg) var(--space-md); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-card *,
+        .arc-card *::before,
+        .arc-card *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/code-block.css

@@ -0,0 +1,86 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-code-block */
+.arc-code-block { display: block; }
+
+      .arc-code-block .code-block {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+      }
+
+      .arc-code-block .code-block__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-xs) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        background: var(--bg-card);
+      }
+
+      .arc-code-block .code-block__filename {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .arc-code-block .code-block__lang {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .arc-code-block .code-block__copy {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        background: none;
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        padding: var(--space-xs) var(--space-sm);
+        cursor: pointer;
+        transition: color var(--transition-fast), border-color var(--transition-fast);
+      }
+
+      .arc-code-block .code-block__copy:hover {
+        color: var(--text-primary);
+        border-color: var(--border-bright);
+      }
+
+      .arc-code-block .code-block__copy[data-copied] {
+        color: var(--color-success);
+        border-color: var(--color-success);
+      }
+
+      .arc-code-block .code-block__body {
+        padding: var(--space-md);
+        overflow-x: auto;
+      }
+
+      .arc-code-block .code-block__pre {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+        white-space: pre;
+        tab-size: 2;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-code-block *,
+        .arc-code-block *::before,
+        .arc-code-block *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/color-swatch.css

@@ -0,0 +1,47 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-color-swatch */
+.arc-color-swatch { display: inline-flex; }
+
+      .arc-color-swatch .swatch {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .arc-color-swatch .swatch__color {
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .arc-color-swatch .swatch__color:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.1);
+      }
+
+      .arc-color-swatch[data-size="sm"] .swatch__color { width: 32px; height: 32px; border-radius: var(--radius-sm); }
+      .arc-color-swatch[data-size="md"] .swatch__color { width: 48px; height: 48px; }
+      .arc-color-swatch[data-size="lg"] .swatch__color { width: 64px; height: 64px; border-radius: var(--radius-lg); }
+
+      .arc-color-swatch .swatch__label {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        text-align: center;
+        max-width: 80px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-color-swatch *,
+        .arc-color-swatch *::before,
+        .arc-color-swatch *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }

package/css/container.css

@@ -0,0 +1,15 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* arc-container */
+.arc-container { display: block; }
+
+      .arc-container .container {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding-inline: var(--space-lg);
+      }
+
+      .arc-container[narrow] .container {
+        max-width: var(--max-width-sm);
+      }