@beatzball/create-litro 0.1.4 → 0.2.0

package/recipes/starlight/template/src/components/sl-badge.ts

@@ -0,0 +1,76 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+type BadgeVariant = 'note' | 'tip' | 'caution' | 'danger' | 'default';
+
+/**
+ * <sl-badge variant="tip" text="New">
+ *   Inline color-coded chip. Use `text` attribute or slot content.
+ * </sl-badge>
+ */
+@customElement('sl-badge')
+export class SlBadge extends LitElement {
+  static override properties = {
+    variant: { type: String },
+    text: { type: String },
+  };
+
+  static override styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.15em 0.55em;
+      border-radius: 9999px;
+      font-size: var(--sl-text-xs, 0.75rem);
+      font-weight: 600;
+      line-height: 1.5;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .badge.note {
+      background-color: color-mix(in srgb, var(--sl-color-note, #1d4ed8) 15%, transparent);
+      color: var(--sl-color-note, #1d4ed8);
+    }
+
+    .badge.tip {
+      background-color: color-mix(in srgb, var(--sl-color-tip, #15803d) 15%, transparent);
+      color: var(--sl-color-tip, #15803d);
+    }
+
+    .badge.caution {
+      background-color: color-mix(in srgb, var(--sl-color-caution, #b45309) 15%, transparent);
+      color: var(--sl-color-caution, #b45309);
+    }
+
+    .badge.danger {
+      background-color: color-mix(in srgb, var(--sl-color-danger, #b91c1c) 15%, transparent);
+      color: var(--sl-color-danger, #b91c1c);
+    }
+
+    .badge.default {
+      background-color: var(--sl-color-accent-low, #ede9fe);
+      color: var(--sl-color-accent-high, #5b21b6);
+    }
+  `;
+
+  variant: BadgeVariant = 'default';
+  text = '';
+
+  override render() {
+    const cls = ['note', 'tip', 'caution', 'danger'].includes(this.variant)
+      ? this.variant
+      : 'default';
+    return html`
+      <span class="badge ${cls}">
+        ${this.text || html`<slot></slot>`}
+      </span>
+    `;
+  }
+}
+
+export default SlBadge;

package/recipes/starlight/template/src/components/sl-card-grid.ts

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-card-grid>
+ *   Responsive auto-fit grid for <sl-card> elements.
+ *   Single slot — place <sl-card> elements directly inside.
+ * </sl-card-grid>
+ */
+@customElement('sl-card-grid')
+export class SlCardGrid extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      counter-reset: card;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+      gap: 1.25rem;
+    }
+  `;
+
+  override render() {
+    return html`
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+export default SlCardGrid;

package/recipes/starlight/template/src/components/sl-card.ts

@@ -0,0 +1,91 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-card title="Feature" description="Short desc" href="/docs/feature">
+ *   Renders as an <a> when `href` is set, otherwise a <div>.
+ *   Rotating accent color per nth-card via CSS counter.
+ * </sl-card>
+ */
+@customElement('sl-card')
+export class SlCard extends LitElement {
+  static override properties = {
+    title: { type: String },
+    description: { type: String },
+    icon: { type: String },
+    href: { type: String },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+      counter-increment: card;
+    }
+
+    .card {
+      display: block;
+      padding: 1.25rem 1.5rem;
+      border: 1px solid var(--sl-color-border, #e8e8e8);
+      border-radius: var(--sl-border-radius, 0.375rem);
+      background-color: var(--sl-color-bg, #fff);
+      border-top: 4px solid;
+      text-decoration: none;
+      color: inherit;
+      transition: box-shadow 0.15s ease, transform 0.15s ease;
+    }
+
+    /* Rotate accent colors using counter — cycles through 4 variants */
+    :host(:nth-child(4n+1)) .card { border-top-color: var(--sl-color-accent, #7c3aed); }
+    :host(:nth-child(4n+2)) .card { border-top-color: var(--sl-color-note, #1d4ed8); }
+    :host(:nth-child(4n+3)) .card { border-top-color: var(--sl-color-tip, #15803d); }
+    :host(:nth-child(4n+0)) .card { border-top-color: var(--sl-color-caution, #b45309); }
+
+    a.card:hover {
+      box-shadow: var(--sl-shadow-md, 0 4px 16px rgba(0,0,0,.12));
+      transform: translateY(-2px);
+    }
+
+    .card-icon {
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .card-title {
+      font-size: var(--sl-text-lg, 1.125rem);
+      font-weight: 600;
+      color: var(--sl-color-text, #23262f);
+      margin: 0 0 0.4rem;
+    }
+
+    .card-desc {
+      font-size: var(--sl-text-sm, 0.875rem);
+      color: var(--sl-color-gray-4, #757575);
+      margin: 0;
+      line-height: 1.6;
+    }
+
+    .card-slot {
+      margin-top: 0.75rem;
+    }
+  `;
+
+  title = '';
+  description = '';
+  icon = '';
+  href = '';
+
+  override render() {
+    const inner = html`
+      ${this.icon ? html`<div class="card-icon">${this.icon}</div>` : ''}
+      <p class="card-title">${this.title}</p>
+      ${this.description ? html`<p class="card-desc">${this.description}</p>` : ''}
+      <div class="card-slot"><slot></slot></div>
+    `;
+
+    return this.href
+      ? html`<a class="card" href="${this.href}">${inner}</a>`
+      : html`<div class="card">${inner}</div>`;
+  }
+}
+
+export default SlCard;

package/recipes/starlight/template/src/components/sl-tab-item.ts

@@ -0,0 +1,35 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * <sl-tab-item label="Tab Label">
+ *   A single tab panel managed by a parent <sl-tabs> element.
+ *   Hidden automatically when not selected.
+ * </sl-tab-item>
+ */
+@customElement('sl-tab-item')
+export class SlTabItem extends LitElement {
+  static override properties = {
+    label: { type: String },
+    selected: { type: Boolean, reflect: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    :host(:not([selected])) {
+      display: none;
+    }
+  `;
+
+  label = '';
+  selected = false;
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+export default SlTabItem;

package/recipes/starlight/template/src/components/sl-tabs.ts

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { SlTabItem } from './sl-tab-item.js';
+
+/**
+ * <sl-tabs>
+ *   <sl-tab-item label="First">Content A</sl-tab-item>
+ *   <sl-tab-item label="Second">Content B</sl-tab-item>
+ * </sl-tabs>
+ *
+ * Reads slotted <sl-tab-item> elements via the slotchange event.
+ * Renders a tab bar in Shadow DOM; clicking selects the tab.
+ */
+@customElement('sl-tabs')
+export class SlTabs extends LitElement {
+  static override properties = {
+    _labels: { type: Array, state: true },
+    _selectedIndex: { type: Number, state: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+      margin: 1.5rem 0;
+    }
+
+    .tab-bar {
+      display: flex;
+      gap: 0;
+      border-bottom: 2px solid var(--sl-color-border, #e8e8e8);
+      overflow-x: auto;
+    }
+
+    .tab-btn {
+      appearance: none;
+      background: none;
+      border: none;
+      padding: 0.5rem 1rem;
+      font: inherit;
+      font-size: var(--sl-text-sm, 0.875rem);
+      font-weight: 500;
+      cursor: pointer;
+      color: var(--sl-color-gray-4, #757575);
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+      white-space: nowrap;
+      transition: color 0.15s, border-color 0.15s;
+    }
+
+    .tab-btn:hover {
+      color: var(--sl-color-text, #23262f);
+    }
+
+    .tab-btn[aria-selected='true'] {
+      color: var(--sl-color-accent, #7c3aed);
+      border-bottom-color: var(--sl-color-accent, #7c3aed);
+    }
+
+    .tab-content {
+      padding-top: 1rem;
+    }
+  `;
+
+  _labels: string[] = [];
+  _selectedIndex = 0;
+
+  private _items(): SlTabItem[] {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return [];
+    return slot.assignedElements().filter(
+      (el): el is SlTabItem => el.tagName.toLowerCase() === 'sl-tab-item',
+    );
+  }
+
+  private _onSlotChange() {
+    const items = this._items();
+    this._labels = items.map((item) => item.label || `Tab ${items.indexOf(item) + 1}`);
+    this._selectIndex(this._selectedIndex < items.length ? this._selectedIndex : 0, items);
+  }
+
+  private _selectIndex(index: number, items?: SlTabItem[]) {
+    const all = items ?? this._items();
+    this._selectedIndex = index;
+    all.forEach((item, i) => {
+      item.selected = i === index;
+    });
+  }
+
+  override render() {
+    return html`
+      <div class="tab-bar" role="tablist">
+        ${this._labels.map((label, i) => html`
+          <button
+            class="tab-btn"
+            role="tab"
+            aria-selected="${this._selectedIndex === i ? 'true' : 'false'}"
+            @click=${() => this._selectIndex(i)}
+          >${label}</button>
+        `)}
+      </div>
+      <div class="tab-content">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+export default SlTabs;

package/recipes/starlight/template/src/components/starlight-header.ts

@@ -0,0 +1,152 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+export interface NavItem {
+  label: string;
+  href: string;
+}
+
+/**
+ * <starlight-header siteTitle="My Docs" .nav=${nav} currentPath="/docs/getting-started">
+ *   Top navigation bar with site title, nav links, and dark/light theme toggle.
+ */
+@customElement('starlight-header')
+export class StarlightHeader extends LitElement {
+  static override properties = {
+    siteTitle: { type: String },
+    nav: { type: Array },
+    currentPath: { type: String },
+    _theme: { type: String, state: true },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      height: var(--sl-nav-height, 3.5rem);
+      background-color: var(--sl-color-bg-nav, #fff);
+      border-bottom: 1px solid var(--sl-color-border, #e8e8e8);
+      display: flex;
+      align-items: center;
+      padding: 0 var(--sl-content-pad-x, 1.5rem);
+      gap: 1.5rem;
+    }
+
+    .site-title {
+      font-size: var(--sl-text-lg, 1.125rem);
+      font-weight: 700;
+      color: var(--sl-color-text, #23262f);
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .site-title:hover { opacity: 0.85; }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex: 1;
+    }
+
+    nav a {
+      padding: 0.35rem 0.75rem;
+      font-size: var(--sl-text-sm, 0.875rem);
+      font-weight: 500;
+      color: var(--sl-color-gray-5, #4b4b4b);
+      text-decoration: none;
+      border-radius: var(--sl-border-radius, 0.375rem);
+      transition: color 0.15s, background-color 0.15s;
+    }
+
+    nav a:hover {
+      color: var(--sl-color-text, #23262f);
+      background-color: var(--sl-color-gray-2, #e8e8e8);
+    }
+
+    nav a[aria-current='page'] {
+      color: var(--sl-color-accent, #7c3aed);
+      background-color: var(--sl-color-accent-low, #ede9fe);
+    }
+
+    .theme-toggle {
+      margin-left: auto;
+      appearance: none;
+      background: none;
+      border: 1px solid var(--sl-color-border, #e8e8e8);
+      border-radius: var(--sl-border-radius, 0.375rem);
+      width: 2.25rem;
+      height: 2.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 1rem;
+      color: var(--sl-color-text, #23262f);
+      transition: background-color 0.15s;
+      flex-shrink: 0;
+    }
+
+    .theme-toggle:hover {
+      background-color: var(--sl-color-gray-2, #e8e8e8);
+    }
+  `;
+
+  siteTitle = '';
+  nav: NavItem[] = [];
+  currentPath = '';
+
+  _theme = 'light';
+
+  override firstUpdated() {
+    const stored = (typeof localStorage !== 'undefined'
+      ? localStorage.getItem('sl-theme')
+      : null) ?? 'light';
+    this._theme = stored;
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', stored);
+    }
+  }
+
+  private _toggleTheme() {
+    const next = this._theme === 'light' ? 'dark' : 'light';
+    this._theme = next;
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('sl-theme', next);
+    }
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', next);
+    }
+  }
+
+  override render() {
+    const icon = this._theme === 'dark' ? '☀️' : '🌙';
+    const label = this._theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+
+    return html`
+      <header>
+        <a class="site-title" href="/">${this.siteTitle}</a>
+        <nav aria-label="Main navigation">
+          ${this.nav.map(item => html`
+            <a
+              href="${item.href}"
+              aria-current="${this.currentPath.startsWith(item.href) ? 'page' : 'false'}"
+            >${item.label}</a>
+          `)}
+        </nav>
+        <button
+          class="theme-toggle"
+          aria-label="${label}"
+          @click="${this._toggleTheme}"
+        >${icon}</button>
+      </header>
+    `;
+  }
+}
+
+export default StarlightHeader;

package/recipes/starlight/template/src/components/starlight-page.ts

@@ -0,0 +1,168 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { NavItem } from './starlight-header.js';
+import type { SidebarGroup } from './starlight-sidebar.js';
+import type { TocEntry } from '../extract-headings.js';
+
+// Side-effect imports — registers child custom elements
+import './starlight-header.js';
+import './starlight-sidebar.js';
+import './starlight-toc.js';
+
+/**
+ * <starlight-page
+ *   siteTitle="My Docs"
+ *   pageTitle="Getting Started"
+ *   .nav=${nav}
+ *   .sidebar=${sidebar}
+ *   .toc=${toc}
+ *   currentSlug="getting-started"
+ *   currentPath="/docs/getting-started"
+ * >
+ *   <div slot="content">…rendered HTML…</div>
+ * </starlight-page>
+ *
+ * Three-column grid layout: sidebar | content | TOC.
+ * Responsive: single column below 768px, sidebar/TOC collapsed.
+ */
+@customElement('starlight-page')
+export class StarlightPage extends LitElement {
+  static override properties = {
+    siteTitle:   { type: String },
+    pageTitle:   { type: String },
+    nav:         { type: Array },
+    sidebar:     { type: Array },
+    toc:         { type: Array },
+    currentSlug: { type: String },
+    currentPath: { type: String },
+    noSidebar:   { type: Boolean },
+  };
+
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .page-wrap {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .body {
+      display: grid;
+      grid-template-columns: var(--sl-sidebar-width, 16rem) 1fr var(--sl-toc-width, 14rem);
+      grid-template-areas: 'sidebar content toc';
+      flex: 1;
+      max-width: 90rem;
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    .body.no-sidebar {
+      grid-template-columns: 1fr;
+      grid-template-areas: 'content';
+    }
+
+    .sidebar-wrap {
+      grid-area: sidebar;
+      border-right: 1px solid var(--sl-color-border, #e8e8e8);
+      background-color: var(--sl-color-bg-sidebar, #f6f6f6);
+      position: sticky;
+      top: var(--sl-nav-height, 3.5rem);
+      height: calc(100vh - var(--sl-nav-height, 3.5rem));
+      overflow-y: auto;
+    }
+
+    .content-wrap {
+      grid-area: content;
+      padding: var(--sl-content-pad-y, 2rem) var(--sl-content-pad-x, 1.5rem);
+      min-width: 0;
+    }
+
+    .content-inner {
+      max-width: var(--sl-content-width, 48rem);
+    }
+
+    .toc-wrap {
+      grid-area: toc;
+      padding: var(--sl-content-pad-y, 2rem) 0 var(--sl-content-pad-y, 2rem) var(--sl-content-pad-x, 1.5rem);
+      border-left: 1px solid var(--sl-color-border, #e8e8e8);
+    }
+
+    .page-title {
+      font-size: var(--sl-text-4xl, 2.25rem);
+      font-weight: 700;
+      color: var(--sl-color-text, #23262f);
+      margin: 0 0 1.5rem;
+      line-height: 1.15;
+    }
+
+    /* Responsive: hide sidebar and TOC on narrow screens */
+    @media (max-width: 72rem) {
+      .body {
+        grid-template-columns: 1fr var(--sl-toc-width, 14rem);
+        grid-template-areas: 'content toc';
+      }
+
+      .sidebar-wrap {
+        display: none;
+      }
+    }
+
+    @media (max-width: 48rem) {
+      .body {
+        grid-template-columns: 1fr;
+        grid-template-areas: 'content';
+      }
+
+      .toc-wrap {
+        display: none;
+      }
+    }
+  `;
+
+  siteTitle = '';
+  pageTitle = '';
+  nav: NavItem[] = [];
+  sidebar: SidebarGroup[] = [];
+  toc: TocEntry[] = [];
+  currentSlug = '';
+  currentPath = '';
+  noSidebar = false;
+
+  override render() {
+    return html`
+      <div class="page-wrap">
+        <starlight-header
+          siteTitle="${this.siteTitle}"
+          .nav="${this.nav}"
+          currentPath="${this.currentPath}"
+        ></starlight-header>
+        <div class="body${this.noSidebar ? ' no-sidebar' : ''}">
+          ${!this.noSidebar ? html`
+            <aside class="sidebar-wrap">
+              <starlight-sidebar
+                .groups="${this.sidebar}"
+                currentSlug="${this.currentSlug}"
+              ></starlight-sidebar>
+            </aside>
+          ` : ''}
+          <main class="content-wrap">
+            <div class="content-inner">
+              ${this.pageTitle ? html`<h1 class="page-title">${this.pageTitle}</h1>` : ''}
+              <slot name="content"></slot>
+            </div>
+          </main>
+          ${!this.noSidebar ? html`
+            <aside class="toc-wrap">
+              <starlight-toc .entries="${this.toc}"></starlight-toc>
+            </aside>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default StarlightPage;