@arclux/arc-ui 1.0.0

package/src/navigation/drawer.js

@@ -0,0 +1,183 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcDrawer extends LitElement {
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    position: { type: String, reflect: true },
+    heading:  { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .drawer__backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 200;
+        background: var(--overlay-backdrop);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--transition-base),
+          visibility var(--transition-base);
+      }
+
+      :host([open]) .drawer__backdrop {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .drawer__panel {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        z-index: 201;
+        width: 300px;
+        max-width: 85vw;
+        background: var(--bg-surface);
+        border-right: 1px solid var(--border-subtle);
+        display: flex;
+        flex-direction: column;
+        transition: transform var(--transition-base) var(--ease-out-expo);
+      }
+
+      :host(:not([position])) .drawer__panel,
+      :host([position="left"]) .drawer__panel {
+        left: 0;
+        transform: translateX(-100%);
+      }
+
+      :host([position="right"]) .drawer__panel {
+        right: 0;
+        left: auto;
+        border-right: none;
+        border-left: 1px solid var(--border-subtle);
+        transform: translateX(100%);
+      }
+
+      :host([open]) .drawer__panel {
+        transform: translateX(0);
+      }
+
+      .drawer__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-md) var(--space-lg);
+        border-bottom: 1px solid var(--border-subtle);
+        flex-shrink: 0;
+      }
+
+      .drawer__title {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-primary);
+      }
+
+      .drawer__close {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        transition: color var(--transition-fast), background var(--transition-fast);
+      }
+
+      .drawer__close:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .drawer__body {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.position = 'left';
+    this.heading = '';
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        document.addEventListener('keydown', this._onKeyDown);
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.body.style.overflow = '';
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._onKeyDown);
+    document.body.style.overflow = '';
+  }
+
+  _onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this._close();
+    }
+  }
+
+  _close() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _backdropClick() {
+    this._close();
+  }
+
+  render() {
+    return html`
+      <div class="drawer__backdrop" @click=${this._backdropClick} part="backdrop"></div>
+      <aside class="drawer__panel" role="dialog" aria-modal="true" aria-label=${this.heading || 'Drawer'} part="panel">
+        <div class="drawer__header" part="header">
+          <span class="drawer__title" part="title">${this.heading}</span>
+          <button class="drawer__close" @click=${this._close} aria-label="Close" part="close">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="drawer__body" part="body">
+          <slot></slot>
+        </div>
+      </aside>
+    `;
+  }
+}
+
+customElements.define('arc-drawer', ArcDrawer);

package/src/navigation/footer.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcFooter extends LitElement {
+  static properties = {
+    compact: { type: Boolean, reflect: true },
+    border: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--bg-deep);
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+      }
+
+      :host([border]) .footer {
+        border-top: 1px solid var(--border-subtle);
+      }
+
+      .footer {
+        padding: var(--space-2xl) var(--space-xl) var(--space-xl);
+      }
+
+      :host([compact]) .footer {
+        padding: var(--space-lg) var(--space-md) var(--space-md);
+      }
+
+      .footer__brand {
+        margin-bottom: var(--space-xl);
+      }
+
+      :host([compact]) .footer__brand {
+        margin-bottom: var(--space-md);
+      }
+
+      .footer__columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: var(--space-xl);
+        margin-bottom: var(--space-xl);
+      }
+
+      :host([compact]) .footer__columns {
+        gap: var(--space-md);
+        margin-bottom: var(--space-md);
+      }
+
+      .footer__social {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        margin-bottom: var(--space-lg);
+      }
+
+      :host([compact]) .footer__social {
+        margin-bottom: var(--space-sm);
+      }
+
+      .footer__legal {
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--border-subtle);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.compact = false;
+    this.border = true;
+  }
+
+  render() {
+    return html`
+      <footer class="footer" part="base">
+        <div class="footer__brand" part="brand">
+          <slot name="logo"></slot>
+        </div>
+        <div class="footer__columns" part="columns">
+          <slot></slot>
+        </div>
+        <div class="footer__social" part="social">
+          <slot name="social"></slot>
+        </div>
+        <div class="footer__legal" part="legal">
+          <slot name="legal"></slot>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('arc-footer', ArcFooter);

package/src/navigation/index.js

@@ -0,0 +1,22 @@
+// ARC UI — Navigation tier
+// Navigation, routing, and menu components
+
+export { ArcBreadcrumb } from './breadcrumb.js';
+export { ArcBreadcrumbItem } from './breadcrumb-item.js';
+export { ArcDrawer } from './drawer.js';
+export { ArcFooter } from './footer.js';
+export { ArcLink } from './link.js';
+export { ArcNavItem } from './nav-item.js';
+export { ArcNavigationMenu } from './navigation-menu.js';
+export { ArcPagination } from './pagination.js';
+export { ArcScrollSpy } from './scroll-spy.js';
+export { ArcScrollToTop } from './scroll-to-top.js';
+export { ArcSidebar } from './sidebar.js';
+export { ArcSidebarLink } from './sidebar-link.js';
+export { ArcSidebarSection } from './sidebar-section.js';
+export { ArcSpyLink } from './spy-link.js';
+export { ArcTab } from './tab.js';
+export { ArcTabs } from './tabs.js';
+export { ArcTopBar } from './top-bar.js';
+export { ArcTreeItem } from './tree-item.js';
+export { ArcTreeView } from './tree-view.js';

package/src/navigation/link.js

@@ -0,0 +1,120 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcLink extends LitElement {
+  static properties = {
+    href:     { type: String },
+    variant:  { type: String, reflect: true },
+    active:   { type: Boolean, reflect: true },
+    external: { type: Boolean },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline; }
+
+      .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;
+      }
+
+      .link:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      :host([variant="muted"]) .link {
+        color: var(--text-muted);
+      }
+      :host([variant="muted"]) .link:hover {
+        color: var(--text-primary);
+      }
+
+      :host([variant="nav"]) .link {
+        color: var(--text-secondary);
+        font-size: var(--text-sm);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+      :host([variant="nav"]) .link:hover {
+        color: var(--text-primary);
+        text-decoration: none;
+      }
+
+      :host([active]) .link {
+        color: var(--accent-primary);
+      }
+
+      .link:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-xs);
+      }
+
+      .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) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.href = '';
+    this.variant = 'default';
+    this.active = false;
+    this.external = false;
+  }
+
+  render() {
+    const target = this.external ? '_blank' : undefined;
+    const rel = this.external ? 'noopener noreferrer' : undefined;
+
+    return html`
+      <a
+        class="link"
+        href=${this.href}
+        target=${target || ''}
+        rel=${rel || ''}
+        part="link"
+      >
+        <slot></slot>
+        ${this.external ? html`
+          <svg class="link__external-icon" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5zm6.75 0a.75.75 0 000 1.5h1.94L8.22 7.72a.75.75 0 001.06 1.06l4.22-4.22v1.94a.75.75 0 001.5 0V2.75a.75.75 0 00-.75-.75h-4.5z"/>
+          </svg>
+        ` : ''}
+      </a>
+    `;
+  }
+}
+
+customElements.define('arc-link', ArcLink);

package/src/navigation/nav-item.js

@@ -0,0 +1,46 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @arc-prism interactive — nav item, child of arc-navigation-menu
+ */
+export class ArcNavItem extends LitElement {
+  static properties = {
+    href:        { type: String, reflect: true },
+    active:      { type: Boolean, reflect: true },
+    description: { type: String },
+  };
+
+  static styles = css`
+    :host { display: contents; }
+  `;
+
+  constructor() {
+    super();
+    this.href = '';
+    this.active = false;
+    this.description = '';
+  }
+
+  get label() {
+    return [...this.childNodes]
+      .filter(n => n.nodeType === Node.TEXT_NODE)
+      .map(n => n.textContent.trim())
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  /** Nested arc-nav-item children for dropdown menus */
+  get children() {
+    return [...this.querySelectorAll(':scope > arc-nav-item')];
+  }
+
+  get hasChildren() {
+    return this.children.length > 0;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-nav-item', ArcNavItem);