mockups/pull_new.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New pull request · mkappworks/cloudzilla — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="cz-header" data-repo-tab="pull_requests"></div>
<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
<div class="space-y-6">
<section aria-labelledby="new-title">
<p class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider mb-2">
<a href="repo.html" class="hover:underline">cloudzilla</a>
<span aria-hidden="true">·</span>
<a href="pulls.html" class="hover:underline">Pull requests</a>
<span aria-hidden="true">·</span>
Compare
</p>
<h1 id="new-title" class="text-2xl font-semibold tracking-tight">Open a pull request</h1>
<p class="mt-1 text-[13px] text-muted-foreground">Choose a base and head branch — Cloudzilla will compare and let you create the request.</p>
</section>
<form method="POST" action="pulls.html" class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8 items-start">
<section class="rounded-md border border-border bg-card p-6 space-y-5 min-w-0">
<fieldset class="rounded-md border border-border bg-card p-4">
<legend class="px-2 font-mono text-[11px] text-muted-foreground uppercase tracking-wider">Compare</legend>
<div class="flex flex-wrap items-end gap-3">
<div class="flex-1 min-w-[10rem] space-y-1.5">
<label for="base_branch" class="block text-[12px] font-medium text-muted-foreground">
Base branch <span class="text-muted-foreground/70">(target)</span>
</label>
<div class="relative">
<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="6" cy="3" r="3"></circle><circle cx="18" cy="3" r="3"></circle><circle cx="12" cy="21" r="3"></circle><path d="M6 6v3a3 3 0 003 3h6a3 3 0 003-3V6M12 12v6"></path></svg>
<select id="base_branch" name="base_branch" required class="h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-sm font-mono shadow-xs">
<option value="main" selected>main</option>
<option value="daisy/oauth-scopes">daisy/oauth-scopes</option>
<option value="feat/search-as-you-type">feat/search-as-you-type</option>
<option value="fix/webhook-retry">fix/webhook-retry</option>
</select>
</div>
</div>
<span class="text-muted-foreground pb-2" aria-hidden="true">←</span>
<div class="flex-1 min-w-[10rem] space-y-1.5">
<label for="head_branch" class="block text-[12px] font-medium text-muted-foreground">
Head branch <span class="text-muted-foreground/70">(yours)</span>
</label>
<div class="relative">
<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="6" cy="3" r="3"></circle><circle cx="18" cy="3" r="3"></circle><circle cx="12" cy="21" r="3"></circle><path d="M6 6v3a3 3 0 003 3h6a3 3 0 003-3V6M12 12v6"></path></svg>
<select id="head_branch" name="head_branch" required class="h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-sm font-mono shadow-xs">
<option value="main">main</option>
<option value="daisy/oauth-scopes" selected>daisy/oauth-scopes</option>
<option value="feat/search-as-you-type">feat/search-as-you-type</option>
<option value="fix/webhook-retry">fix/webhook-retry</option>
</select>
</div>
</div>
</div>
<p class="mt-3 text-[12px] text-muted-foreground">
Comparing <span class="font-mono text-foreground">daisy/oauth-scopes</span> → <span class="font-mono text-foreground">main</span>.
</p>
</fieldset>
<div class="space-y-1.5">
<label for="title" class="block text-sm font-medium">Title</label>
<input id="title" name="title" type="text" required autofocus placeholder="Summary of changes" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
</div>
<div class="space-y-1.5">
<label for="body" class="block text-sm font-medium">Description</label>
<div class="rounded-md border border-border bg-card overflow-hidden">
<div class="md-editor" data-md-editor>
<div class="flex items-center gap-2 border-b border-border px-3">
<div role="tablist" aria-label="Editor mode" class="flex">
<button type="button" role="tab" data-md-tab="write" aria-selected="true" class="px-3 py-2 text-[13px] border-b-2 border-foreground text-foreground font-medium -mb-px">Write</button>
<button type="button" role="tab" data-md-tab="preview" aria-selected="false" class="px-3 py-2 text-[13px] border-b-2 border-transparent text-muted-foreground hover:text-foreground -mb-px">Preview</button>
</div>
<div class="ml-auto flex items-center gap-0.5 text-muted-foreground" aria-label="Formatting"><button type="button" data-md-action="bold" aria-label="Bold" class="h-7 w-7 grid place-items-center rounded-sm hover:bg-accent hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zM6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"></path></svg></button><button type="button" data-md-action="italic" aria-label="Italic" class="h-7 w-7 grid place-items-center rounded-sm hover:bg-accent hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg></button><button type="button" data-md-action="code" aria-label="Code" class="h-7 w-7 grid place-items-center rounded-sm hover:bg-accent hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button><button type="button" data-md-action="link" aria-label="Insert link" class="h-7 w-7 grid place-items-center rounded-sm hover:bg-accent hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 007.07 0l3-3a5 5 0 00-7.07-7.07l-1 1"></path><path d="M14 11a5 5 0 00-7.07 0l-3 3a5 5 0 007.07 7.07l1-1"></path></svg></button></div>
</div>
<div data-md-pane="write">
<label for="body" class="sr-only">What does this change, and why? Reference any related issues with #number.</label>
<textarea id="body" name="body" rows="12" placeholder="What does this change, and why? Reference any related issues with #number." style="height:288px" class="w-full px-3 py-3 text-[13px] font-mono leading-relaxed bg-transparent resize-none focus:outline-hidden placeholder:text-muted-foreground">## Summary
## Test plan
- [ ]
</textarea>
</div>
<div id="body-preview" data-md-pane="preview" style="height:288px" class="hidden px-4 py-3 prose prose-sm dark:prose-invert max-w-none overflow-y-auto"></div>
</div>
</div>
<p class="text-[11px] text-muted-foreground">Markdown is supported. <kbd class="font-mono text-[10px] px-1 py-0.5 bg-muted border border-border rounded-sm">#</kbd> links issues and pull requests.</p>
</div>
<div class="flex items-center gap-3 pt-2">
<button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-success text-success-foreground hover:bg-success/90 h-9 px-4 text-sm">Create pull request</button>
<button type="submit" name="draft" value="1" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm">Save as draft</button>
<a href="pulls.html" class="text-sm text-muted-foreground hover:underline ml-auto">Cancel</a>
</div>
</section>
<aside class="space-y-6 text-[12.5px]" aria-label="Pull request metadata">
<section>
<div class="space-y-2">
<div class="flex items-center justify-between">
<h3 class="text-[12px] font-medium text-muted-foreground">Reviewers</h3>
<div class="relative" data-pick="reviewers">
<button type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Request reviewers" class="text-muted-foreground hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v8M8 12h8"></path></svg></button>
<div role="menu" aria-label="Request reviewers" class="hidden absolute right-0 top-full mt-1.5 z-50 w-56 rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 max-h-72 overflow-y-auto">
<div class="px-2 pt-1 pb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Request reviewers</div>
<button type="button" role="menuitemcheckbox" data-val="yumi" aria-checked="true" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="yumi">Y</span>
<span class="flex-1 truncate">yumi</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<button type="button" role="menuitemcheckbox" data-val="aki" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="aki">A</span>
<span class="flex-1 truncate">aki</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<button type="button" role="menuitemcheckbox" data-val="nina" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="nina">N</span>
<span class="flex-1 truncate">nina</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<div role="separator" class="my-1 h-px bg-border"></div>
<a href="#" role="menuitem" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0" aria-hidden="true" focusable="false"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"></path><circle cx="11" cy="7" r="4"></circle><line x1="19" y1="8" x2="19" y2="14"></line><line x1="22" y1="11" x2="16" y2="11"></line></svg>
Invite a collaborator
</a>
</div>
</div>
</div>
<div>
<ul class="flex flex-col gap-1.5">
<li data-show-for="reviewers:yumi" class="flex items-center gap-2 text-[13px]">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="yumi">Y</span>
<a href="profile.html" class="font-medium hover:underline truncate">yumi</a>
<span class="ml-auto text-[10px] font-mono text-muted-foreground">Pending</span>
</li>
<li data-show-for="reviewers:aki" class="flex items-center gap-2 text-[13px]">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="aki">A</span>
<a href="profile.html" class="font-medium hover:underline truncate">aki</a>
<span class="ml-auto text-[10px] font-mono text-muted-foreground">Pending</span>
</li>
<li data-show-for="reviewers:nina" class="flex items-center gap-2 text-[13px]">
<span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="nina">N</span>
<a href="profile.html" class="font-medium hover:underline truncate">nina</a>
<span class="ml-auto text-[10px] font-mono text-muted-foreground">Pending</span>
</li>
</ul>
<p data-empty-for="reviewers" class="text-[13px] text-muted-foreground">No reviewers requested.</p>
</div>
<p class="text-[12px] text-muted-foreground">Suggested from the files changed.</p>
</div>
</section>
<section class="border-t border-border pt-6">
<div class="space-y-2">
<div class="flex items-center justify-between">
<h3 class="text-[12px] font-medium text-muted-foreground">Labels</h3>
<div class="relative" data-pick="labels">
<button type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Edit labels" class="text-muted-foreground hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 113 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>
<div role="menu" aria-label="Apply labels" class="hidden absolute right-0 top-full mt-1.5 z-50 w-56 rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 max-h-72 overflow-y-auto">
<div class="px-2 pt-1 pb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Apply labels</div>
<button type="button" role="menuitemcheckbox" data-val="feature" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #22c55e"></span>
<span class="flex-1 truncate">feature</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<button type="button" role="menuitemcheckbox" data-val="bug" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #ef4444"></span>
<span class="flex-1 truncate">bug</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<button type="button" role="menuitemcheckbox" data-val="auth" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #3b82f6"></span>
<span class="flex-1 truncate">auth</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<button type="button" role="menuitemcheckbox" data-val="security" aria-checked="false" class="group flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #f59e0b"></span>
<span class="flex-1 truncate">security</span>
<svg class="hidden group-aria-checked:block shrink-0 text-success ml-auto" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
<div role="separator" class="my-1 h-px bg-border"></div>
<a href="#" role="menuitem" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0" aria-hidden="true" focusable="false"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
Create a new label
</a>
</div>
</div>
</div>
<div class="flex flex-wrap gap-1.5">
<span data-show-for="labels:feature" class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#22c55e;--label-fg:#1f2328;--label-border:#1ead53;--label-dark-bg:#22c55e2e;--label-dark-border:#22c55e66;--label-dark-fg:#22c55e">feature</span>
<span data-show-for="labels:bug" class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#f15757;--label-fg:#1f2328;--label-border:#d44d4d;--label-dark-bg:#ef44442e;--label-dark-border:#ef444466;--label-dark-fg:#f26969">bug</span>
<span data-show-for="labels:auth" class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#4588f6;--label-fg:#1f2328;--label-border:#3d78d8;--label-dark-bg:#3b82f62e;--label-dark-border:#3b82f666;--label-dark-fg:#5895f7">auth</span>
<span data-show-for="labels:security" class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#f59e0b;--label-fg:#1f2328;--label-border:#d88b0a;--label-dark-bg:#f59e0b2e;--label-dark-border:#f59e0b66;--label-dark-fg:#f59e0b">security</span>
<span data-empty-for="labels" class="text-[13px] text-muted-foreground">No labels.</span>
</div>
</div>
</section>
</aside>
</form>
</div>
</main>
<div id="cz-footer"></div>
<script src="shell.js"></script>
<script>
document.querySelectorAll('[data-md-editor]').forEach(function (ed) {
var tabs = ed.querySelectorAll('[data-md-tab]');
var write = ed.querySelector('[data-md-pane=write]');
var preview = ed.querySelector('[data-md-pane=preview]');
var ta = ed.querySelector('textarea');
tabs.forEach(function (t) {
t.addEventListener('click', function () {
var showPreview = t.dataset.mdTab === 'preview';
tabs.forEach(function (o) {
var on = o === t;
o.setAttribute('aria-selected', on);
o.classList.toggle('border-foreground', on);
o.classList.toggle('text-foreground', on);
o.classList.toggle('font-medium', on);
o.classList.toggle('border-transparent', !on);
o.classList.toggle('text-muted-foreground', !on);
});
write.classList.toggle('hidden', showPreview);
preview.classList.toggle('hidden', !showPreview);
if (showPreview) {
preview.textContent = ta.value || 'Nothing to preview';
preview.classList.add('whitespace-pre-wrap');
}
});
});
});
function closePickers(except) {
document.querySelectorAll('[data-pick]').forEach(function (p) {
if (p === except) return;
p.querySelector('[role=menu]').classList.add('hidden');
p.querySelector('[aria-haspopup]').setAttribute('aria-expanded', 'false');
});
}
function syncPickers() {
var checked = {};
document.querySelectorAll('[data-pick] [data-val]').forEach(function (b) {
if (b.getAttribute('aria-checked') !== 'true') return;
var g = b.closest('[data-pick]').dataset.pick;
(checked[g] = checked[g] || []).push(b.dataset.val);
});
document.querySelectorAll('[data-show-for]').forEach(function (el) {
var p = el.dataset.showFor.split(':');
el.hidden = (checked[p[0]] || []).indexOf(p[1]) < 0;
});
document.querySelectorAll('[data-empty-for]').forEach(function (el) {
el.hidden = (checked[el.dataset.emptyFor] || []).length > 0;
});
}
document.addEventListener('click', function (e) {
var pick = e.target.closest('[data-pick]');
closePickers(pick);
if (!pick) return;
var trigger = e.target.closest('[data-pick] > [aria-haspopup]');
if (trigger) {
var open = pick.querySelector('[role=menu]').classList.toggle('hidden') === false;
trigger.setAttribute('aria-expanded', open);
return;
}
var item = e.target.closest('[role=menuitemcheckbox], [role=menuitemradio]');
if (!item) return;
if (item.getAttribute('role') === 'menuitemradio') {
pick.querySelectorAll('[role=menuitemradio]').forEach(function (o) { o.setAttribute('aria-checked', o === item); });
} else {
item.setAttribute('aria-checked', item.getAttribute('aria-checked') !== 'true');
}
syncPickers();
});
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePickers(null); });
syncPickers();
</script>
</body>
</html>