@arclux/arc-ui 1.0.0

package/src/content/highlight.js

@@ -0,0 +1,63 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcHighlight extends LitElement {
+  static properties = {
+    text:          { type: String },
+    query:         { type: String },
+    caseSensitive: { type: Boolean, reflect: true, attribute: 'case-sensitive' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline; }
+
+      mark {
+        background: var(--accent-primary-subtle);
+        color: var(--accent-primary);
+        border-radius: var(--radius-sm);
+        padding: 1px var(--space-xs); /* cosmetic 1px vertical for inline highlight */
+        font-style: inherit;
+        font-weight: inherit;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.text = '';
+    this.query = '';
+    this.caseSensitive = false;
+  }
+
+  /** Escape regex special characters so arbitrary query strings are safe. */
+  _escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  render() {
+    if (!this.query || !this.text) {
+      return html`<span part="text">${this.text}</span>`;
+    }
+
+    const flags = this.caseSensitive ? 'g' : 'gi';
+    let regex;
+    try {
+      regex = new RegExp(`(${this._escapeRegex(this.query)})`, flags);
+    } catch {
+      return html`<span part="text">${this.text}</span>`;
+    }
+
+    const parts = this.text.split(regex);
+
+    // After split-by-captured-group, odd indices are matched segments.
+    return html`<span part="text">${parts.map((segment, i) =>
+      i % 2 === 1
+        ? html`<mark part="mark">${segment}</mark>`
+        : segment
+    )}</span>`;
+  }
+}
+
+customElements.define('arc-highlight', ArcHighlight);

package/src/content/icon-library.js

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { iconRegistry } from './icon-registry.js';
+
+export class ArcIconLibrary extends LitElement {
+  static properties = {
+    name: { type: String, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.name = 'phosphor';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    iconRegistry.use(this.name);
+  }
+
+  updated(changed) {
+    if (changed.has('name')) {
+      iconRegistry.use(this.name);
+    }
+  }
+
+  render() {
+    return undefined;
+  }
+}
+
+customElements.define('arc-icon-library', ArcIconLibrary);

package/src/content/icon-registry.js

@@ -0,0 +1,39 @@
+import phosphorIcons from '../icons/phosphor.js';
+import lucideIcons from '../icons/lucide.js';
+
+const packs = { phosphor: phosphorIcons, lucide: lucideIcons };
+
+let _active = null;
+
+export const iconRegistry = {
+  /** Select a built-in icon library: 'phosphor' (default) or 'lucide'. */
+  use(library) {
+    const pack = packs[library];
+    if (!pack) throw new Error(`Unknown icon library "${library}". Use "phosphor" or "lucide".`);
+    _active = pack;
+  },
+
+  /** Register additional custom icons (merged on top of the active library). */
+  set(icons) {
+    if (!_active) _active = { ...packs.phosphor };
+    for (const [key, val] of Object.entries(icons)) {
+      const kebab = key
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase();
+      _active[kebab] = val;
+    }
+  },
+
+  /** Look up an icon by kebab-case name. */
+  get(name) {
+    if (!_active) _active = packs.phosphor;
+    return _active[name] ?? null;
+  },
+
+  /** List all icon names in a library (defaults to active). */
+  list(library) {
+    const pack = library ? packs[library] : (_active || packs.phosphor);
+    return Object.keys(pack);
+  },
+};

package/src/content/icon.js

@@ -0,0 +1,95 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import { iconRegistry } from './icon-registry.js';
+
+const _svgCache = new Map();
+
+/** Parse an SVG string into a sanitized SVG element, stripping scripts and event handlers. */
+function sanitizeSvg(svgStr) {
+  if (_svgCache.has(svgStr)) return _svgCache.get(svgStr).cloneNode(true);
+  const doc = new DOMParser().parseFromString(svgStr, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+  if (!svg) return null;
+  // Strip <script> and any elements with event handler attributes
+  for (const el of svg.querySelectorAll('script')) el.remove();
+  const walk = svg.querySelectorAll('*');
+  for (const el of walk) {
+    for (const attr of [...el.attributes]) {
+      if (attr.name.startsWith('on')) el.removeAttribute(attr.name);
+    }
+  }
+  _svgCache.set(svgStr, svg);
+  return svg.cloneNode(true);
+}
+
+export class ArcIcon extends LitElement {
+  static properties = {
+    name:  { type: String, reflect: true },
+    size:  { type: String, reflect: true },
+    label: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: currentColor;
+        vertical-align: middle;
+      }
+
+      :host([size="xs"]) { width: 12px; height: 12px; }
+      :host(:not([size])),
+      :host([size="sm"]) { width: 16px; height: 16px; }
+      :host([size="md"]) { width: 20px; height: 20px; }
+      :host([size="lg"]) { width: 24px; height: 24px; }
+      :host([size="xl"]) { width: 32px; height: 32px; }
+
+      .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      ::slotted(svg) {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.name = '';
+    this.size = 'sm';
+    this.label = '';
+  }
+
+  render() {
+    const svgStr = this.name ? iconRegistry.get(this.name) : null;
+    const svgNode = svgStr ? sanitizeSvg(svgStr) : null;
+    return html`
+      <span
+        class="icon"
+        role=${this.label ? 'img' : 'presentation'}
+        aria-label=${this.label || ''}
+        aria-hidden=${this.label ? 'false' : 'true'}
+        part="icon"
+      >
+        ${svgNode ?? html`<slot></slot>`}
+      </span>
+    `;
+  }
+}
+
+customElements.define('arc-icon', ArcIcon);

package/src/content/index.js

@@ -0,0 +1,44 @@
+// ARC UI — Content tier
+// Presentational and content display components
+
+export { ArcAccordion } from './accordion.js';
+export { ArcAccordionItem } from './accordion-item.js';
+export { ArcAnimatedNumber } from './animated-number.js';
+export { ArcAspectRatio } from './aspect-ratio.js';
+export { ArcAvatar } from './avatar.js';
+export { ArcAvatarGroup } from './avatar-group.js';
+export { ArcBadge } from './badge.js';
+export { ArcCallout } from './callout.js';
+export { ArcCard } from './card.js';
+export { ArcCarousel } from './carousel.js';
+export { ArcCodeBlock } from './code-block.js';
+export { ArcCollapsible } from './collapsible.js';
+export { ArcColorSwatch } from './color-swatch.js';
+export { ArcColumn } from './column.js';
+export { ArcDataTable } from './data-table.js';
+export { ArcDivider } from './divider.js';
+export { ArcEmptyState } from './empty-state.js';
+export { ArcFeatureCard } from './feature-card.js';
+export { ArcHighlight } from './highlight.js';
+export { ArcIcon } from './icon.js';
+export { ArcIconLibrary } from './icon-library.js';
+export { iconRegistry } from './icon-registry.js';
+export { ArcInfiniteScroll } from './infinite-scroll.js';
+export { ArcKbd } from './kbd.js';
+export { ArcMarkdown } from './markdown.js';
+export { ArcMarquee } from './marquee.js';
+export { ArcMeter } from './meter.js';
+export { ArcScrollArea } from './scroll-area.js';
+export { ArcSkeleton } from './skeleton.js';
+export { ArcSpinner } from './spinner.js';
+export { ArcStack } from './stack.js';
+export { ArcStat } from './stat.js';
+export { ArcStep } from './step.js';
+export { ArcStepper } from './stepper.js';
+export { ArcTable } from './table.js';
+export { ArcTag } from './tag.js';
+export { ArcText } from './text.js';
+export { ArcTimeline } from './timeline.js';
+export { ArcTimelineItem } from './timeline-item.js';
+export { ArcTruncate } from './truncate.js';
+export { ArcValueCard } from './value-card.js';

package/src/content/infinite-scroll.js

@@ -0,0 +1,144 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../content/spinner.js';
+
+export class ArcInfiniteScroll extends LitElement {
+  static properties = {
+    threshold: { type: Number },
+    loading:   { type: Boolean, reflect: true },
+    finished:  { type: Boolean, reflect: true },
+    disabled:  { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+      }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .infinite-scroll {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .infinite-scroll__content {
+        display: contents;
+      }
+
+      .infinite-scroll__footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-lg) 0;
+        min-height: 48px;
+      }
+
+      .infinite-scroll__sentinel {
+        width: 100%;
+        height: 1px;
+        pointer-events: none;
+      }
+
+      .infinite-scroll__end-text {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-muted);
+        text-align: center;
+        user-select: none;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.threshold = 200;
+    this.loading = false;
+    this.finished = false;
+    this.disabled = false;
+    this._observer = null;
+  }
+
+  firstUpdated() {
+    this._setupObserver();
+  }
+
+  updated(changed) {
+    if (changed.has('finished') || changed.has('disabled')) {
+      this._setupObserver();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._destroyObserver();
+  }
+
+  _setupObserver() {
+    this._destroyObserver();
+
+    if (this.finished || this.disabled) return;
+
+    const sentinel = this.shadowRoot.querySelector('.infinite-scroll__sentinel');
+    if (!sentinel) return;
+
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry && entry.isIntersecting && !this.loading && !this.finished && !this.disabled) {
+          this.dispatchEvent(new CustomEvent('arc-load-more', {
+            bubbles: true,
+            composed: true,
+          }));
+        }
+      },
+      {
+        rootMargin: `0px 0px ${this.threshold}px 0px`,
+      },
+    );
+
+    this._observer.observe(sentinel);
+  }
+
+  _destroyObserver() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="infinite-scroll"
+        role="feed"
+        aria-busy=${this.loading ? 'true' : 'false'}
+        part="container"
+      >
+        <div class="infinite-scroll__content" part="content">
+          <slot></slot>
+        </div>
+
+        ${this.finished
+          ? html`
+            <div class="infinite-scroll__footer" part="footer">
+              <span class="infinite-scroll__end-text" part="end-text">No more items</span>
+            </div>
+          `
+          : html`
+            <div class="infinite-scroll__footer" part="footer">
+              ${this.loading
+                ? html`<arc-spinner size="sm" part="spinner"></arc-spinner>`
+                : ''
+              }
+            </div>
+            <div class="infinite-scroll__sentinel"></div>
+          `
+        }
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-infinite-scroll', ArcInfiniteScroll);

package/src/content/kbd.js

@@ -0,0 +1,40 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcKbd extends LitElement {
+  static properties = {};
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline; }
+
+      .kbd {
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: 1;
+        color: var(--text-secondary);
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-default);
+        border-bottom-width: 2px;
+        border-radius: var(--radius-sm);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for kbd element */
+        white-space: nowrap;
+        user-select: none;
+        vertical-align: baseline;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`<kbd class="kbd" part="kbd"><slot></slot></kbd>`;
+  }
+}
+
+customElements.define('arc-kbd', ArcKbd);