Cookbook patterns

<atl-card variant="elevated" padding="lg">
  <atl-card-header>
    <h3>Sign in</h3>
  </atl-card-header>
  <atl-card-content>
    @if (showError()) {
      <atl-alert variant="danger">Invalid email or password.</atl-alert>
    }
    <atl-input type="email" placeholder="you@example.com" [invalid]="showError()" />
    <atl-input type="password" placeholder="••••••••" [invalid]="showError()" />
    <atl-checkbox>Remember me</atl-checkbox>
  </atl-card-content>
  <atl-card-footer>
    <atl-button variant="primary" [loading]="loading()" (click)="signIn()">
      Sign in
    </atl-button>
  </atl-card-footer>
</atl-card>

<AtlCard variant="elevated" padding="lg">
  <AtlCardHeader><h3>Sign in</h3></AtlCardHeader>
  <AtlCardContent>
    {showError && <AtlAlert variant="danger">Invalid email or password.</AtlAlert>}
    <AtlInput type="email" placeholder="you@example.com" invalid={showError} />
    <AtlInput type="password" placeholder="••••••••" invalid={showError} />
    <AtlCheckbox>Remember me</AtlCheckbox>
  </AtlCardContent>
  <AtlCardFooter>
    <AtlButton variant="primary" loading={loading} onClick={signIn}>
      Sign in
    </AtlButton>
  </AtlCardFooter>
</AtlCard>

<AtlCard variant="elevated" padding="lg">
  <AtlCardHeader>Sign in</AtlCardHeader>
  <AtlCardContent>
    <AtlAlert v-if="showError" variant="danger">Invalid email or password.</AtlAlert>
    <AtlInput type="email" placeholder="you@example.com" v-model:value="email" />
    <AtlInput type="password" placeholder="••••••••" v-model:value="password" />
    <AtlCheckbox v-model:checked="remember">Remember me</AtlCheckbox>
  </AtlCardContent>
  <AtlCardFooter>
    <AtlButton variant="primary" :loading="loading" @click="signIn">Sign in</AtlButton>
  </AtlCardFooter>
</AtlCard>

<atl-tab-group [(selectedIndex)]="activeTab">
  <atl-tab label="Account">
    <label>
      Full Name
      <atl-input placeholder="John Doe" />
    </label>
    <label>
      Email
      <atl-input placeholder="john@example.com" />
    </label>
  </atl-tab>
  <atl-tab label="Notifications">
    <atl-toggle [(checked)]="emailOn">Email notifications</atl-toggle>
    <atl-toggle [(checked)]="pushOn">Push notifications</atl-toggle>
  </atl-tab>
</atl-tab-group>
<atl-button variant="primary" (click)="save()">Save changes</atl-button>

<AtlTabGroup selectedIndex={tab} onSelectedIndexChange={setTab}>
  <AtlTab label="Account">
    <AtlInput label="Full Name" placeholder="John Doe" />
    <AtlInput label="Email" placeholder="john@example.com" />
  </AtlTab>
  <AtlTab label="Notifications">
    <AtlToggle checked={emailOn} onCheckedChange={setEmailOn}>Email</AtlToggle>
    <AtlToggle checked={pushOn} onCheckedChange={setPushOn}>Push</AtlToggle>
  </AtlTab>
</AtlTabGroup>
<AtlButton variant="primary" onClick={save}>Save changes</AtlButton>

<AtlTabGroup v-model:selectedIndex="activeTab">
  <AtlTab label="Account">
    <AtlInput v-model:value="name" label="Full Name" />
    <AtlInput v-model:value="email" label="Email" />
  </AtlTab>
  <AtlTab label="Notifications">
    <AtlToggle v-model:checked="emailOn">Email notifications</AtlToggle>
  </AtlTab>
</AtlTabGroup>
<AtlButton variant="primary" @click="save">Save changes</AtlButton>

<atl-button variant="primary" (click)="isOpen.set(true)">Delete account</atl-button>

<atl-dialog [(open)]="isOpen" size="sm">
  <atl-dialog-header>Delete Account</atl-dialog-header>
  <atl-dialog-content>
    <atl-alert variant="warning">This action cannot be undone.</atl-alert>
  </atl-dialog-content>
  <atl-dialog-footer>
    <atl-button variant="outline" (click)="isOpen.set(false)">Cancel</atl-button>
    <atl-button variant="primary" (click)="confirm()">Yes, delete</atl-button>
  </atl-dialog-footer>
</atl-dialog>

<AtlButton onClick={() => setOpen(true)}>Delete account</AtlButton>

<AtlDialog open={open} onOpenChange={setOpen} size="sm">
  <AtlDialogHeader>Delete Account</AtlDialogHeader>
  <AtlDialogContent>
    <AtlAlert variant="warning">This action cannot be undone.</AtlAlert>
  </AtlDialogContent>
  <AtlDialogFooter>
    <AtlButton variant="outline" onClick={() => setOpen(false)}>Cancel</AtlButton>
    <AtlButton variant="primary" onClick={confirm}>Yes, delete</AtlButton>
  </AtlDialogFooter>
</AtlDialog>

<AtlButton variant="primary" @click="isOpen = true">Delete account</AtlButton>

<AtlDialog v-model:open="isOpen" size="sm">
  <AtlDialogHeader>Delete Account</AtlDialogHeader>
  <AtlDialogContent>
    <AtlAlert variant="warning">This action cannot be undone.</AtlAlert>
  </AtlDialogContent>
  <AtlDialogFooter>
    <AtlButton variant="outline" @click="isOpen = false">Cancel</AtlButton>
    <AtlButton variant="primary" @click="confirm">Yes, delete</AtlButton>
  </AtlDialogFooter>
</AtlDialog>

<div class="list-header">
  <h2>Projects</h2>
  <atl-button variant="primary" size="sm">New project</atl-button>
</div>
@for (item of items(); track item.id) {
  <atl-card variant="outlined" padding="md">
    <atl-card-content>
      <span>{{ item.name }}</span>
      <atl-badge [variant]="item.statusVariant" size="sm">{{ item.status }}</atl-badge>
      <p>{{ item.description }}</p>
      <atl-button variant="outline" size="sm" atlTooltip="View details">View</atl-button>
      <atl-button
        variant="outline"
        size="sm"
        [atlMenuTriggerFor]="actionsMenu"
        atlTooltip="More actions"
      >...</atl-button>
      <ng-template #actionsMenu>
        <atl-menu>
          <atl-menu-item>Edit</atl-menu-item>
          <atl-menu-item>Duplicate</atl-menu-item>
          <atl-menu-separator />
          <atl-menu-item>Delete</atl-menu-item>
        </atl-menu>
      </ng-template>
    </atl-card-content>
  </atl-card>
}

<div className="list-header">
  <h2>Projects</h2>
  <AtlButton variant="primary" size="sm">New project</AtlButton>
</div>
{items.map(item => (
  <AtlCard key={item.id} variant="outlined" padding="md">
    <AtlCardContent>
      <span>{item.name}</span>
      <AtlBadge variant={item.statusVariant} size="sm">{item.status}</AtlBadge>
      <p>{item.description}</p>
      <AtlTooltip atlTooltip="View details">
        <AtlButton variant="outline" size="sm">View</AtlButton>
      </AtlTooltip>
      <AtlMenuTrigger
        menu={
          <AtlMenu variant="compact">
            <AtlMenuItem>Edit</AtlMenuItem>
            <AtlMenuItem>Duplicate</AtlMenuItem>
            <AtlMenuSeparator />
            <AtlMenuItem>Delete</AtlMenuItem>
          </AtlMenu>
        }
      >
        {({ onClick, ref }) => (
          <AtlTooltip atlTooltip="More actions">
            <AtlButton ref={ref} onClick={onClick} variant="outline" size="sm">...</AtlButton>
          </AtlTooltip>
        )}
      </AtlMenuTrigger>
    </AtlCardContent>
  </AtlCard>
))}

<div class="list-header">
  <h2>Projects</h2>
  <AtlButton variant="primary" size="sm">New project</AtlButton>
</div>
<AtlCard v-for="item in items" :key="item.id" variant="outlined" padding="md">
  <AtlCardContent>
    <span>{{ item.name }}</span>
    <AtlBadge :variant="item.statusVariant" size="sm">{{ item.status }}</AtlBadge>
    <p>{{ item.description }}</p>
    <AtlTooltip atlTooltip="View details">
      <AtlButton variant="outline" size="sm">View</AtlButton>
    </AtlTooltip>
    <AtlMenuTrigger>
      <template #trigger>
        <AtlTooltip atlTooltip="More actions">
          <AtlButton variant="outline" size="sm">...</AtlButton>
        </AtlTooltip>
      </template>
      <template #menu>
        <AtlMenu variant="compact">
          <AtlMenuItem>Edit</AtlMenuItem>
          <AtlMenuItem>Duplicate</AtlMenuItem>
          <AtlMenuSeparator />
          <AtlMenuItem>Delete</AtlMenuItem>
        </AtlMenu>
      </template>
    </AtlMenuTrigger>
  </AtlCardContent>
</AtlCard>

<atl-accordion-group [multi]="true" variant="separated">
  <atl-accordion-item [expanded]="true">
    <span atlAccordionHeader>
      Errors <atl-badge variant="danger" size="sm">2</atl-badge>
    </span>
    <atl-alert variant="danger">Database failed.</atl-alert>
    <atl-alert variant="danger">Service 503.</atl-alert>
  </atl-accordion-item>
  <atl-accordion-item>
    <span atlAccordionHeader>
      Warnings <atl-badge variant="warning" size="sm">1</atl-badge>
    </span>
    <atl-alert variant="warning">Disk at 89%.</atl-alert>
  </atl-accordion-item>
</atl-accordion-group>

<AtlAccordionGroup multi variant="separated">
  <AtlAccordionItem expanded>
    <span>Errors <AtlBadge variant="danger" size="sm">2</AtlBadge></span>
    <AtlAlert variant="danger">Database failed.</AtlAlert>
    <AtlAlert variant="danger">Service 503.</AtlAlert>
  </AtlAccordionItem>
  <AtlAccordionItem>
    <span>Warnings <AtlBadge variant="warning" size="sm">1</AtlBadge></span>
    <AtlAlert variant="warning">Disk at 89%.</AtlAlert>
  </AtlAccordionItem>
</AtlAccordionGroup>

<AtlAccordionGroup :multi="true" variant="separated">
  <AtlAccordionItem :expanded="true">
    <template #header>
      Errors <AtlBadge variant="danger">2</AtlBadge>
    </template>
    <AtlAlert variant="danger">Database failed.</AtlAlert>
  </AtlAccordionItem>
  <AtlAccordionItem>
    <template #header>
      Warnings <AtlBadge variant="warning">1</AtlBadge>
    </template>
    <AtlAlert variant="warning">Disk at 89%.</AtlAlert>
  </AtlAccordionItem>
</AtlAccordionGroup>

<!-- Metric cards + activity table + quota widget.
     Uses Card, Table, TabGroup, Badge, Alert, Progress. -->
<atl-tab-group variant="pills" [(selectedIndex)]="range">
  <atl-tab label="7D" />
  <atl-tab label="30D" />
  <atl-tab label="90D" />
</atl-tab-group>
@if (quota() >= 85) {
  <atl-alert variant="warning">API quota at {{ quota() }}%.</atl-alert>
}
<!-- ...metric cards grid (AtlCard + AtlBadge delta)... -->
<atl-table variant="striped" size="sm">
  <atl-thead>
    <atl-tr><atl-th>User</atl-th><atl-th>Action</atl-th></atl-tr>
  </atl-thead>
  <atl-tbody>
    @for (row of activity(); track row.id) {
      <atl-tr>
        <atl-td>{{ row.user }}</atl-td>
        <atl-td>{{ row.action }}</atl-td>
      </atl-tr>
    }
  </atl-tbody>
</atl-table>
<atl-progress [value]="quota()" variant="warning" size="sm" />

<AtlTabGroup variant="pills" selectedIndex={range} onSelectedIndexChange={setRange}>
  <AtlTab label="7D">{' '}</AtlTab>
  <AtlTab label="30D">{' '}</AtlTab>
  <AtlTab label="90D">{' '}</AtlTab>
</AtlTabGroup>
{quota >= 85 && <AtlAlert variant="warning">API quota at {quota}%.</AtlAlert>}
{/* ...metric cards grid (AtlCard + AtlBadge delta)... */}
<AtlTable variant="striped" size="sm">
  <AtlThead>
    <AtlTr><AtlTh>User</AtlTh><AtlTh>Action</AtlTh></AtlTr>
  </AtlThead>
  <AtlTbody>
    {activity.map(row => (
      <AtlTr key={row.id}>
        <AtlTd>{row.user}</AtlTd>
        <AtlTd>{row.action}</AtlTd>
      </AtlTr>
    ))}
  </AtlTbody>
</AtlTable>
<AtlProgress value={quota} variant="warning" size="sm" />

<AtlTabGroup variant="pills" v-model:selectedIndex="range">
  <AtlTab label="7D">&nbsp;</AtlTab>
  <AtlTab label="30D">&nbsp;</AtlTab>
  <AtlTab label="90D">&nbsp;</AtlTab>
</AtlTabGroup>
<AtlAlert v-if="quota >= 85" variant="warning">API quota at {{ quota }}%.</AtlAlert>
<!-- ...metric cards grid (AtlCard + AtlBadge delta)... -->
<AtlTable variant="striped" size="sm">
  <AtlThead>
    <AtlTr><AtlTh>User</AtlTh><AtlTh>Action</AtlTh></AtlTr>
  </AtlThead>
  <AtlTbody>
    <AtlTr v-for="row in activity" :key="row.id">
      <AtlTd>{{ row.user }}</AtlTd>
      <AtlTd>{{ row.action }}</AtlTd>
    </AtlTr>
  </AtlTbody>
</AtlTable>
<AtlProgress :value="quota" variant="warning" size="sm" />