@arclux/arc-ui 1.0.0

package/src/input/theme-toggle.js

@@ -0,0 +1,196 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcThemeToggle extends LitElement {
+  static properties = {
+    theme:    { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    iconOnly: { type: Boolean, attribute: 'icon-only', reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .theme-toggle {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-sm);
+        background: transparent;
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        cursor: pointer;
+        padding: var(--space-sm);
+        min-width: 90px;
+        transition:
+          background var(--transition-fast),
+          border-color var(--transition-fast),
+          color var(--transition-fast),
+          box-shadow var(--transition-fast);
+      }
+
+      :host([icon-only]) .theme-toggle {
+        min-width: 0;
+        padding: calc(var(--space-xs) + 2px);
+        border-radius: var(--radius-full);
+        width: 36px;
+        height: 36px;
+      }
+
+      .theme-toggle:hover {
+        border-color: var(--border-bright);
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .theme-toggle:active {
+        transform: scale(0.95);
+      }
+
+      .theme-toggle:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      /* ── Icon container ── */
+      .theme-toggle__icon {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+
+      /* All three icons sit on top of each other, opacity-animated */
+      .theme-toggle__icon svg {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        transform: scale(0.5) rotate(-90deg);
+        transition: opacity 300ms var(--ease-out-expo), transform 300ms var(--ease-out-expo);
+      }
+
+      .theme-toggle__icon svg.is-active {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+      }
+
+      /* ── Label ── */
+      .theme-toggle__label {
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        text-transform: capitalize;
+        user-select: none;
+        width: 32px;
+        text-align: left;
+      }
+
+      :host([icon-only]) .theme-toggle__label {
+        display: none;
+      }
+
+      @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;
+        }
+      }
+    `,
+  ];
+
+  static _themeOrder = ['dark', 'light', 'auto'];
+
+  constructor() {
+    super();
+    this.theme = 'auto';
+    this.disabled = false;
+    this.iconOnly = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const stored = localStorage.getItem('arc-theme');
+    if (stored && ArcThemeToggle._themeOrder.includes(stored)) {
+      this.theme = stored;
+    } else {
+      this.theme = document.documentElement.getAttribute('data-theme') || 'auto';
+    }
+  }
+
+  _cycle() {
+    if (this.disabled) return;
+
+    const order = ArcThemeToggle._themeOrder;
+    const currentIdx = order.indexOf(this.theme);
+    const nextIdx = (currentIdx + 1) % order.length;
+    this.theme = order[nextIdx];
+
+    document.documentElement.setAttribute('data-theme', this.theme);
+    localStorage.setItem('arc-theme', this.theme);
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.theme },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleKeydown(e) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this._cycle();
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        class="theme-toggle"
+        @click=${this._cycle}
+        @keydown=${this._handleKeydown}
+        ?disabled=${this.disabled}
+        aria-label="Toggle theme, current: ${this.theme}"
+        title="Theme: ${this.theme}"
+        part="button"
+      >
+        <span class="theme-toggle__icon" part="icon">
+          <!-- Sun -->
+          <svg class="${this.theme === 'light' ? 'is-active' : ''}" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="5"/>
+            <line x1="12" y1="1" x2="12" y2="3"/>
+            <line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/>
+            <line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <!-- Moon -->
+          <svg class="${this.theme === 'dark' ? 'is-active' : ''}" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+          </svg>
+          <!-- Monitor (auto) -->
+          <svg class="${this.theme === 'auto' ? 'is-active' : ''}" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+            <line x1="8" y1="21" x2="16" y2="21"/>
+            <line x1="12" y1="17" x2="12" y2="21"/>
+          </svg>
+        </span>
+        <span class="theme-toggle__label" part="label">${this.theme}</span>
+      </button>
+    `;
+  }
+}
+
+customElements.define('arc-theme-toggle', ArcThemeToggle);

package/src/input/toggle.js

@@ -0,0 +1,166 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcToggle extends LitElement {
+  static formAssociated = true;
+
+  static properties = {
+    checked:  { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    label:    { type: String },
+    name:     { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; align-items: center; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-sm);
+        cursor: pointer;
+      }
+
+      .toggle__track {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        border-radius: var(--radius-full);
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-bright);
+        transition:
+          background var(--transition-base),
+          border-color var(--transition-base),
+          box-shadow var(--transition-base);
+        flex-shrink: 0;
+      }
+
+      .toggle__track:hover {
+        border-color: var(--text-muted);
+      }
+
+      :host([checked]) .toggle__track {
+        background: var(--accent-primary);
+        border-color: transparent;
+        box-shadow:
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 20px rgba(var(--accent-primary-rgb), 0.3),
+          0 0 40px rgba(var(--accent-primary-rgb), 0.15);
+      }
+
+      :host([checked]) .toggle__track:hover {
+        box-shadow:
+          0 0 10px rgba(var(--accent-primary-rgb), 0.6),
+          0 0 28px rgba(var(--accent-primary-rgb), 0.35),
+          0 0 50px rgba(var(--accent-primary-rgb), 0.2);
+      }
+
+      .toggle__thumb {
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 16px;
+        height: 16px;
+        border-radius: var(--radius-full);
+        background: var(--text-primary);
+        transition:
+          transform var(--transition-base),
+          box-shadow var(--transition-base);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      }
+
+      :host([checked]) .toggle__thumb {
+        transform: translateX(20px);
+        box-shadow:
+          0 1px 3px rgba(0, 0, 0, 0.2),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 16px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      .toggle__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        user-select: none;
+      }
+
+      .toggle__track:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      :host([checked]) .toggle__track:focus-visible {
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.25),
+          0 0 10px rgba(var(--accent-primary-rgb), 0.6),
+          0 0 28px rgba(var(--accent-primary-rgb), 0.35),
+          0 0 50px rgba(var(--accent-primary-rgb), 0.2);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .toggle__track,
+        .toggle__thumb { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.checked = false;
+    this.disabled = false;
+    this.label = '';
+    this.name = '';
+  }
+
+  updated(changed) {
+    if (changed.has('checked')) {
+      this._internals.setFormValue(this.checked ? 'on' : null);
+    }
+  }
+
+  _toggle() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this._internals.setFormValue(this.checked ? 'on' : null);
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleKeydown(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      this._toggle();
+    }
+  }
+
+  render() {
+    return html`
+      <label class="toggle" part="toggle">
+        <div
+          class="toggle__track"
+          role="switch"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @click=${this._toggle}
+          @keydown=${this._handleKeydown}
+          part="track"
+        >
+          <div class="toggle__thumb" part="thumb"></div>
+        </div>
+        ${this.label ? html`<span class="toggle__label" part="label">${this.label}</span>` : ''}
+      </label>
+    `;
+  }
+}
+
+customElements.define('arc-toggle', ArcToggle);

package/src/layout/app-shell.js

@@ -0,0 +1,266 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAppShell extends LitElement {
+  static properties = {
+    sidebarOpen:  { type: Boolean, reflect: true, attribute: 'sidebar-open' },
+    breakpoint:   { type: Number },
+    _mobile:      { state: true },
+    _hasToc:      { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        min-height: 100vh;
+        background: var(--bg-deep);
+        color: var(--text-primary);
+      }
+
+      .shell {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+
+      /* Topbar sits above everything */
+      .shell__topbar {
+        position: relative;
+        z-index: 200;
+      }
+
+      .shell__body {
+        display: flex;
+        flex: 1;
+        padding-top: var(--nav-height);
+      }
+
+      /* ── Desktop sidebar ── */
+      .shell__sidebar {
+        flex-shrink: 0;
+        width: 260px;
+        position: sticky;
+        top: var(--nav-height);
+        height: calc(100vh - var(--nav-height));
+        overflow-y: auto;
+        overflow-x: hidden;
+        z-index: 1;
+      }
+
+      .shell__main {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+      }
+
+      .shell__content {
+        flex: 3;
+        min-width: 0;
+        padding: var(--space-xl) var(--space-xl);
+      }
+
+      .shell__toc {
+        flex: 1;
+        min-width: 0;
+        max-width: 260px;
+        position: sticky;
+        top: calc(var(--nav-height) + var(--space-xl));
+        align-self: flex-start;
+        max-height: calc(100vh - var(--nav-height) - var(--space-2xl));
+        overflow-y: auto;
+        padding: var(--space-md) var(--space-lg) var(--space-md) 0;
+        margin-bottom: var(--space-xl);
+        border-left: 1px solid var(--border-subtle);
+      }
+
+      .shell__toc--empty { display: none; }
+
+      @media (max-width: 1280px) {
+        .shell__toc { display: none; }
+      }
+
+      :host([mobile]) .shell__toc {
+        margin-bottom: var(--space-xl);
+      }
+
+      :host([mobile]) .shell__content {
+        padding: var(--space-lg);
+      }
+
+      /* ── Mobile overlay ── */
+      :host([mobile]) .shell__sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 99;
+        height: auto;
+        width: 300px;
+        max-width: 85vw;
+        transform: translateX(-100%);
+        transition: transform 250ms var(--ease-out-expo);
+        background: var(--bg-surface);
+        padding-top: var(--nav-height);
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-default) transparent;
+      }
+
+      /* Override arc-sidebar's own sticky/height — the shell wrapper handles it */
+      ::slotted(arc-sidebar) {
+        position: static !important;
+        height: auto !important;
+        overflow: visible !important;
+        width: 100% !important;
+      }
+
+      :host([mobile][sidebar-open]) .shell__sidebar {
+        transform: translateX(0);
+      }
+
+      /* Backdrop */
+      .shell__backdrop {
+        display: none;
+      }
+
+      :host([mobile]) .shell__backdrop {
+        display: block;
+        position: fixed;
+        inset: 0;
+        z-index: 97;
+        background: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 200ms ease,
+          visibility 200ms ease;
+        -webkit-backdrop-filter: blur(2px);
+        backdrop-filter: blur(2px);
+      }
+
+      :host([mobile][sidebar-open]) .shell__backdrop {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Body scroll lock when open */
+      @media (prefers-reduced-motion: reduce) {
+        :host([mobile]) .shell__sidebar {
+          transition: none;
+        }
+        :host([mobile]) .shell__backdrop {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.sidebarOpen = false;
+    this.breakpoint = 900;
+    this._mobile = false;
+    this._hasToc = false;
+    this._onToggle = this._onToggle.bind(this);
+    this._onNavigate = this._onNavigate.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+    this._onResize = this._onResize.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('arc-toggle', this._onToggle);
+    this.addEventListener('arc-navigate', this._onNavigate);
+    document.addEventListener('keydown', this._onKeyDown);
+    window.addEventListener('resize', this._onResize);
+    this._checkMobile();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('arc-toggle', this._onToggle);
+    this.removeEventListener('arc-navigate', this._onNavigate);
+    document.removeEventListener('keydown', this._onKeyDown);
+    window.removeEventListener('resize', this._onResize);
+    document.body.style.overflow = '';
+  }
+
+  updated(changed) {
+    if (changed.has('_mobile')) {
+      if (this._mobile) {
+        this.setAttribute('mobile', '');
+      } else {
+        this.removeAttribute('mobile');
+        // Close sidebar when switching to desktop
+        this.sidebarOpen = false;
+      }
+    }
+    if (changed.has('sidebarOpen')) {
+      if (this._mobile) {
+        document.body.style.overflow = this.sidebarOpen ? 'hidden' : '';
+      }
+    }
+  }
+
+  _checkMobile() {
+    this._mobile = window.innerWidth <= this.breakpoint;
+  }
+
+  _onResize() {
+    this._checkMobile();
+  }
+
+  _onToggle(e) {
+    // Fired by arc-top-bar hamburger
+    this.sidebarOpen = !this.sidebarOpen;
+  }
+
+  _onNavigate(e) {
+    // Auto-close sidebar on navigation in mobile mode
+    if (this._mobile && this.sidebarOpen) {
+      this.sidebarOpen = false;
+    }
+  }
+
+  _onKeyDown(e) {
+    if (e.key === 'Escape' && this._mobile && this.sidebarOpen) {
+      this.sidebarOpen = false;
+    }
+  }
+
+  _backdropClick() {
+    this.sidebarOpen = false;
+  }
+
+  _onTocSlotChange(e) {
+    const nodes = e.target.assignedElements({ flatten: true });
+    this._hasToc = nodes.some(n => n.children.length > 0 || n.textContent.trim());
+  }
+
+  render() {
+    return html`
+      <div class="shell" part="shell">
+        <div class="shell__topbar"><slot name="topbar"></slot></div>
+        <div class="shell__body" part="body">
+          <div class="shell__backdrop" @click=${this._backdropClick}></div>
+          <div class="shell__sidebar" part="sidebar">
+            <slot name="sidebar"></slot>
+          </div>
+          <div class="shell__main" part="main">
+            <div class="shell__content" part="content">
+              <slot></slot>
+            </div>
+            <div class="shell__toc ${this._hasToc ? '' : 'shell__toc--empty'}" part="toc">
+              <slot name="toc" @slotchange=${this._onTocSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-app-shell', ArcAppShell);