@panphora/bevel 0.1.0

package/examples/components/reference/parent/kanban.css

@@ -0,0 +1,114 @@
+.k-stage{padding:30px 30px 0;min-height:780px;font:14px/1.5 var(--bevel-font-sans)}
+.k-stage h1,.k-stage h2,.k-stage h3,.k-stage p{margin:0}
+.k-stage button{font:inherit;color:inherit}
+.k-masthead{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:28px}
+.k-eyebrow,.k-id{font:10px/1.4 var(--bevel-font-mono);letter-spacing:.035em;color:var(--bevel-muted)}
+.k-eyebrow{letter-spacing:.12em;color:var(--bevel-brass);margin-bottom:11px}
+.k-eyebrow span{margin:0 12px;color:var(--bevel-line-2)}
+.k-masthead h1{font:46px/1 var(--bevel-font-serif);letter-spacing:-.03em}
+.k-project-mark{font:21px var(--bevel-font-sans);display:inline-block;vertical-align:middle;margin-left:16px;color:var(--bevel-brass)}
+.k-masthead p{font-size:13px;color:var(--bevel-muted);margin-top:9px}
+.k-masthead-actions{display:flex;gap:22px;align-items:center}
+.k-team{display:grid;gap:7px;text-align:center;font-size:10px;color:var(--bevel-muted)}
+.k-members{display:inline-flex;padding-left:6px;align-items:center}
+.k-avatar{display:inline-grid;place-items:center;width:26px;height:26px;background:var(--bevel-brass-soft);color:var(--bevel-brass);border:2px solid var(--bevel-surface);font:9px/1 var(--bevel-font-mono);flex-shrink:0}
+.k-members .k-avatar{margin-left:-6px}
+.k-avatar-ar{background:var(--bevel-sunk);color:var(--bevel-ink-2)}
+.k-avatar-sp{background:var(--bevel-ox-soft);color:var(--bevel-ox)}
+.k-avatar-jp{background:var(--bevel-teal-soft);color:var(--bevel-teal)}
+.k-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px;border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);background:var(--bevel-face);font-size:12px!important;white-space:nowrap}
+.k-quiet{background:none;border:1px solid var(--bevel-line-2);padding:8px 10px}
+.k-icon{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:3px;color:var(--bevel-muted)!important}
+.k-tabs{display:flex;gap:25px;align-items:center;border-bottom:1px solid var(--bevel-line-2);margin-bottom:18px}
+.k-tabs>span{display:flex;align-items:center;gap:9px;padding:12px 0;color:var(--bevel-muted);font-size:12px;border-bottom:2px solid transparent;margin-bottom:-1px}
+.k-tabs>span.active{border-color:var(--bevel-brass);color:var(--bevel-ink)}
+.k-tabs b{font:10px var(--bevel-font-mono);padding:1px 5px;color:var(--bevel-brass);background:var(--bevel-brass-soft)}
+.k-tabs small{margin-left:auto;display:flex;gap:8px;align-items:center;font:9px var(--bevel-font-mono);color:var(--bevel-muted)}
+.k-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
+.k-search{display:flex;align-items:center;gap:9px;color:var(--bevel-muted);font-size:12px;padding:8px 10px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);width:235px}
+.k-search kbd{margin-left:auto;font:9px var(--bevel-font-mono);padding:1px 3px;border:1px solid var(--bevel-line)}
+.k-toolbar-spacer{flex:1}
+.k-overview{display:flex;align-items:center;gap:25px;flex-wrap:wrap;padding:12px 0 16px;border-bottom:1px solid var(--bevel-line-2);color:var(--bevel-muted);font-size:11px}
+.k-overview>span{display:flex;align-items:center;gap:7px}
+.k-overview>span:last-child{margin-left:auto}
+.k-overview b{font:12px var(--bevel-font-mono);color:var(--bevel-ink)}
+.k-overview-bar{display:block;width:65px;height:4px;background:var(--bevel-line)}
+.k-overview-bar i{display:block;height:100%;background:var(--bevel-teal)}
+.k-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:0}
+.k-lane{min-width:0;padding-top:20px}
+.k-lane>header{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:0 2px}
+.k-lane h2{font:500 13px var(--bevel-font-sans)}
+.k-lane>header>.k-icon{margin-left:auto}
+.k-count{font:10px var(--bevel-font-mono);color:var(--bevel-muted)}
+.k-lane-dot{width:7px;height:7px;border:1px solid var(--bevel-muted)}
+.k-lane-dot-1{background:var(--bevel-brass);border-color:var(--bevel-brass)}
+.k-lane-dot-2{background:var(--bevel-teal);border-color:var(--bevel-teal)}
+.k-wip{font:9px var(--bevel-font-mono);color:var(--bevel-brass);background:var(--bevel-brass-soft);padding:2px 4px}
+.k-lane-body{display:flex;flex-direction:column;gap:12px}
+.k-task{border:1px solid var(--bevel-line-2);background:var(--bevel-surface);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bevel-edge-hi) 50%,transparent)}
+.k-task-body{padding:13px 14px 0}
+.k-task-top{display:flex;align-items:center;gap:6px;margin-bottom:10px}
+.k-task-top .k-icon{margin-left:auto}
+.k-priority{display:flex;align-items:center;gap:4px;font:9px var(--bevel-font-mono);color:var(--bevel-muted);margin-left:auto}
+.k-urgent,.k-overdue{color:var(--bevel-ox)!important}
+.k-high{color:var(--bevel-brass)}
+.k-task h3{font:22px/1.14 var(--bevel-font-serif);letter-spacing:-.015em;max-width:240px}
+.k-task p{font-size:11px;line-height:1.55;color:var(--bevel-muted);margin-top:8px}
+.k-tags{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}
+.k-tag{font:9px/1.4 var(--bevel-font-mono);padding:2px 5px;background:var(--bevel-sunk);color:var(--bevel-ink-2)}
+.k-tag-design{background:var(--bevel-brass-soft);color:var(--bevel-brass)}
+.k-tag-editorial{background:var(--bevel-teal-soft);color:var(--bevel-teal)}
+.k-tag-engineering{background:var(--bevel-sunk);color:var(--bevel-ink-2)}
+.k-tag-studio{border:1px solid var(--bevel-line-2);background:none}
+.k-check{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--bevel-muted);margin:14px 0 6px}
+.k-check>span{display:flex;gap:6px;align-items:center}
+.k-check b{font:9px var(--bevel-font-mono);color:var(--bevel-ink-2)}
+.k-progress{height:3px;background:var(--bevel-line);margin-bottom:13px}
+.k-progress i{display:block;height:100%;background:var(--bevel-brass)}
+.k-done .k-progress i{background:var(--bevel-teal)}
+.k-task-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px}
+.k-date{display:flex;align-items:center;gap:5px;font:9px var(--bevel-font-mono);color:var(--bevel-muted)}
+.k-done .k-date{color:var(--bevel-teal)}
+.k-task-meta{display:flex;align-items:center;gap:10px;margin:12px -14px 0;padding:8px 14px;border-top:1px solid var(--bevel-line);font:9px var(--bevel-font-mono);color:var(--bevel-muted)}
+.k-task-meta>span{display:flex;align-items:center;gap:4px}
+.k-task-note{margin-left:auto;font-size:8px}
+.k-featured{border-left:3px solid var(--bevel-brass)}
+.k-selected{outline:1px solid var(--bevel-brass);outline-offset:2px}
+.k-blocked{display:flex;gap:6px;align-items:flex-start;background:var(--bevel-ox-soft);color:var(--bevel-ox);font-size:10px;line-height:1.5;margin:14px -14px 0;padding:7px 14px}
+.k-cover{height:100px;position:relative;border-bottom:1px solid var(--bevel-line-2);overflow:hidden}
+.k-cover img{height:100%;width:100%;object-fit:cover;object-position:50% 56%}
+.k-cover>span{position:absolute;bottom:8px;left:12px;background:var(--bevel-surface);color:var(--bevel-ink);font:8px var(--bevel-font-mono);letter-spacing:.06em;padding:4px 5px}
+.k-add{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px;border:1px dashed var(--bevel-line-2);color:var(--bevel-muted)!important;font-size:11px!important;background:none;margin:12px 0 20px}
+.k-board-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--bevel-line);padding:15px 0;color:var(--bevel-muted);font-size:10px}
+.k-board-footer>span{display:flex;align-items:center;gap:7px}
+.k-board-footer span span{color:var(--bevel-line-2)}
+.k-workspace.has-inspector{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}
+.has-inspector .k-board{grid-template-columns:repeat(3,minmax(205px,1fr));overflow:auto;padding:3px 3px 0}
+.k-inspector{border-left:1px solid var(--bevel-line-2);padding:22px 0 0 22px;min-width:0}
+.k-inspector-head{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
+.k-inspector h2{font:30px/1.08 var(--bevel-font-serif)}
+.k-inspector>p{font-size:12px;line-height:1.65;color:var(--bevel-muted);margin:15px 0 22px}
+.k-inspector dl{display:grid;grid-template-columns:75px 1fr;gap:12px;margin:0 0 24px;font-size:11px;align-items:center}
+.k-inspector dt{color:var(--bevel-muted)}
+.k-inspector dd{margin:0;display:flex;align-items:center;gap:8px}
+.k-inspector-section{border-top:1px solid var(--bevel-line);padding:16px 0}
+.k-inspector-section>.k-check{margin:0 0 12px}
+.k-inspector-section strong{font-size:12px;color:var(--bevel-ink);font-weight:500}
+.k-check-row{display:flex;gap:9px;align-items:center;margin:10px 0;font-size:11px;color:var(--bevel-ink-2)}
+.k-check-box{display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--bevel-line-2)}
+.k-check-box.checked{background:var(--bevel-teal-soft);color:var(--bevel-teal);border-color:var(--bevel-teal)}
+.k-related{display:flex;gap:8px;align-items:center;font-size:10px}
+.k-related svg:last-child{color:var(--bevel-teal);margin-left:auto}
+.k-comment{display:flex;align-items:flex-start;gap:9px;margin:18px 0}
+.k-comment b{font-size:10px;font-weight:500}
+.k-comment small{font-size:9px;font-weight:400;color:var(--bevel-muted);margin-left:6px}
+.k-comment p{margin-top:7px;font-size:11px;line-height:1.6;color:var(--bevel-ink-2)}
+.k-comment-input{display:flex;justify-content:space-between;padding:10px;border:1px solid var(--bevel-line-2);color:var(--bevel-muted);font-size:11px;background:var(--bevel-surface)}
+.k-inspector footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--bevel-line);padding:16px 0}
+.k-inspector footer .k-id{font-size:8px}
+.k-empty{padding:36px 20px;min-height:315px;border:1px dashed var(--bevel-line-2);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
+.k-empty>svg{color:var(--bevel-brass);margin-bottom:24px}
+.k-empty h3{font:26px/1.12 var(--bevel-font-serif)}
+.k-empty p{font-size:12px;line-height:1.6;color:var(--bevel-muted);margin-top:14px}
+@media(max-width:900px){.k-stage{padding:25px 22px 0}.k-masthead h1{font-size:40px}.k-masthead-actions{gap:12px}.k-board{gap:12px}.k-task-body{padding:12px 11px 0}.k-task-meta{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px}.k-blocked{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px}.k-task h3{font-size:20px}.k-wip{display:none}.k-workspace.has-inspector{grid-template-columns:1fr}.k-inspector{border-left:0;border-top:1px solid var(--bevel-line-2);padding-left:0;max-width:600px}.has-inspector .k-board{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.k-overview{gap:15px}.k-team>span:last-child{display:none}}
+@media(max-width:540px){.k-stage{padding:25px 18px 0}.k-masthead{align-items:flex-start;gap:16px;flex-wrap:wrap}.k-masthead-actions{width:100%;justify-content:space-between}.k-eyebrow{font-size:9px}.k-tabs{gap:22px}.k-tabs small{display:none}.k-search{width:100%}.k-toolbar-spacer{display:none}.k-toolbar{gap:8px}.k-overview{gap:12px}.k-overview>span:last-child{margin:0}.k-board,.has-inspector .k-board{grid-template-columns:1fr}.k-lane{padding-top:22px}.k-wip{display:block}.k-task h3{font-size:25px;max-width:100%}.k-task-body{padding:16px 17px 0}.k-task-top{margin-bottom:13px}.k-task-meta{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px}.k-blocked{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px}.k-task p{font-size:12px}.k-cover{height:135px}.k-board-footer{flex-wrap:wrap;gap:10px}.k-empty{min-height:230px}}

package/examples/components/reference/parent/kanban.py

@@ -0,0 +1,55 @@
+from html import escape
+
+def icon(name, size=16):
+    paths = {
+        'plus':'M12 5v14M5 12h14', 'more':'M5 12h1m5 0h1m5 0h1',
+        'search':'M20 20l-5-5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0',
+        'filter':'M4 6h16M7 12h10M10 18h4', 'chevron':'m7 10 5 5 5-5',
+        'check':'m5 12 4 4L19 6', 'clock':'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0',
+        'comment':'M4 4h16v12H9l-5 4V4Z', 'clip':'m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8',
+        'arrow':'M4 12h16m-6-6 6 6-6 6', 'flag':'M5 21V3h13l-3 4 3 4H5',
+        'board':'M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z', 'grid':'M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z',
+        'list':'M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1',
+        'calendar':'M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6',
+        'lock':'M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4',
+        'link':'m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0',
+    }
+    return f'<svg width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true"><path d="{paths[name]}"/></svg>'
+
+def button(label, name=None, quiet=False):
+    return f'<button type="button" class="k-button {"k-quiet" if quiet else ""}">{icon(name) if name else ""}<span>{label}</span></button>'
+
+def avatar(initials):
+    return f'<span class="k-avatar k-avatar-{initials.lower()}" aria-label="{dict(MC="Mira Chen",AR="Alex Rivera",SP="Sam Patel",JP="Jules Park")[initials]}">{initials}</span>'
+
+TASKS = [
+    dict(id='FN-101',title='Turn research into a field guide',tag='Editorial',priority='High',date='Sep 10',people=['SP'],comments=3,attachments=2,check='2/5',desc='A useful home for what we learned.'),
+    dict(id='FN-102',title='Shape the cover story',tag='Design',priority='Normal',date='Sep 11',people=['MC','SP'],comments=2,attachments=1,check='',cover=True),
+    dict(id='FN-103',title='Invite the next four collaborators',tag='Studio',priority='Normal',date='Sep 12',people=['JP'],comments=0,attachments=0,check='0/4'),
+    dict(id='FN-104',title='Make room for good work',tag='Design',priority='Urgent',date='Today',people=['MC','AR'],comments=8,attachments=3,check='3/4',desc='Finish the new project experience.',featured=True),
+    dict(id='FN-105',title='Polish the document export',tag='Engineering',priority='High',date='Sep 07',people=['AR'],comments=4,attachments=0,check='1/3',blocked=True),
+    dict(id='FN-106',title='Give every empty state a voice',tag='Editorial',priority='Normal',date='Sep 09',people=['SP'],comments=1,attachments=0,check='2/3'),
+    dict(id='FN-107',title='A calmer workspace navigation',tag='Design',priority='Normal',date='Done today',people=['MC'],comments=5,attachments=2,check='4/4',done=True),
+    dict(id='FN-108',title='Write the first welcome',tag='Editorial',priority='Normal',date='Done yesterday',people=['SP','JP'],comments=2,attachments=0,check='3/3',done=True),
+]
+
+def task(t, selected=False):
+    urgency = 'k-urgent' if t['priority']=='Urgent' else 'k-high' if t['priority']=='High' else ''
+    tag = t['tag'].lower()
+    checks = t['check'].split('/') if t['check'] else []
+    progress = int(checks[0])/int(checks[1])*100 if checks else 0
+    return f'''<article class="k-task {'k-featured' if t.get('featured') else ''} {'k-selected' if selected else ''} {'k-done' if t.get('done') else ''}" data-task="{t['id']}">
+      {'<div class="k-cover"><img src="../../fixtures/workspace.jpg" alt="A sunlit studio workspace"><span>VISUAL DIRECTION</span></div>' if t.get('cover') else ''}
+      <div class="k-task-body"><div class="k-task-top"><span class="k-id">{t['id']}</span><span class="k-priority {urgency}">{icon('flag',12)} {t['priority']}</span><button class="k-icon" aria-label="Task options">{icon('more')}</button></div>
+      <h3>{t['title']}</h3>{'<p>'+t['desc']+'</p>' if t.get('desc') else ''}<div class="k-tags"><span class="k-tag k-tag-{tag}">{t['tag']}</span>{'<span class="k-tag k-tag-studio">Launch</span>' if t.get('featured') else ''}</div>
+      {'<div class="k-blocked">'+icon('lock',13)+' Waiting on font licensing</div>' if t.get('blocked') else ''}
+      {'<div class="k-check"><span>'+icon('check',13)+' Checklist</span><b>'+t['check']+'</b></div><div class="k-progress"><i style="width:'+str(progress)+'%"></i></div>' if checks else ''}
+      <div class="k-task-bottom"><span class="k-date {"k-overdue" if t.get("blocked") else ""}">{icon('check' if t.get('done') else 'clock',12)}{t['date']}</span><span class="k-members">{''.join(avatar(p) for p in t['people'])}</span></div>
+      <div class="k-task-meta"><span>{icon('comment',12)}{t['comments']}</span>{'<span>'+icon('clip',12)+str(t['attachments'])+'</span>' if t['attachments'] else ''}{'<span class="k-task-note">Final review</span>' if t.get('featured') else '<span class="k-task-note">'+('Complete' if t.get('done') else 'Field notes')+'</span>'}</div></div></article>'''
+
+def kanban(state):
+    empty=state=='empty'
+    lanes=[('Up next','3','',TASKS[:3]),('In progress','3','WIP 3 / 3',TASKS[3:6]),('Ready','2','',TASKS[6:])]
+    columns=''.join(f'''<section class="k-lane"><header><span class="k-lane-dot k-lane-dot-{i}"></span><h2>{title}</h2><span class="k-count">{0 if empty else count}</span>{'<small class="k-wip">'+wip+'</small>' if wip and not empty else ''}<button class="k-icon" aria-label="Add a task to {title}">{icon('plus')}</button></header><div class="k-lane-body">{('<div class="k-empty">'+icon('board',30)+'<h3>'+['The next good idea starts here.','Room to focus.','A place for finished work.'][i]+'</h3><p>'+['Add a task, assign an owner and give it a place to go.','Move a task here when you are ready to begin.','Completed work will collect here.'][i]+'</p></div>') if empty else ''.join(task(t,state=='selected' and t['id']=='FN-104') for t in tasks)}</div><button class="k-add">{icon('plus',14)} Add task</button></section>''' for i,(title,count,wip,tasks) in enumerate(lanes))
+    inspector=f'''<aside class="k-inspector"><div class="k-inspector-head"><span class="k-id">FN-104 / TASK DETAILS</span><span class="k-tag k-tag-design">In progress</span></div><h2>Make room for good work</h2><p>Finish the new project experience. Keep the first step calm, direct and easy to return to.</p><dl><dt>Owner</dt><dd>{avatar('MC')} Mira Chen</dd><dt>Priority</dt><dd class="k-urgent">{icon('flag',13)} Urgent</dd><dt>Due date</dt><dd>{icon('calendar',14)} Today, Sep 08</dd><dt>Project</dt><dd>Field notes</dd></dl><div class="k-inspector-section"><div class="k-check"><strong>Ready to share</strong><b>3 / 4</b></div>{''.join('<div class="k-check-row"><span class="k-check-box '+('checked' if i<3 else '')+'">'+(icon('check',12) if i<3 else '')+'</span>'+s+'</div>' for i,s in enumerate(['Set the project details','Check both color modes','Review the compact layout','Get Jules’ final review']))}</div><div class="k-inspector-section"><div class="k-check"><strong>Connected work</strong><span class="k-id">1</span></div><div class="k-related">{icon('link')}<span>FN-107 · Workspace navigation</span>{icon('check',14)}</div></div><div class="k-inspector-section"><strong>Latest conversation</strong><div class="k-comment">{avatar('AR')}<div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div><div class="k-comment-input">Leave a comment… <span>⌘ ↵</span></div></div><footer><span class="k-id">UPDATED AT 10:42</span>{button('Open task','arrow')}</footer></aside>''' if state=='selected' else ''
+    return f'''<main class="k-stage"><header class="k-masthead"><div><div class="k-eyebrow">NORTHSTAR STUDIO <span>/</span> PROJECT 004</div><h1>Field notes<span class="k-project-mark">↗</span></h1><p>A place for the ideas worth making.</p></div><div class="k-masthead-actions"><div class="k-team"><span class="k-members">{''.join(avatar(x) for x in ['MC','AR','SP','JP'])}</span><span>4 people</span></div>{button('New task','plus')}</div></header><nav class="k-tabs"><span class="active">{icon('board')}Board <b>{0 if empty else 8}</b></span><span>{icon('list')}List</span><span>{icon('calendar')}Timeline</span><small>PRIVATE PROJECT {icon('lock',12)}</small></nav><div class="k-toolbar"><div class="k-search">{icon('search')}<span>Search this board</span><kbd>⌘ K</kbd></div>{button('Filters','filter')}<span class="k-toolbar-spacer"></span>{button('Status','chevron',True)}{button('This week','calendar',True)}</div><div class="k-overview"><span><b>{0 if empty else 8}</b> tasks in this project</span><span><i class="k-overview-bar"><i style="width:{0 if empty else 25}%"></i></i><b>{0 if empty else 2}/{0 if empty else 8}</b> complete</span><span class="k-overdue">{icon('flag',13)} {0 if empty else 2} need attention</span><span class="k-id">SEP 08 – 12</span></div><div class="k-workspace {'has-inspector' if inspector else ''}"><div class="k-board">{columns}</div>{inspector}</div><footer class="k-board-footer"><span>{icon('board',13)} Grouped by status <span>·</span> Ordered by priority</span><span>{0 if empty else 8} tasks <span>·</span> 4 collaborators</span></footer></main>'''

package/examples/components/reference/parent/refinement.css

@@ -0,0 +1,53 @@
+[hidden]{display:none!important}
+[data-ref-state]{position:relative}
+.r-static-note{padding:10px 20px;border-top:1px solid var(--bevel-line);color:var(--bevel-muted);font:11px/1.5 var(--bevel-font-mono)}
+body[data-component="modal"] .micromodal__close,.r-diagonal-close{position:absolute;top:-1px;right:-1px;width:68px;height:68px;padding:0;border:0;background:none;clip-path:polygon(0 4%,0 0,100% 0,100% 100%,94% 100%);z-index:2}
+body[data-component="modal"] .micromodal__close svg,.r-diagonal-close svg{display:block;width:100%;height:100%}
+.micromodal__close-bg{fill:var(--bevel-sunk)}
+.micromodal__close-x{fill:var(--bevel-ink)}
+.drawer-panel{position:relative}
+.drawer-panel header>.row:first-child{padding-right:35px;min-height:26px}
+.p-popconfirm{position:relative;margin-top:15px}
+.p-popconfirm::before{content:"";position:absolute;right:10px;top:-7px;width:12px;height:12px;background:var(--bevel-surface);border-top:1px solid var(--bevel-line-2);border-left:1px solid var(--bevel-line-2);transform:rotate(45deg)}
+.p-split-button{display:inline-flex;border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);background:var(--bevel-face);height:36px}
+.p-split-button>button{height:32px;min-height:0;border:0;background:var(--bevel-face);color:var(--bevel-ink);box-shadow:none;transform:none;padding:0 12px;font-size:13px}
+.p-split-button>button:first-child{border-right:0}
+.p-split-button>button+button{width:33px;padding:0;border:0;border-left:1px solid var(--bevel-edge-lo)}
+.p-split-button[data-divider="inset"]>button+button{border-left:2px solid var(--bevel-edge-in);box-shadow:inset 1px 0 var(--bevel-edge-in-hi)}
+.p-split-button:has(:disabled){opacity:.5}
+.r-split-label{font:11px var(--bevel-font-mono);color:var(--bevel-muted);margin-bottom:14px}
+.p-sidebar{position:relative}
+.p-sidebar-brand{padding:20px 11px;gap:8px;min-height:68px}
+.p-sidebar-brand strong{font-size:19px}
+.p-sidebar-brand>svg{width:18px}
+.p-sidebar-brand>.r-collapse{margin-left:auto;width:26px;height:26px;flex-shrink:0}
+.p-sidebar.compact .p-sidebar-brand{flex-direction:column;gap:15px}
+.p-sidebar.compact .r-collapse{margin:0}
+.p-sidebar footer.r-identity{gap:10px;padding:16px 13px}
+.r-identity .r-avatar{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;background:var(--bevel-teal-soft);color:var(--bevel-teal);border:1px solid var(--bevel-line-2);font:11px var(--bevel-font-mono)}
+.r-identity strong{display:block;font-size:13px;font-weight:500}
+.p-sidebar footer.r-identity small{font-size:11px;margin-top:2px}
+.p-sidebar.compact .r-identity>span:last-child{display:none}
+.p-sidebar.compact footer.r-identity{justify-content:center}
+body[data-component="app-toolbar"] .toolbar .bevel-button{width:36px;height:36px;min-height:0;display:inline-grid;place-items:center;padding:0;background:var(--bevel-face);color:var(--bevel-ink);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi)}
+body[data-component="app-toolbar"] .toolbar .bevel-button[aria-pressed="true"]{background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)}
+.p-tree summary{padding:3px 10px;line-height:24px;margin:8px 0}
+.p-tree-leaf{padding:3px 10px;line-height:20px;min-height:30px;margin:8px 0;border-left:2px solid transparent}
+.p-tree-leaf.selected{border-left-color:var(--bevel-brass);color:var(--bevel-ink);margin-bottom:10.5px}
+.p-tree-leaf .p-badge{flex:0 0 auto;font-size:9px;padding:2px 5px}
+.wizard-step b{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--bevel-line-2);font:12px/1 var(--bevel-font-mono);color:var(--bevel-muted);margin-bottom:10px;background:var(--bevel-surface)}
+.wizard-step.current b{background:var(--bevel-ink);color:var(--bevel-ground);border-color:var(--bevel-ink)}
+.p-banner{border-top:0;border-left:3px solid var(--bevel-brass)}
+.p-banner.resolved{border-left-color:var(--bevel-teal)}
+.r-inline-name{position:relative;margin:26px 0 0;padding:19px 0 18px;min-height:72px;border-top:1px solid var(--bevel-line);border-bottom:2px solid var(--bevel-brass);outline:0}
+.r-inline-name::after{content:"";display:inline-block;vertical-align:-3px;height:29px;margin-left:3px;border-left:1px solid var(--bevel-ink)}
+.r-inline-name[aria-invalid="true"]{border-bottom-color:var(--bevel-ox);color:var(--bevel-faint)}
+.r-inline-name[aria-invalid="true"]::after{display:none}
+.r-inline-name .r-placeholder{font-style:italic}
+.r-saved-page{min-height:580px;padding:40px 38px;position:relative}
+.r-saved-page header{padding-bottom:20px;border-bottom:1px solid var(--bevel-line);display:flex;align-items:center;justify-content:space-between;gap:20px}
+.r-saved-page article{max-width:480px;margin:45px auto}
+.r-saved-page h1{font:38px/1.12 var(--bevel-font-serif);margin:16px 0}
+.r-saved-page p{font-size:15px;line-height:1.75;color:var(--bevel-ink-2);margin:14px 0}
+.r-saved-chip{position:absolute;right:16px;bottom:16px;padding:4px 12px;border-radius:999px;font:13px/1.6 var(--bevel-font-sans);background:color-mix(in srgb,var(--bevel-teal-soft) 60%,var(--bevel-sunk));color:var(--bevel-ink-2);border:1px solid color-mix(in srgb,var(--bevel-teal) 25%,var(--bevel-line));pointer-events:none}
+@media(max-width:540px){.p-sidebar:not(.compact){width:155px}.p-sidebar-brand{flex-wrap:wrap}.p-sidebar-brand strong{font-size:17px}.p-sidebar-brand>.r-collapse{width:23px;height:23px}.p-sidebar-brand>svg{display:none}.r-saved-page{padding:28px 24px}.r-saved-page h1{font-size:34px}.wizard-step b{margin-bottom:8px}}

package/examples/components/reference/selected/build.py

@@ -0,0 +1,70 @@
+import json
+import re
+from pathlib import Path
+from bs4 import BeautifulSoup
+
+ROOT = Path(__file__).resolve().parent.parent
+OUT = ROOT / 'selected'
+manifest = json.loads((ROOT / 'manifest.json').read_text())
+feedback = json.loads((ROOT / 'selection-round-2.json').read_text())
+answers = {a['key'].removeprefix('ui2-'): a for a in feedback['answers']}
+answers.update({a['key'].removeprefix('ui3-'): a for a in json.loads((ROOT / 'selection-round-3.json').read_text())['answers']})
+components = [c.copy() for c in manifest['components'] if c['id'] in answers]
+contexts = [c.copy() for c in manifest['contexts']]
+assert len(components) == 33
+assert answers['split-divider']['picked'] == ['inset']
+(OUT / 'components').mkdir(parents=True, exist_ok=True)
+coverage = {'seat': 'selected', 'phase': 'static', 'components': [], 'contexts': [], 'pending': []}
+
+for component in components + contexts:
+    key = component['id']
+    if key.startswith('context-'):
+        source = 'parent' if key == 'context-quickcrop' else 'fable'
+        comment = ''
+    else:
+        source = answers[key]['picked'][0]
+        comment = answers[key]['comment']
+    html = (ROOT / source / 'components' / f'{key}.html').read_text()
+    html = re.sub(r'<title>.*?</title>', f'<title>{component["name"]} · Selected · Bevel</title>', html)
+    html = html.replace(f'data-seat="{source}"', f'data-seat="selected" data-selected-from="{source}"')
+    html = re.sub(r'href="\.\./([^"/]+\.css)"', lambda m: f'href="../../{source}/{m[1]}"', html)
+    html = html.replace('</head>', '<link rel="stylesheet" href="../corrections.css"></head>')
+    html = re.sub(r'(<footer class="r-static-note">).*?(</footer>)', rf'\1Selected static UI · {source.title()} design · Preview controls show authored states.\2', html)
+    if key == 'form-error-summary':
+        html, count = re.subn(r'(<strong>Two things need your attention\.</strong>)(<ul>.*?</ul>)', r'<div class="s-error-copy">\1\2</div>', html)
+        assert count == 1
+    if key == 'toast-stack':
+        def retry(match):
+            button = match[0]
+            if '>Try again<' in button:
+                return button.replace('f-toast-action', 'f-toast-action s-retry')
+            return button
+        html = re.sub(r'<button\b[^>]*>.*?</button>', retry, html, flags=re.S)
+        assert html.count('s-retry') == 2
+    if key == 'split-button':
+        soup = BeautifulSoup(html, 'html.parser')
+        for state in soup.select('[data-ref-state]'):
+            if state['data-ref-state'] in ['line', 'line-open']:
+                state.decompose()
+        for i, state in enumerate(soup.select('[data-ref-state]')):
+            if i:
+                state['hidden'] = ''
+            elif state.has_attr('hidden'):
+                del state['hidden']
+            for group in state.select('.p-split-button'):
+                group['data-divider'] = 'inset'
+        for label in soup.select('.r-split-label'):
+            label.string = 'Selected divider: slight inset bevel'
+        html = str(soup)
+        for attr in ['viewBox', 'preserveAspectRatio', 'gradientUnits', 'markerWidth', 'markerHeight']:
+            html = html.replace(attr.lower() + '=', attr + '=')
+        component['states'] = ['inset', 'inset-open', 'disabled']
+    (OUT / 'components' / f'{key}.html').write_text(html)
+    section = 'contexts' if key.startswith('context-') else 'components'
+    coverage[section].append({'id': key, 'source': source, 'states': component['states'], 'file': f'components/{key}.html', 'behavior': 'static', 'feedback': comment})
+
+(OUT / 'manifest.json').write_text(json.dumps({'components': components, 'contexts': contexts}, indent=2) + '\n')
+(OUT / 'coverage.json').write_text(json.dumps(coverage, indent=2) + '\n')
+links = ''.join(f'<li><a href="components/{c["id"]}.html">{c["name"]}</a></li>' for c in components + contexts)
+(OUT / 'index.html').write_text(f'''<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Selected Bevel components</title><link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css"><style>body{{padding:32px;max-width:800px;margin:auto;font-family:var(--bevel-font-sans)}}h1{{font:38px var(--bevel-font-serif)}}ul{{columns:2;line-height:2}}a{{color:var(--bevel-brass)}}@media(max-width:520px){{ul{{columns:1}}}}</style></head><body><h1>Selected Bevel components</h1><p>29 Fable designs and 4 Parent designs, with your requested corrections. These are static visual references.</p><p>All 33 visual choices are settled.</p><ul>{links}</ul></body></html>''')
+print(f'Built {len(components)} selected components and {len(contexts)} contexts.')

package/examples/components/reference/selected/components/activity-feed.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Activity feed · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="activity-feed" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="recent" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow f-day">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event f-event" data-verb="pencil"><span class="f-avatar" data-who="MC">MC</span><div class="f-event-body"><div class="f-event-head"><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time></div><p class="f-event-detail">Clarified the introduction and added the field guide.</p></div></article><article class="event f-event" data-verb="user"><span class="f-avatar" data-who="AR">AR</span><div class="f-event-body"><div class="f-event-head"><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time></div><p class="f-event-detail">Invited by Jules Park.</p></div></article><article class="event f-event" data-verb="image"><span class="f-avatar" data-who="SP">SP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time></div><p class="f-event-detail">Project cover · 184 KB</p></div></article></div><button class="bevel-button bevel-button--small f-show-more" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg><span class="bevel-button__label">Show yesterday</span></button></div></section><section data-ref-state="expanded" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow f-day">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event f-event" data-verb="pencil"><span class="f-avatar" data-who="MC">MC</span><div class="f-event-body"><div class="f-event-head"><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time></div><p class="f-event-detail">Clarified the introduction and added the field guide.</p></div></article><article class="event f-event" data-verb="user"><span class="f-avatar" data-who="AR">AR</span><div class="f-event-body"><div class="f-event-head"><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time></div><p class="f-event-detail">Invited by Jules Park.</p></div></article><article class="event f-event" data-verb="image"><span class="f-avatar" data-who="SP">SP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time></div><p class="f-event-detail">Project cover · 184 KB</p></div></article></div><div class="eyebrow f-day">YESTERDAY / SEPTEMBER 06</div><div class="timeline"><article class="event f-event" data-verb="plus"><span class="f-avatar" data-who="JP">JP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Jules Park</strong> created <strong>Field notes</strong></p><time>16:32</time></div></div></article></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/app-toolbar.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>App toolbar · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="app-toolbar" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar f-toolbar" data-part="toolbar"><button aria-label="New note" class="f-icon-button f-toolbar-new" title="New note" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M12 5v14M5 12h14"></path></svg></button><span class="f-toolbar-sep"></span><div aria-label="Layout" class="bevel-seg f-toolbar-seg" role="group"><button aria-label="List view" aria-pressed="true" class="f-icon-button" title="List view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="f-icon-button" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button></div><span class="f-toolbar-sep"></span><button aria-label="Filter notes" class="f-icon-button f-toolbar-filter" title="Filter notes" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg></button><span class="spacer"></span><label class="f-toolbar-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes" type="search"/><kbd>/</kbd></label><button aria-expanded="false" aria-label="More actions" class="f-icon-button f-toolbar-more" title="More actions" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div class="rule row between"><strong>All documents</strong><span class="mono muted" style="font-size:11px">12 NOTES</span></div><div class="listrow"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div><strong>A place for good work</strong><br/><small>Mira Chen · Edited today</small></div></div><div class="listrow"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div><strong>The field guide</strong><br/><small>Sam Patel · Edited yesterday</small></div></div></div></section><section data-ref-state="overflow" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar f-toolbar" data-part="toolbar"><button aria-label="New note" class="f-icon-button f-toolbar-new" title="New note" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M12 5v14M5 12h14"></path></svg></button><span class="f-toolbar-sep"></span><div aria-label="Layout" class="bevel-seg f-toolbar-seg" role="group"><button aria-label="List view" aria-pressed="true" class="f-icon-button" title="List view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="f-icon-button" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button></div><span class="f-toolbar-sep"></span><button aria-label="Filter notes" class="f-icon-button f-toolbar-filter" title="Filter notes" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg></button><span class="spacer"></span><label class="f-toolbar-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes" type="search"/><kbd>/</kbd></label><button aria-expanded="true" aria-label="More actions" class="f-icon-button f-toolbar-more" title="More actions" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div class="f-overflow-anchor"><div class="menu f-overflow-menu"><button data-action="Sort by last edited selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 6h16M7 12h10M10 18h4"></path></svg></span>Sort by last edited</button><button data-action="Show archived selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 3h18v5H3ZM5 8v13h14V8M9 12h6"></path></svg></span>Show archived</button><button data-action="Export selection selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg></span>Export selection</button></div></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/avatar-group.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Avatar group · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="avatar-group" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="group" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">People / 26</div><h1>A human detail</h1><p>Recognizable at a glance, useful at a small size.</p></div></header><div class="p-panel"><div class="p-between"><div><h2>Working together</h2><p class="p-small p-muted">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack f-avatar-stack" data-part="avatar-stack"><img alt="Northstar Studio workspace" class="p-avatar-photo" src="../../fixtures/workspace.jpg"/><span aria-label="Mira Chen" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><i aria-label="Online" class="p-presence"></i></span><span aria-label="Alex Rivera" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="AR">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span></span><span aria-label="Three more members" class="f-avatar f-avatar-more">+3</span></div><div class="p-avatar-list f-avatar-list"><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted"><i class="f-presence-dot"></i>Online now · Designer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="AR">AR</span><div><strong class="p-small">Alex Rivera</strong><p class="p-small p-muted">Developer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div><div class="p-row f-avatar-list-more"><span class="f-avatar f-avatar-more">+3</span><div><strong class="p-small">Jules Park, Priya Nair and Tomas Berg</strong><p class="p-small p-muted">Owner, Researcher, Producer</p></div></div></div></div></main></section>
+<section data-ref-state="fallback" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">People / 26</div><h1>A human detail</h1><p>Recognizable at a glance, useful at a small size.</p></div></header><div class="p-panel"><div class="p-between"><div><h2>Working together</h2><p class="p-small p-muted">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack f-avatar-stack" data-part="avatar-stack"><span aria-hidden="true" class="f-avatar" data-who="NS">NS</span><span aria-label="Mira Chen" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><i aria-label="Online" class="p-presence"></i></span><span aria-label="Alex Rivera" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="AR">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span></span><span aria-label="Three more members" class="f-avatar f-avatar-more">+3</span></div><div class="p-avatar-list f-avatar-list"><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted"><i class="f-presence-dot"></i>Online now · Designer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="AR">AR</span><div><strong class="p-small">Alex Rivera</strong><p class="p-small p-muted">Developer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div><div class="p-row f-avatar-list-more"><span class="f-avatar f-avatar-more">+3</span><div><strong class="p-small">Jules Park, Priya Nair and Tomas Berg</strong><p class="p-small p-muted">Owner, Researcher, Producer</p></div></div></div></div></main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/breadcrumbs.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Breadcrumbs · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="breadcrumbs" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="short" inert=""><div class="specimen"><nav aria-label="Breadcrumb" class="breadcrumb f-breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a href="#level-1">Field notes</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><strong aria-current="page">A place for good work</strong></nav><div style="padding-top:34px"><div class="eyebrow">FIELD NOTE / 001</div><h1>A place for<br/>good work.</h1><p class="muted" style="max-width:420px;margin-top:20px">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p></div><div class="rule row"><span class="f-avatar" data-who="MC">MC</span><small>Mira Chen · Updated at 10:42</small></div><div hidden=""><span id="level-0">Northstar Studio</span><span id="level-1">Field notes</span></div></div></section><section data-ref-state="long" hidden="" inert=""><div class="specimen"><nav aria-label="Breadcrumb" class="breadcrumb f-breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><button aria-label="Show full path" class="f-crumb-more" type="button">…</button><span aria-hidden="true" class="f-crumb-more-sep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-1">Projects</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-2">Field notes</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-3">Documents</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a href="#level-4">The field guide</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><strong aria-current="page">A place for good work</strong></nav><div style="padding-top:34px"><div class="eyebrow">FIELD NOTE / 001</div><h1>A place for<br/>good work.</h1><p class="muted" style="max-width:420px;margin-top:20px">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p></div><div class="rule row"><span class="f-avatar" data-who="MC">MC</span><small>Mira Chen · Updated at 10:42</small></div><div hidden=""><span id="level-0">Northstar Studio</span><span id="level-1">Projects</span><span id="level-2">Field notes</span><span id="level-3">Documents</span><span id="level-4">The field guide</span></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/code-block.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Code block · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="code-block" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small code. Clear intent.</h1><p>A readable home for the details.</p></header><div class="code-shell f-code"><div class="code-head"><span class="f-code-name"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg>field-note.html</span><span class="badge">HTML</span><span class="f-code-meta">4 lines</span><span class="spacer"></span><button aria-pressed="false" class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 5h18M3 10h14a4 4 0 0 1 0 8h-4m3-3-3 3 3 3M3 16h5"></path></svg><span class="bevel-button__label">Wrap</span></button><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 8h12v13H8ZM4 17H2V2h12v2"></path></svg><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines f-code-lines" data-part="code"><li><code><span class="tk-tag">&lt;article</span> <span class="tk-attr">class</span>=<span class="tk-str">"field-note"</span><span class="tk-tag">&gt;</span></code></li><li><code> <span class="tk-tag">&lt;h1&gt;</span>A place for good work<span class="tk-tag">&lt;/h1&gt;</span></code></li><li><code> <span class="tk-tag">&lt;p</span> <span class="tk-attr">data-description</span>=<span class="tk-str">"Documents, decisions and the small details that make a project feel like home"</span><span class="tk-tag">&gt;</span>Keep the useful things close.<span class="tk-tag">&lt;/p&gt;</span></code></li><li><code><span class="tk-tag">&lt;/article&gt;</span></code></li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
+  &lt;h1&gt;A place for good work&lt;/h1&gt;
+  &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;
+&lt;/article&gt;</pre></div><p class="note">Copy takes the whole file. Wrap keeps long attribute lines in view.</p></div></section><section data-ref-state="wrapped" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small code. Clear intent.</h1><p>A readable home for the details.</p></header><div class="code-shell f-code"><div class="code-head"><span class="f-code-name"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg>field-note.html</span><span class="badge">HTML</span><span class="f-code-meta">4 lines</span><span class="spacer"></span><button aria-pressed="true" class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 5h18M3 10h14a4 4 0 0 1 0 8h-4m3-3-3 3 3 3M3 16h5"></path></svg><span class="bevel-button__label">Wrap</span></button><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 8h12v13H8ZM4 17H2V2h12v2"></path></svg><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines f-code-lines wrap-code" data-part="code"><li><code><span class="tk-tag">&lt;article</span> <span class="tk-attr">class</span>=<span class="tk-str">"field-note"</span><span class="tk-tag">&gt;</span></code></li><li><code> <span class="tk-tag">&lt;h1&gt;</span>A place for good work<span class="tk-tag">&lt;/h1&gt;</span></code></li><li><code> <span class="tk-tag">&lt;p</span> <span class="tk-attr">data-description</span>=<span class="tk-str">"Documents, decisions and the small details that make a project feel like home"</span><span class="tk-tag">&gt;</span>Keep the useful things close.<span class="tk-tag">&lt;/p&gt;</span></code></li><li><code><span class="tk-tag">&lt;/article&gt;</span></code></li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
+  &lt;h1&gt;A place for good work&lt;/h1&gt;
+  &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;
+&lt;/article&gt;</pre></div><p class="note">Copy takes the whole file. Wrap keeps long attribute lines in view.</p></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/column-manager.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Column manager · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="column-manager" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make the table yours.</h1><p>Visibility and order, without losing your place.</p></header><div class="panel f-column-panel"><div class="pad f-column-head"><h2>Your view of the records.</h2><p class="note">Choose visible columns. Use arrows to reorder.</p></div><div data-part="column-list"><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" disabled="" type="checkbox" value="Invoice"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Invoice</span></label><span class="badge">Pinned</span><button aria-label="Move Invoice up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Invoice down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Client"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Client</span></label><span class="f-order-n">2</span><button aria-label="Move Client up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Client down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Amount"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Amount</span></label><span class="f-order-n">3</span><button aria-label="Move Amount up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Amount down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Status"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Status</span></label><span class="f-order-n">4</span><button aria-label="Move Status up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Status down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input class="bevel-sr-only" data-column-check="" type="checkbox" value="Owner"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Owner</span></label><span class="f-order-n">5</span><button aria-label="Move Owner up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Owner down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div class="pad f-column-foot"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><small>Invoice stays pinned as the record identifier.</small><span class="spacer"></span><small class="f-order-summary">4 of 5 shown</small></div></div></div></section><section data-ref-state="reordered" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make the table yours.</h1><p>Visibility and order, without losing your place.</p></header><div class="panel f-column-panel"><div class="pad f-column-head"><h2>Your view of the records.</h2><p class="note">Choose visible columns. Use arrows to reorder.</p></div><div data-part="column-list"><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" disabled="" type="checkbox" value="Invoice"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Invoice</span></label><span class="badge">Pinned</span><button aria-label="Move Invoice up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Invoice down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item is-moved"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Status"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Status</span></label><span class="f-order-n is-moved">2<i>moved</i></span><button aria-label="Move Status up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Status down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Client"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Client</span></label><span class="f-order-n">3</span><button aria-label="Move Client up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Client down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Amount"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Amount</span></label><span class="f-order-n">4</span><button aria-label="Move Amount up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Amount down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input class="bevel-sr-only" data-column-check="" type="checkbox" value="Owner"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Owner</span></label><span class="f-order-n">5</span><button aria-label="Move Owner up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Owner down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div class="pad f-column-foot"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><small>Invoice stays pinned as the record identifier.</small><span class="spacer"></span><small class="f-order-summary">4 of 5 shown</small></div></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/selected/components/combobox.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Combobox · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="combobox" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="open" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search f-search is-open"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-open" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value=""/><button aria-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg></button></div><div aria-label="Project members" class="p-options" id="people-open" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" role="option"><span aria-hidden="true" class="f-avatar small" data-who="MC">MC</span><span class="p-person"><strong>Mira Chen</strong><small>Designer</small></span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" role="option"><span aria-hidden="true" class="f-avatar small" data-who="AR">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" role="option"><span aria-hidden="true" class="f-avatar small" data-who="SP">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" role="option"><span aria-hidden="true" class="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty="" hidden=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></div></main></section>
+<section data-ref-state="closed" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search f-search"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><input aria-controls="people-closed" aria-expanded="false" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="Mira Chen"/><button aria-expanded="false" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg></button></div></div></main></section>
+<section data-ref-state="filtered" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search f-search is-open"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-filtered" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="mi"/><button aria-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg></button></div><div aria-label="Project members" class="p-options" id="people-filtered" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" role="option"><span aria-hidden="true" class="f-avatar small" data-who="MC">MC</span><span class="p-person"><strong><mark>Mi</mark>ra Chen</strong><small>Designer</small></span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="AR">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="SP">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty="" hidden=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></div></main></section>
+<section data-ref-state="empty" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search f-search is-open"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-empty" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="Taylor"/><button aria-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg></button></div><div aria-label="Project members" class="p-options" id="people-empty" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="MC">MC</span><span class="p-person"><strong>Mira Chen</strong><small>Designer</small></span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="AR">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="SP">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" hidden="" role="option"><span aria-hidden="true" class="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></div></main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>