@arclux/arc-ui 1.4.0 → 1.5.1

package/src/navigation/pagination.js

@@ -6,6 +6,7 @@ export class ArcPagination extends LitElement {
     total:    { type: Number },
     current:  { type: Number, reflect: true },
     siblings: { type: Number },
+    compact:  { type: Boolean, reflect: true },
   };
 
   static styles = [
@@ -61,6 +62,15 @@ export class ArcPagination extends LitElement {
         box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.4);
       }
 
+      /* Compact: show current/total between prev/next */
+      .pagination__compact-label {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        padding: 0 var(--space-sm);
+        white-space: nowrap;
+      }
+
       .pagination__ellipsis {
         display: inline-flex;
         align-items: center;
@@ -89,6 +99,7 @@ export class ArcPagination extends LitElement {
     this.total = 1;
     this.current = 1;
     this.siblings = 1;
+    this.compact = false;
   }
 
   _getPageRange() {
@@ -138,21 +149,32 @@ export class ArcPagination extends LitElement {
 
   render() {
     const pages = this._getPageRange();
+    const prevBtn = html`
+      <button class="pagination__btn" @click=${this._prev} ?disabled=${this.current <= 1} aria-label="Previous page" part="prev">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M10.78 3.22a.75.75 0 010 1.06L7.06 8l3.72 3.72a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z"/>
+        </svg>
+      </button>`;
+    const nextBtn = html`
+      <button class="pagination__btn" @click=${this._next} ?disabled=${this.current >= this.total} aria-label="Next page" part="next">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M5.22 12.78a.75.75 0 010-1.06L8.94 8 5.22 4.28a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z"/>
+        </svg>
+      </button>`;
+
+    if (this.compact) {
+      return html`
+        <nav class="pagination" role="navigation" aria-label="Pagination" part="pagination">
+          ${prevBtn}
+          <span class="pagination__compact-label" part="label">${this.current} / ${this.total}</span>
+          ${nextBtn}
+        </nav>
+      `;
+    }
 
     return html`
       <nav class="pagination" role="navigation" aria-label="Pagination" part="pagination">
-        <button
-          class="pagination__btn"
-          @click=${this._prev}
-          ?disabled=${this.current <= 1}
-          aria-label="Previous page"
-          part="prev"
-        >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M10.78 3.22a.75.75 0 010 1.06L7.06 8l3.72 3.72a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z"/>
-          </svg>
-        </button>
-
+        ${prevBtn}
         ${pages.map(page =>
           page === '...'
             ? html`<span class="pagination__ellipsis" part="ellipsis" aria-hidden="true">&hellip;</span>`
@@ -166,18 +188,7 @@ export class ArcPagination extends LitElement {
               >${page}</button>
             `
         )}
-
-        <button
-          class="pagination__btn"
-          @click=${this._next}
-          ?disabled=${this.current >= this.total}
-          aria-label="Next page"
-          part="next"
-        >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M5.22 12.78a.75.75 0 010-1.06L8.94 8 5.22 4.28a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z"/>
-          </svg>
-        </button>
+        ${nextBtn}
       </nav>
     `;
   }

package/src/navigation/scroll-to-top.js

@@ -7,7 +7,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcScrollToTop extends LitElement {
   static properties = {
     threshold: { type: Number },
-    smooth:    { type: Boolean },
+    smooth:    { type: Boolean, reflect: true },
     position:  { type: String, reflect: true },
     offset:    { type: String },
     _visible:  { state: true },

package/src/navigation/sidebar.js

@@ -7,6 +7,7 @@ export class ArcSidebar extends LitElement {
   static properties = {
     active:    { type: String, reflect: true },
     collapsed: { type: Boolean, reflect: true },
+    position:  { type: String, reflect: true },
     width:     { type: String },
     glow:      { type: Boolean, reflect: true },
     _sections: { state: true },
@@ -55,7 +56,7 @@ export class ArcSidebar extends LitElement {
         pointer-events: none;
       }
 
-      /* Border line — solid default */
+      /* Border line — solid default (right edge) */
       .sidebar::after {
         content: '';
         position: absolute;
@@ -66,6 +67,22 @@ export class ArcSidebar extends LitElement {
         background: var(--border-subtle);
       }
 
+      /* Right position — border on left edge */
+      :host([position="right"]) .sidebar::after {
+        right: auto;
+        left: 0;
+      }
+
+      :host([position="right"][glow]) .sidebar::before {
+        right: auto;
+        left: 0;
+        background: radial-gradient(
+          ellipse at 0% 10%,
+          rgba(var(--accent-primary-rgb), 0.03),
+          transparent 60%
+        );
+      }
+
       /* Glow border variant */
       :host([glow]) .sidebar::after {
         background: var(--glow-line-blue);
@@ -247,6 +264,7 @@ export class ArcSidebar extends LitElement {
     super();
     this.active = '';
     this.collapsed = false;
+    this.position = 'left';
     this.width = '260px';
     this.glow = false;
     this._sections = [];

package/src/navigation/tabs.js

@@ -7,6 +7,8 @@ export class ArcTabs extends LitElement {
     /** @deprecated Use <arc-tab> children instead */
     items:    { type: Array },
     selected: { type: Number, reflect: true },
+    align:    { type: String, reflect: true },
+    variant:  { type: String, reflect: true },
     _tabs:    { state: true },
   };
 
@@ -23,6 +25,10 @@ export class ArcTabs extends LitElement {
         overflow-y: hidden;
       }
 
+      /* Alignment */
+      :host([align="center"]) .tabs__list { justify-content: center; }
+      :host([align="end"]) .tabs__list { justify-content: flex-end; }
+
       .tabs__tab {
         font-family: var(--font-accent);
         font-weight: 600;
@@ -37,7 +43,7 @@ export class ArcTabs extends LitElement {
         cursor: pointer;
         border-bottom: 2px solid transparent;
         margin-bottom: -1px;
-        transition: color var(--transition-fast), border-color var(--transition-fast);
+        transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
         white-space: nowrap;
       }
 
@@ -46,6 +52,27 @@ export class ArcTabs extends LitElement {
         color: var(--accent-primary);
         border-bottom-color: var(--accent-primary);
       }
+
+      /* Pills variant */
+      :host([variant="pills"]) .tabs__list {
+        border-bottom: none;
+        gap: var(--space-xs);
+      }
+
+      :host([variant="pills"]) .tabs__tab {
+        border-bottom: none;
+        margin-bottom: 0;
+        border-radius: var(--radius-sm);
+      }
+
+      :host([variant="pills"]) .tabs__tab:hover {
+        background: rgba(255, 255, 255, 0.08);
+      }
+
+      :host([variant="pills"]) .tabs__tab[aria-selected="true"] {
+        background: rgba(var(--accent-primary-rgb), 0.1);
+        color: var(--accent-primary);
+      }
       .tabs__tab:focus-visible {
         outline: none;
         box-shadow: var(--focus-ring);
@@ -82,6 +109,8 @@ export class ArcTabs extends LitElement {
     super();
     this.items = [];
     this.selected = 0;
+    this.align = 'start';
+    this.variant = 'underline';
     this._tabs = [];
   }
 

package/src/navigation/top-bar.js

@@ -11,6 +11,7 @@ export class ArcTopBar extends LitElement {
     menuOpen:     { type: Boolean, attribute: 'menu-open', reflect: true },
     mobileMenu:   { type: String, attribute: 'mobile-menu' },
     menuPosition: { type: String, attribute: 'menu-position' },
+    navAlign:     { type: String, attribute: 'nav-align' },
   };
 
   static styles = [
@@ -185,6 +186,7 @@ export class ArcTopBar extends LitElement {
     this.menuOpen = false;
     this.mobileMenu = 'sidebar';
     this.menuPosition = 'left';
+    this.navAlign = 'center';
     this._onExternalToggle = this._onExternalToggle.bind(this);
     this._onScroll = this._onScroll.bind(this);
   }
@@ -212,6 +214,12 @@ export class ArcTopBar extends LitElement {
     this.menuOpen = e.detail?.value ?? !this.menuOpen;
   }
 
+  get _navJustify() {
+    if (this.navAlign === 'left') return 'flex-start';
+    if (this.navAlign === 'right') return 'flex-end';
+    return 'center';
+  }
+
   _toggleMenu() {
     this.menuOpen = !this.menuOpen;
     const eventName = this.mobileMenu === 'nav' ? 'arc-mobile-menu-toggle' : 'arc-toggle';
@@ -252,7 +260,7 @@ export class ArcTopBar extends LitElement {
             ${this.heading ? html`<span class="topbar__heading">${this.heading}</span>` : ''}
             <slot name="subtitle"></slot>
           </a>
-          <div class="topbar__center" part="center">
+          <div class="topbar__center" part="center" style="justify-content:${this._navJustify}">
             <slot name="center"></slot>
           </div>
           <div class="topbar__actions" part="actions">

package/src/shared-styles.js

@@ -11,6 +11,12 @@ import { css } from 'lit';
  * as fallback defaults.
  */
 export const tokenStyles = css`
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
   :host {
     --font-body: 'Host Grotesk', system-ui, sans-serif;
     --font-accent: 'Tektur', system-ui, sans-serif;