@arclux/arc-ui-html 1.4.0 → 1.5.0

package/css/arc-ui.css

@@ -253,7 +253,7 @@
       }
 
 /* arc-avatar */
-.arc-avatar { display: inline-flex; }
+.arc-avatar { display: inline-flex; position: relative; }
 
       .arc-avatar .avatar {
         display: inline-flex;
@@ -290,10 +290,36 @@
         user-select: none;
       }
 
+      /* Shape variants */
+      .arc-avatar[data-shape="square"] .avatar,
+      .arc-avatar[data-shape="square"] .avatar__img { border-radius: var(--radius-md); }
+      .arc-avatar[data-shape="rounded"] .avatar,
+      .arc-avatar[data-shape="rounded"] .avatar__img { border-radius: var(--radius-lg); }
+
       .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); }
 
+      /* Status indicator */
+      .arc-avatar .avatar__status {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: var(--radius-full);
+        border: 2px solid var(--bg-deep);
+        box-sizing: border-box;
+      }
+
+      .arc-avatar[data-size="sm"] .avatar__status { width: 8px; height: 8px; }
+      .arc-avatar[data-size="lg"] .avatar__status { width: 14px; height: 14px; border-width: 3px; }
+
+      .arc-avatar[data-status="online"] .avatar__status { background: var(--color-success); }
+      .arc-avatar[data-status="offline"] .avatar__status { background: var(--text-ghost); }
+      .arc-avatar[data-status="busy"] .avatar__status { background: var(--color-error); }
+      .arc-avatar[data-status="away"] .avatar__status { background: var(--color-warning); }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-avatar *,
         .arc-avatar *::before,
@@ -369,6 +395,10 @@
       .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); }
 
+      /* Sizes */
+      .arc-badge[data-size="sm"] .badge { font-size: calc(var(--text-xs) - 1px); padding: 2px var(--space-xs); }
+      .arc-badge[data-size="lg"] .badge { font-size: var(--text-sm); padding: var(--space-sm) var(--space-md); }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-badge *,
         .arc-badge *::before,
@@ -379,76 +409,30 @@
         }
       }
 
-/* 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 rgba(var(--_status-rgb), 0.12);
-        background: rgba(var(--_status-rgb), 0.04);
-        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;
-        color: var(--_status-color);
-      }
-
-      .arc-callout .callout__label {
-        font-family: var(--font-accent);
-        font-size: var(--text-xs);
-        font-weight: 600;
-        letter-spacing: 1.5px;
-        text-transform: uppercase;
-        color: var(--_status-color);
-      }
-
-      .arc-callout .callout__content {
-        min-width: 0;
-      }
-
-      @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;
-        }
-      }
-
 /* arc-card */
 .arc-card { display: block; }
 
       .arc-card .card { height: 100%; }
 
-      /* Suppress hover effect when no href */
-      .arc-card:not([data-href]) .card:hover {
+      /* Suppress hover effect when no href and not interactive */
+      .arc-card(:not([href]):not([interactive])) .card:hover {
         background: var(--border-subtle);
       }
-      .arc-card:not([data-href]) .card:hover .card__inner {
+      .arc-card(:not([href]):not([interactive])) .card:hover .card__inner {
         box-shadow: none;
       }
 
+      .arc-card[interactive] .card { cursor: pointer; }
+
       .arc-card .card__inner {
         padding: var(--space-xl) var(--space-lg);
       }
 
+      /* Padding variants */
+      .arc-card[data-padding="none"] .card__inner { padding: 0; }
+      .arc-card[data-padding="sm"] .card__inner { padding: var(--space-md) var(--space-sm); }
+      .arc-card[data-padding="lg"] .card__inner { padding: var(--space-2xl) var(--space-xl); }
+
       .arc-card .card__body {
         flex: 1;
       }
@@ -798,6 +782,33 @@
         background: linear-gradient(180deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
       }
 
+      /* Labeled divider */
+      .arc-divider .divider--labeled {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        height: auto;
+        background: none !important;
+        box-shadow: none !important;
+      }
+
+      .arc-divider .divider__line {
+        flex: 1;
+        height: 1px;
+        background: var(--gradient-divider);
+      }
+
+      .arc-divider .divider__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
       @keyframes divider-shimmer {
         0%, 100% { background-position: 200% 0; }
         50% { background-position: -100% 0; }
@@ -1282,6 +1293,12 @@
         border-radius: var(--radius-md);
       }
 
+      .arc-skeleton .skeleton-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-skeleton *,
         .arc-skeleton *::before,
@@ -1415,6 +1432,25 @@
         color: var(--text-muted);
       }
 
+      .arc-stat .stat__trend {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        margin-top: var(--space-xs);
+      }
+
+      .arc-stat[data-trend="up"] .stat__trend { color: var(--color-success); }
+      .arc-stat[data-trend="down"] .stat__trend { color: var(--color-error); }
+      .arc-stat[data-trend="neutral"] .stat__trend { color: var(--text-muted); }
+
+      .arc-stat .stat__trend-arrow {
+        width: 12px;
+        height: 12px;
+      }
+
 /* arc-stepper */
 .arc-stepper { display: block; }
 
@@ -1885,7 +1921,27 @@
 
 /* arc-button */
 .arc-button { display: inline-flex; }
-      .arc-button[disabled] { pointer-events: none; }
+      .arc-button[disabled],
+      .arc-button[loading] { pointer-events: none; }
+
+      .arc-button[loading] .btn { opacity: 0.7; }
+
+      .arc-button .btn__spinner {
+        display: none;
+        width: 14px;
+        height: 14px;
+        border: 2px solid currentColor;
+        border-top-color: transparent;
+        border-radius: var(--radius-full);
+        animation: arc-btn-spin 600ms linear infinite;
+      }
+
+      .arc-button[loading] .btn__spinner { display: inline-block; }
+      .arc-button[loading] .btn__label { opacity: 0.6; }
+
+      @keyframes arc-btn-spin {
+        to { transform: rotate(360deg); }
+      }
 
       .arc-button .btn {
         display: inline-flex;
@@ -2113,6 +2169,12 @@
         margin-bottom: var(--space-sm);
       }
 
+      /* Center alignment */
+      .arc-footer[data-align="center"] .footer { text-align: center; }
+      .arc-footer[data-align="center"] .footer__columns { justify-items: center; }
+      .arc-footer[data-align="center"] .footer__social { justify-content: center; }
+      .arc-footer[data-align="center"] .footer__legal { text-align: center; }
+
       .arc-footer .footer__legal {
         padding-top: var(--space-md);
         border-top: 1px solid var(--border-subtle);
@@ -2145,6 +2207,15 @@
         text-underline-offset: 3px;
       }
 
+      /* Underline variants */
+      .arc-link[data-underline="always"] .link {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+      .arc-link[data-underline="never"] .link:hover {
+        text-decoration: none;
+      }
+
       .arc-link[data-variant="muted"] .link {
         color: var(--text-muted);
       }
@@ -2461,9 +2532,17 @@
         padding-inline: var(--space-lg);
       }
 
-      .arc-container[narrow] .container {
-        max-width: var(--max-width-sm);
-      }
+      .arc-container[narrow] .container,
+      .arc-container[data-size="sm"] .container { max-width: var(--max-width-sm); }
+      .arc-container[data-size="md"] .container { max-width: var(--max-width); }
+      .arc-container[data-size="lg"] .container { max-width: 1400px; }
+      .arc-container[data-size="xl"] .container { max-width: 1600px; }
+      .arc-container[data-size="full"] .container { max-width: none; }
+
+      /* Padding variants */
+      .arc-container[data-padding="none"] .container { padding-inline: 0; }
+      .arc-container[data-padding="sm"] .container { padding-inline: var(--space-sm); }
+      .arc-container[data-padding="lg"] .container { padding-inline: var(--space-xl); }
 
 /* arc-dashboard-grid */
 .arc-dashboard-grid {
@@ -2860,6 +2939,19 @@
         animation: spinner-dash 1.4s ease-in-out infinite;
       }
 
+      .arc-progress .progress__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: var(--space-xs);
+      }
+
+      .arc-progress .progress__value {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+      }
+
       @keyframes progress-indeterminate {
         0%   { transform: translateX(-100%); }
         100% { transform: translateX(400%); }

package/css/avatar.css

@@ -1,7 +1,7 @@
 /* Auto-generated by @arclux/prism — do not edit manually */
 
 /* arc-avatar */
-.arc-avatar { display: inline-flex; }
+.arc-avatar { display: inline-flex; position: relative; }
 
       .arc-avatar .avatar {
         display: inline-flex;
@@ -38,10 +38,36 @@
         user-select: none;
       }
 
+      /* Shape variants */
+      .arc-avatar[data-shape="square"] .avatar,
+      .arc-avatar[data-shape="square"] .avatar__img { border-radius: var(--radius-md); }
+      .arc-avatar[data-shape="rounded"] .avatar,
+      .arc-avatar[data-shape="rounded"] .avatar__img { border-radius: var(--radius-lg); }
+
       .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); }
 
+      /* Status indicator */
+      .arc-avatar .avatar__status {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: var(--radius-full);
+        border: 2px solid var(--bg-deep);
+        box-sizing: border-box;
+      }
+
+      .arc-avatar[data-size="sm"] .avatar__status { width: 8px; height: 8px; }
+      .arc-avatar[data-size="lg"] .avatar__status { width: 14px; height: 14px; border-width: 3px; }
+
+      .arc-avatar[data-status="online"] .avatar__status { background: var(--color-success); }
+      .arc-avatar[data-status="offline"] .avatar__status { background: var(--text-ghost); }
+      .arc-avatar[data-status="busy"] .avatar__status { background: var(--color-error); }
+      .arc-avatar[data-status="away"] .avatar__status { background: var(--color-warning); }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-avatar *,
         .arc-avatar *::before,

package/css/badge.css

@@ -65,6 +65,10 @@
       .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); }
 
+      /* Sizes */
+      .arc-badge[data-size="sm"] .badge { font-size: calc(var(--text-xs) - 1px); padding: 2px var(--space-xs); }
+      .arc-badge[data-size="lg"] .badge { font-size: var(--text-sm); padding: var(--space-sm) var(--space-md); }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-badge *,
         .arc-badge *::before,

package/css/button.css

@@ -2,7 +2,27 @@
 
 /* arc-button */
 .arc-button { display: inline-flex; }
-      .arc-button[disabled] { pointer-events: none; }
+      .arc-button[disabled],
+      .arc-button[loading] { pointer-events: none; }
+
+      .arc-button[loading] .btn { opacity: 0.7; }
+
+      .arc-button .btn__spinner {
+        display: none;
+        width: 14px;
+        height: 14px;
+        border: 2px solid currentColor;
+        border-top-color: transparent;
+        border-radius: var(--radius-full);
+        animation: arc-btn-spin 600ms linear infinite;
+      }
+
+      .arc-button[loading] .btn__spinner { display: inline-block; }
+      .arc-button[loading] .btn__label { opacity: 0.6; }
+
+      @keyframes arc-btn-spin {
+        to { transform: rotate(360deg); }
+      }
 
       .arc-button .btn {
         display: inline-flex;

package/css/card.css

@@ -5,18 +5,25 @@
 
       .arc-card .card { height: 100%; }
 
-      /* Suppress hover effect when no href */
-      .arc-card:not([data-href]) .card:hover {
+      /* Suppress hover effect when no href and not interactive */
+      .arc-card(:not([href]):not([interactive])) .card:hover {
         background: var(--border-subtle);
       }
-      .arc-card:not([data-href]) .card:hover .card__inner {
+      .arc-card(:not([href]):not([interactive])) .card:hover .card__inner {
         box-shadow: none;
       }
 
+      .arc-card[interactive] .card { cursor: pointer; }
+
       .arc-card .card__inner {
         padding: var(--space-xl) var(--space-lg);
       }
 
+      /* Padding variants */
+      .arc-card[data-padding="none"] .card__inner { padding: 0; }
+      .arc-card[data-padding="sm"] .card__inner { padding: var(--space-md) var(--space-sm); }
+      .arc-card[data-padding="lg"] .card__inner { padding: var(--space-2xl) var(--space-xl); }
+
       .arc-card .card__body {
         flex: 1;
       }

package/css/container.css

@@ -10,6 +10,14 @@
         padding-inline: var(--space-lg);
       }
 
-      .arc-container[narrow] .container {
-        max-width: var(--max-width-sm);
-      }
+      .arc-container[narrow] .container,
+      .arc-container[data-size="sm"] .container { max-width: var(--max-width-sm); }
+      .arc-container[data-size="md"] .container { max-width: var(--max-width); }
+      .arc-container[data-size="lg"] .container { max-width: 1400px; }
+      .arc-container[data-size="xl"] .container { max-width: 1600px; }
+      .arc-container[data-size="full"] .container { max-width: none; }
+
+      /* Padding variants */
+      .arc-container[data-padding="none"] .container { padding-inline: 0; }
+      .arc-container[data-padding="sm"] .container { padding-inline: var(--space-sm); }
+      .arc-container[data-padding="lg"] .container { padding-inline: var(--space-xl); }

package/css/divider.css

@@ -118,6 +118,33 @@
         background: linear-gradient(180deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
       }
 
+      /* Labeled divider */
+      .arc-divider .divider--labeled {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        height: auto;
+        background: none !important;
+        box-shadow: none !important;
+      }
+
+      .arc-divider .divider__line {
+        flex: 1;
+        height: 1px;
+        background: var(--gradient-divider);
+      }
+
+      .arc-divider .divider__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
       @keyframes divider-shimmer {
         0%, 100% { background-position: 200% 0; }
         50% { background-position: -100% 0; }

package/css/footer.css

@@ -52,6 +52,12 @@
         margin-bottom: var(--space-sm);
       }
 
+      /* Center alignment */
+      .arc-footer[data-align="center"] .footer { text-align: center; }
+      .arc-footer[data-align="center"] .footer__columns { justify-items: center; }
+      .arc-footer[data-align="center"] .footer__social { justify-content: center; }
+      .arc-footer[data-align="center"] .footer__legal { text-align: center; }
+
       .arc-footer .footer__legal {
         padding-top: var(--space-md);
         border-top: 1px solid var(--border-subtle);

package/css/link.css

@@ -25,6 +25,15 @@
         text-underline-offset: 3px;
       }
 
+      /* Underline variants */
+      .arc-link[data-underline="always"] .link {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+      .arc-link[data-underline="never"] .link:hover {
+        text-decoration: none;
+      }
+
       .arc-link[data-variant="muted"] .link {
         color: var(--text-muted);
       }

package/css/progress.css

@@ -72,6 +72,19 @@
         animation: spinner-dash 1.4s ease-in-out infinite;
       }
 
+      .arc-progress .progress__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: var(--space-xs);
+      }
+
+      .arc-progress .progress__value {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+      }
+
       @keyframes progress-indeterminate {
         0%   { transform: translateX(-100%); }
         100% { transform: translateX(400%); }

package/css/skeleton.css

@@ -33,6 +33,12 @@
         border-radius: var(--radius-md);
       }
 
+      .arc-skeleton .skeleton-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .arc-skeleton *,
         .arc-skeleton *::before,

package/css/stat.css

@@ -40,3 +40,22 @@
         text-transform: uppercase;
         color: var(--text-muted);
       }
+
+      .arc-stat .stat__trend {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        margin-top: var(--space-xs);
+      }
+
+      .arc-stat[data-trend="up"] .stat__trend { color: var(--color-success); }
+      .arc-stat[data-trend="down"] .stat__trend { color: var(--color-error); }
+      .arc-stat[data-trend="neutral"] .stat__trend { color: var(--text-muted); }
+
+      .arc-stat .stat__trend-arrow {
+        width: 12px;
+        height: 12px;
+      }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-html",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "ARC UI — Standalone CSS and HTML examples for vanilla projects. Auto-generated by @arclux/prism.",
   "license": "MIT",
   "type": "module",