@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0

package/DS1/5-visual-kit/instagram.ts

@@ -0,0 +1,41 @@
+import { css, html, svg, nothing } from 'lit';
+
+/** Presentation based on the supplied October 2026 iPhone Reels reference. Its frame and media are `instagram-frame.ts`, drawn before this loads. */
+export const instagramStyles = css`
+  .reels::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#0005,transparent 23%,transparent 55%,#0009); }
+  .reels button { width:44px; height:44px; border-radius:8px; color:white; }
+  .reels svg { width:27px; height:27px; stroke-width:1.8; }
+  .reels-header { position:absolute; top:68px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
+  .reels-tabs { display:flex; gap:14px; font-size:24px; font-weight:700; }
+  .reels-tabs span:last-child { color:#ffffffa6; }
+  .reels-actions { position:absolute; right:10px; bottom:118px; display:grid; gap:15px; text-align:center; }
+  .reels-action { display:grid; justify-items:center; font-size:13px; line-height:18px; }
+  .reels-action button { height:36px; }
+  .reels-action span:empty { display:none; }
+  .reels-author { position:absolute; left:16px; right:64px; bottom:120px; font-size:14px; }
+  .reels-identity { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
+  .reels-avatar { flex:none; width:40px; height:40px; border:2px solid #fb44b8; border-radius:50%; padding:2px; background:#ffd52a; color:#111; display:grid; place-items:center; overflow:hidden; }
+  .reels-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
+  .reels-name { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .reels-verified { font-size:15px; }
+  .reels .reels-follow { width:auto; height:28px; padding:0 9px; border:1px solid #ffffff80; font-size:14px; }
+  .reels-caption { margin:0; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
+  .reels-progress { position:absolute; bottom:98px; left:16px; right:16px; height:2px; background:#ffffff40; border-radius:2px; overflow:hidden; }
+  .reels-progress i { display:block; height:100%; background:white; transform-origin:left; }
+  .reels-nav { position:absolute; bottom:26px; left:50px; right:50px; height:52px; padding:3px; border:1px solid #ffffff40; border-radius:30px; background:#3339; backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; }
+  .reels-nav button { flex:1; border-radius:30px; height:44px; }
+  .reels-nav .selected { background:#ffffff30; }
+`;
+const paths: Record<string,string> = {
+  plus:'M12 3v18M3 12h18', heart:'M12 21 3.5 13C-3 6 6-1 12 6 18-1 27 6 20.5 13Z',
+  comment:'M21 20 20 15a9 9 0 1 0-5 5Z', repost:'m15 2 4 4-4 4M19 6H7a4 4 0 0 0-4 4v3m6 9-4-4 4-4M5 18h12a4 4 0 0 0 4-4v-3',
+  send:'m3 3 19 1-8 18-4-11Z M10 11 22 4', more:'M4 8h16M4 14h11',
+  home:'m3 10 9-8 9 8v11h-6v-8H9v8H3Z', reels:'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z m5 4 7 5-7 5Z',
+  search:'M17 17 22 22M20 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0', profile:'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M3 12h18M12 3v18', filters:'M2 6h20M2 18h20M7 3v6M17 15v6',
+};
+interface ReelsOptions { interactive:boolean; username:string; caption:string; avatar:string; verified:boolean; likes:string; comments:string; reposts:string; shares:string; progress:number; action:(action:string)=>void }
+export function instagram(o:ReelsOptions) {
+  const button=(action:string,label:string,selected=false)=>html`<button type="button" class=${selected?'selected':''} aria-label=${label} ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action(action)}>${svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${paths[action] ?? paths.profile}></path></svg>`}</button>`;
+  const action=(name:string,label:string,count:string)=>html`<div class="reels-action">${button(name,label)}<span>${count}</span></div>`;
+  return html`<div class="reels"><div class="reels-media"><slot></slot></div><div class="reels-header">${button('plus','Create')}<div class="reels-tabs"><span>Reels</span><span>Friends</span></div>${button('filters','Feed preferences')}</div><div class="reels-actions">${action('heart','Like',o.likes)}${action('comment','Comment',o.comments)}${action('repost','Repost',o.reposts)}${action('send','Share',o.shares)}${action('more','More','')}</div><div class="reels-author"><div class="reels-identity"><span class="reels-avatar">${o.avatar?html`<img src=${o.avatar} alt="">`:html`<span>◎</span>`}</span><span class="reels-name">${o.username}</span>${o.verified?html`<span class="reels-verified" aria-label="Verified">✹</span>`:nothing}<button class="reels-follow" ?disabled=${!o.interactive} tabindex=${o.interactive?0:-1} @click=${()=>o.action('follow')}>Follow</button></div><p class="reels-caption">${o.caption}</p></div><div class="reels-progress" aria-hidden="true"><i style=${`transform:scaleX(${Math.min(1,Math.max(0,o.progress))})`}></i></div><nav class="reels-nav" aria-label="Instagram">${button('home','Home')}${button('reels','Reels',true)}${button('send','Messages')}${button('search','Search')}${button('profile','Profile')}</nav></div>`;
+}

package/DS1/5-visual-kit/mobile-chrome.ts

@@ -0,0 +1,25 @@
+import { css, html, svg } from 'lit';
+
+/** Measured from the supplied 1179×2556 iPhone capture at 3× (393×852 points). */
+export const mobileChromeStyles = css`
+  :host([kind=safari-ios]) { background:transparent; color:#080808; }
+  :host([kind=safari-ios][appearance=dark]) { color:#f5f5f5; }
+  .mobile { display:flex; align-items:center; gap:7px; padding:0 33px; height:49px; background:transparent; }
+  .mobile > button,.mobile .address { height:49px; border:1px solid #00000016; border-radius:28px; background:linear-gradient(155deg,#ffffffa0,#ffffff66 45%,#ffffffb8); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #ffffffb0,0 2px 9px #00000005; backdrop-filter:blur(3px) saturate(1.5); -webkit-backdrop-filter:blur(3px) saturate(1.5); }
+  .mobile > button { width:49px; flex:none; }
+  .mobile .address { min-width:0; flex:1; padding:0 12px; gap:6px; justify-content:space-between; }
+  .mobile .address span { text-align:center; color:inherit; font-size:17px; font-weight:600; letter-spacing:-.4px; }
+  .mobile .address button { width:24px; height:36px; flex:none; }
+  .mobile svg { width:28px; height:28px; stroke-width:1.65; }
+  .mobile > button:first-child svg { width:27px; height:27px; stroke-width:1.8; }
+  .mobile .address button svg { width:24px; height:24px; }
+  :host([kind=safari-ios][appearance=dark]) .mobile > button,:host([kind=safari-ios][appearance=dark]) .mobile .address { border-color:#ffffff24; background:linear-gradient(155deg,#303030b8,#20202080 45%,#202020e0); box-shadow:inset 0 1px 1px #ffffff35,inset 0 -1px 2px #ffffff18,0 2px 9px #0001; }
+  :host([kind=ios]) .status { height:59px; padding-top:0; }
+  .network { font-size:14px; font-weight:500; line-height:16px; letter-spacing:-.4px; }
+  .signal { display:block; width:20px; height:16px; fill:currentColor; stroke:none; }
+  .status .levels { gap:6px; }
+  .status .battery-meter { display:block; position:relative; width:25px; height:13px; border-radius:4.5px; background:color-mix(in srgb,currentColor 30%,transparent); overflow:visible; }
+  .battery-meter .charge { display:block; height:100%; width:var(--battery-charge,80%); background:currentColor; border-radius:4.5px 0 0 4.5px; }
+  .battery-meter::after { content:''; position:absolute; left:26px; top:4px; width:2px; height:5px; border-radius:0 2px 2px 0; background:color-mix(in srgb,currentColor 30%,transparent); }
+`;
+export const cellularSignal = (dual: boolean) => html`<svg class="signal" viewBox="0 0 20 16" role="img" aria-label=${dual?'Full dual-SIM signal':'Full signal'}>${[0,1,2,3].map(i=>svg`<rect x=${i*5} y=${dual?4-i:7-i*2} width="3.5" height=${dual?6+i:8+i*2} rx="1.75"></rect>${dual?svg`<rect x=${i*5} y="12" width="3.5" height="3.5" rx="1.75"></rect>`:''}`)}</svg>`;

package/DS1/5-visual-kit/native-icon-paths.ts

@@ -0,0 +1,145 @@
+/*!
+Chromium source: https://chromium.googlesource.com/chromium/src/+/refs/tags/155.0.8059.86/components/vector_icons/
+
+// Copyright 2015 The Chromium Authors
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google LLC nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+Microsoft Fluent system icons: https://github.com/microsoft/fluentui-system-icons
+
+MIT License
+
+Copyright (c) 2020 Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+/** Chromium 155 (BSD-3-Clause) and Microsoft Fluent system icons (MIT). See browser-icons.LICENSE. */
+export const chromiumIcons = {
+  "back": {
+    "size": 24,
+    "path": "m 7.82 13 l 4.9 4.9 c 0.2 0.2 0.29 0.43 0.28 0.7 c -0.01 0.27 -0.11 0.5 -0.31 0.7 c -0.2 0.18 -0.43 0.28 -0.7 0.28 a 0.9 0.9 0 0 1 -0.7 -0.28 l -6.6 -6.6 a 0.85 0.85 0 0 1 -0.21 -0.32 A 1.08 1.08 0 0 1 4.43 12 c 0 -0.13 0.02 -0.26 0.06 -0.37 a 0.85 0.85 0 0 1 0.21 -0.32 l 6.6 -6.6 a 0.93 0.93 0 0 1 0.69 -0.27 a 0.98 0.98 0 0 1 1.01 0.99 a 0.98 0.98 0 0 1 -0.3 0.71 L 7.82 11 H 19 c 0.28 0 0.52 0.1 0.71 0.29 c 0.19 0.19 0.29 0.43 0.29 0.71 c 0 0.28 -0.1 0.52 -0.29 0.71 A 0.96 0.96 0 0 1 19 13 Z"
+  },
+  "forward": {
+    "size": 24,
+    "path": "M 16.18 13 H 5 a 0.96 0.96 0 0 1 -0.71 -0.29 A 0.96 0.96 0 0 1 4 12 c 0 -0.28 0.1 -0.52 0.29 -0.71 A 0.96 0.96 0 0 1 5 11 h 11.18 l -4.9 -4.9 a 0.93 0.93 0 0 1 -0.28 -0.7 c 0.01 -0.26 0.11 -0.5 0.31 -0.7 c 0.2 -0.18 0.43 -0.28 0.7 -0.28 c 0.27 -0.01 0.5 0.09 0.7 0.28 l 6.6 6.6 a 0.85 0.85 0 0 1 0.21 0.32 c 0.04 0.12 0.06 0.24 0.06 0.38 c 0 0.14 -0.02 0.26 -0.06 0.38 a 0.85 0.85 0 0 1 -0.21 0.32 l -6.6 6.6 a 0.93 0.93 0 0 1 -0.69 0.27 a 0.98 0.98 0 0 1 -1.01 -0.99 c 0 -0.27 0.1 -0.51 0.3 -0.71 Z"
+  },
+  "reload": {
+    "size": 24,
+    "path": "M 12 20 c -2.23 0 -4.12 -0.77 -5.68 -2.32 C 4.77 16.13 4 14.23 4 12 c 0 -2.23 0.77 -4.12 2.32 -5.68 C 7.88 4.77 9.77 4 12 4 c 1.15 0 2.25 0.24 3.3 0.71 A 7.64 7.64 0 0 1 18 6.75 V 5 c 0 -0.28 0.1 -0.52 0.29 -0.71 A 0.96 0.96 0 0 1 19 4 c 0.28 0 0.52 0.1 0.71 0.29 c 0.19 0.19 0.29 0.43 0.29 0.71 v 5 c 0 0.28 -0.1 0.52 -0.29 0.71 A 0.96 0.96 0 0 1 19 11 h -5 a 0.96 0.96 0 0 1 -0.71 -0.29 A 0.96 0.96 0 0 1 13 10 c 0 -0.28 0.1 -0.52 0.29 -0.71 A 0.96 0.96 0 0 1 14 9 h 3.2 a 5.8 5.8 0 0 0 -2.19 -2.2 A 5.91 5.91 0 0 0 12 6 c -1.67 0 -3.08 0.58 -4.25 1.75 C 6.58 8.92 6 10.33 6 12 c 0 1.67 0.58 3.08 1.75 4.25 C 8.92 17.42 10.33 18 12 18 c 1.13 0 2.17 -0.29 3.11 -0.86 a 5.93 5.93 0 0 0 2.19 -2.31 c 0.13 -0.23 0.32 -0.39 0.56 -0.49 c 0.24 -0.09 0.49 -0.09 0.74 -0.01 a 0.9 0.9 0 0 1 0.57 0.53 c 0.12 0.27 0.11 0.52 -0.03 0.75 a 8.09 8.09 0 0 1 -2.92 3.2 C 14.96 19.6 13.55 20 12 20 Z"
+  },
+  "tune": {
+    "size": 20,
+    "path": "M 9.72 16.79 a 0.73 0.73 0 0 1 -0.22 -0.53 v -3.5 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.71 0.71 0 0 1 0.53 -0.21 c 0.21 0 0.39 0.07 0.54 0.22 a 0.73 0.73 0 0 1 0.22 0.54 v 1 h 5.25 c 0.21 0 0.39 0.07 0.54 0.22 c 0.14 0.14 0.22 0.32 0.22 0.53 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.73 0.73 0 0 1 -0.53 0.22 H 11 v 1 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.71 0.71 0 0 1 -0.53 0.22 c -0.21 0 -0.39 -0.07 -0.53 -0.21 Z M 3.75 15.25 c -0.21 0 -0.39 -0.07 -0.53 -0.21 A 0.71 0.71 0 0 1 3 14.5 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.73 0.73 0 0 1 0.54 -0.22 h 3.5 c 0.21 0 0.39 0.07 0.54 0.22 c 0.14 0.14 0.22 0.32 0.22 0.53 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.73 0.73 0 0 1 -0.53 0.22 Z m 2.47 -2.96 A 0.73 0.73 0 0 1 6 11.75 v -1 H 3.75 c -0.21 0 -0.39 -0.07 -0.53 -0.21 A 0.72 0.72 0 0 1 3 10 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.73 0.73 0 0 1 0.54 -0.22 H 6 v -1 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.71 0.71 0 0 1 0.53 -0.21 c 0.21 0 0.39 0.07 0.54 0.22 a 0.73 0.73 0 0 1 0.22 0.54 v 3.5 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.71 0.71 0 0 1 -0.53 0.22 c -0.21 0 -0.39 -0.07 -0.53 -0.21 Z M 9.75 10.75 c -0.21 0 -0.39 -0.07 -0.53 -0.21 A 0.71 0.71 0 0 1 9 10 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.73 0.73 0 0 1 0.54 -0.22 h 6.5 c 0.21 0 0.39 0.07 0.54 0.22 c 0.14 0.14 0.22 0.32 0.22 0.53 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.73 0.73 0 0 1 -0.53 0.22 Z m 2.47 -2.96 A 0.73 0.73 0 0 1 12 7.25 v -3.5 c 0 -0.21 0.07 -0.39 0.22 -0.53 A 0.71 0.71 0 0 1 12.75 3 c 0.21 0 0.39 0.07 0.54 0.22 a 0.73 0.73 0 0 1 0.22 0.54 v 1 h 2.75 c 0.21 0 0.39 0.07 0.54 0.22 c 0.14 0.14 0.22 0.32 0.22 0.53 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.73 0.73 0 0 1 -0.53 0.22 H 13.5 v 1 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.71 0.71 0 0 1 -0.53 0.22 c -0.21 0 -0.39 -0.07 -0.53 -0.21 Z M 3.75 6.25 c -0.21 0 -0.39 -0.07 -0.53 -0.21 A 0.71 0.71 0 0 1 3 5.5 c 0 -0.21 0.07 -0.39 0.22 -0.53 a 0.73 0.73 0 0 1 0.54 -0.22 h 6.5 c 0.21 0 0.39 0.07 0.54 0.22 c 0.14 0.14 0.22 0.32 0.22 0.53 c 0 0.21 -0.07 0.39 -0.21 0.54 a 0.73 0.73 0 0 1 -0.53 0.22 Z"
+  },
+  "extensions": {
+    "size": 20,
+    "path": "M 4.5 17 c -0.41 0 -0.77 -0.15 -1.06 -0.44 A 1.44 1.44 0 0 1 3 15.5 v -2.89 c 0 -0.18 0.06 -0.34 0.17 -0.48 a 0.65 0.65 0 0 1 0.44 -0.25 a 2.28 2.28 0 0 0 1 -0.73 C 4.87 10.81 5 10.43 5 10 c 0 -0.43 -0.13 -0.81 -0.39 -1.14 a 2.28 2.28 0 0 0 -1 -0.73 a 0.64 0.64 0 0 1 -0.44 -0.25 A 0.78 0.78 0 0 1 3 7.38 V 4.5 c 0 -0.41 0.15 -0.77 0.44 -1.06 A 1.44 1.44 0 0 1 4.5 3 H 8 c 0 -0.56 0.19 -1.03 0.58 -1.42 A 1.93 1.93 0 0 1 10 1 c 0.56 0 1.03 0.19 1.42 0.58 c 0.39 0.39 0.58 0.86 0.58 1.42 h 3.5 c 0.41 0 0.77 0.15 1.06 0.44 c 0.29 0.29 0.44 0.65 0.44 1.06 V 8 a 1.94 1.94 0 0 1 1.42 0.58 c 0.39 0.39 0.58 0.86 0.58 1.42 c 0 0.56 -0.19 1.03 -0.58 1.42 A 1.94 1.94 0 0 1 17 12 v 3.5 c 0 0.41 -0.15 0.77 -0.44 1.06 A 1.44 1.44 0 0 1 15.5 17 Z m 0 -1.5 h 11 v -11 h -11 v 2.33 a 3.23 3.23 0 0 1 1.47 1.28 C 6.32 8.69 6.5 9.32 6.5 10 c 0 0.7 -0.18 1.33 -0.53 1.91 A 3.12 3.12 0 0 1 4.5 13.17 Z M 10 10 Z"
+  },
+  "profile": {
+    "size": 24,
+    "path": "M 5.85 17.1 a 10.32 10.32 0 0 1 2.85 -1.54 A 9.75 9.75 0 0 1 12 15 c 1.15 0 2.25 0.19 3.3 0.56 c 1.05 0.37 2 0.89 2.85 1.54 a 7.67 7.67 0 0 0 1.36 -2.33 A 7.83 7.83 0 0 0 20 12 c 0 -2.21 -0.78 -4.11 -2.34 -5.66 C 16.11 4.78 14.21 4 12 4 c -2.21 0 -4.11 0.78 -5.66 2.34 C 4.78 7.9 4 9.79 4 12 c 0 0.98 0.16 1.91 0.49 2.77 a 7.67 7.67 0 0 0 1.36 2.33 Z m 3.66 -5.11 C 8.84 11.31 8.5 10.48 8.5 9.5 c 0 -0.98 0.34 -1.81 1.01 -2.49 C 10.19 6.34 11.02 6 12 6 c 0.98 0 1.81 0.34 2.49 1.01 c 0.68 0.68 1.01 1.5 1.01 2.49 c 0 0.99 -0.34 1.81 -1.01 2.49 C 13.81 12.66 12.98 13 12 13 c -0.98 0 -1.81 -0.34 -2.49 -1.01 Z M 12 22 a 9.69 9.69 0 0 1 -3.9 -0.79 a 9.99 9.99 0 0 1 -3.18 -2.14 a 9.99 9.99 0 0 1 -2.14 -3.18 A 9.69 9.69 0 0 1 2 12 c 0 -1.38 0.26 -2.68 0.79 -3.9 a 9.99 9.99 0 0 1 2.14 -3.18 a 9.99 9.99 0 0 1 3.18 -2.14 A 9.69 9.69 0 0 1 12 2 c 1.38 0 2.68 0.26 3.9 0.79 a 9.99 9.99 0 0 1 3.18 2.14 a 9.99 9.99 0 0 1 2.14 3.18 A 9.69 9.69 0 0 1 22 12 a 9.69 9.69 0 0 1 -0.79 3.9 a 9.99 9.99 0 0 1 -2.14 3.18 a 9.99 9.99 0 0 1 -3.18 2.14 A 9.69 9.69 0 0 1 12 22 Z m 2.5 -2.39 a 7.44 7.44 0 0 0 2.15 -1.11 a 7.44 7.44 0 0 0 -2.15 -1.11 A 7.96 7.96 0 0 0 12 17 c -0.88 0 -1.71 0.13 -2.5 0.39 A 7.44 7.44 0 0 0 7.35 18.5 A 7.44 7.44 0 0 0 9.5 19.61 A 7.96 7.96 0 0 0 12 20 c 0.88 0 1.72 -0.13 2.5 -0.39 Z m -1.43 -9.04 c 0.28 -0.28 0.43 -0.64 0.43 -1.07 c 0 -0.43 -0.14 -0.79 -0.43 -1.07 C 12.79 8.14 12.43 8 12 8 c -0.43 0 -0.79 0.14 -1.07 0.43 c -0.28 0.28 -0.43 0.64 -0.43 1.07 c 0 0.43 0.14 0.79 0.43 1.07 c 0.28 0.28 0.64 0.43 1.07 0.43 c 0.43 0 0.79 -0.14 1.07 -0.43 Z M 12 9.5 Z m 0 9 Z"
+  },
+  "close-tab": {
+    "size": 20,
+    "path": "M 10 11.06 L 7.56 13.48 a 0.72 0.72 0 0 1 -0.52 0.23 a 0.72 0.72 0 0 1 -0.52 -0.23 a 0.72 0.72 0 0 1 -0.23 -0.52 c 0 -0.19 0.07 -0.37 0.23 -0.52 L 8.94 10 L 6.52 7.59 a 0.71 0.71 0 0 1 0 -1.04 a 0.72 0.72 0 0 1 0.52 -0.23 c 0.19 0 0.37 0.08 0.52 0.23 L 10 8.96 l 2.41 -2.41 a 0.73 0.73 0 0 1 0.52 -0.23 c 0.2 0 0.37 0.08 0.52 0.23 c 0.15 0.15 0.23 0.32 0.23 0.52 a 0.73 0.73 0 0 1 -0.23 0.52 L 11.04 10 l 2.41 2.44 c 0.15 0.15 0.23 0.33 0.23 0.52 a 0.72 0.72 0 0 1 -0.23 0.52 a 0.71 0.71 0 0 1 -1.04 0 Z"
+  },
+  "chevron-down": {
+    "size": 16,
+    "path": "M 7.74 10.24 a 0.61 0.61 0 0 1 -0.22 -0.14 L 4.35 6.93 a 0.65 0.65 0 0 1 -0.2 -0.49 a 0.72 0.72 0 0 1 0.22 -0.49 a 0.67 0.67 0 0 1 0.98 0 L 8 8.62 l 2.67 -2.67 a 0.65 0.65 0 0 1 0.49 -0.2 a 0.7 0.7 0 0 1 0.49 0.22 a 0.67 0.67 0 0 1 0 0.98 l -3.16 3.15 a 0.61 0.61 0 0 1 -0.22 0.14 a 0.68 0.68 0 0 1 -0.26 0.06 a 0.68 0.68 0 0 1 -0.26 -0.05 Z"
+  },
+  "star": {
+    "size": 16,
+    "path": "M 5.94 11.01 L 8 9.79 l 2.07 1.22 l -0.55 -2.31 l 1.79 -1.53 l -2.36 -0.21 L 8 4.76 L 7.05 6.97 l -2.36 0.2 l 1.8 1.52 Z M 8 11.4 l -2.75 1.64 a 0.71 0.71 0 0 1 -0.41 0.1 a 0.67 0.67 0 0 1 -0.36 -0.14 a 0.67 0.67 0 0 1 -0.23 -0.32 a 0.64 0.64 0 0 1 -0.02 -0.41 l 0.72 -3.06 l -2.43 -2.06 a 0.6 0.6 0 0 1 -0.21 -0.35 a 0.83 0.83 0 0 1 0.01 -0.39 a 0.63 0.63 0 0 1 0.22 -0.32 a 0.68 0.68 0 0 1 0.39 -0.15 l 3.18 -0.28 l 1.26 -2.92 a 0.67 0.67 0 0 1 0.27 -0.32 a 0.7 0.7 0 0 1 0.73 0 a 0.67 0.67 0 0 1 0.27 0.32 L 9.89 5.68 l 3.18 0.27 a 0.64 0.64 0 0 1 0.39 0.16 c 0.11 0.09 0.18 0.2 0.22 0.32 a 0.69 0.69 0 0 1 -0.21 0.73 l -2.41 2.06 l 0.72 3.06 a 0.64 0.64 0 0 1 -0.02 0.41 a 0.67 0.67 0 0 1 -0.23 0.32 a 0.67 0.67 0 0 1 -0.36 0.14 a 0.71 0.71 0 0 1 -0.41 -0.1 Z m 0 -3.34 Z"
+  }
+};
+export const edgeIcons = {
+  "back": {
+    "size": 20,
+    "path": "M9.15898 16.8666C9.36292 17.0528 9.67918 17.0384 9.86536 16.8345C10.0515 16.6305 10.0371 16.3143 9.8332 16.1281L3.66535 10.4974H17.4961C17.7722 10.4974 17.9961 10.2735 17.9961 9.99736C17.9961 9.72122 17.7722 9.49736 17.4961 9.49736H3.66824L9.8332 3.86927C10.0371 3.68309 10.0515 3.36684 9.86536 3.16289C9.67918 2.95895 9.36292 2.94456 9.15898 3.13074L2.24263 9.44478C2.10268 9.57254 2.02285 9.74008 2.00314 9.91323C1.99851 9.94058 1.99609 9.96869 1.99609 9.99736C1.99609 10.0242 1.99821 10.0506 2.00229 10.0763C2.02047 10.2522 2.10058 10.4229 2.24263 10.5526L9.15898 16.8666Z"
+  },
+  "forward": {
+    "size": 20,
+    "path": "M10.8371 3.13074C10.6332 2.94456 10.3169 2.95895 10.1307 3.16289C9.94456 3.36683 9.95895 3.68309 10.1629 3.86927L16.3307 9.5H2.5C2.22386 9.5 2 9.72386 2 10C2 10.2761 2.22386 10.5 2.5 10.5H16.3279L10.1629 16.1281C9.95895 16.3143 9.94456 16.6305 10.1307 16.8345C10.3169 17.0384 10.6332 17.0528 10.8371 16.8666L17.7535 10.5526C17.8934 10.4248 17.9732 10.2573 17.993 10.0841C17.9976 10.0568 18 10.0287 18 10C18 9.97313 17.9979 9.94675 17.9938 9.92103C17.9756 9.74512 17.8955 9.57446 17.7535 9.44478L10.8371 3.13074Z"
+  },
+  "reload": {
+    "size": 20,
+    "path": "M4 10C4 6.68629 6.68629 4 10 4C11.7766 4 13.3732 4.77191 14.4723 6H12.5C12.2239 6 12 6.22386 12 6.5C12 6.77614 12.2239 7 12.5 7H15.5C15.7761 7 16 6.77614 16 6.5V3.5C16 3.22386 15.7761 3 15.5 3C15.2239 3 15 3.22386 15 3.5V5.10109C13.7299 3.80499 11.9591 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 9.8191 16.9931 9.6397 16.9796 9.46207C16.9587 9.18673 16.7185 8.98049 16.4431 9.00144C16.1678 9.02239 15.9615 9.26258 15.9825 9.53793C15.9941 9.69034 16 9.84443 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10Z"
+  },
+  "lock": {
+    "size": 20,
+    "path": "M10 1C12.2091 1 14 2.79086 14 5V7.0498C15.1411 7.28142 16 8.29051 16 9.5V15.5C16 16.8807 14.8807 18 13.5 18H6.5C5.11929 18 4 16.8807 4 15.5V9.5C4 8.29051 4.85886 7.28142 6 7.0498V5C6 2.79086 7.79086 1 10 1ZM6.5 8C5.67157 8 5 8.67157 5 9.5V15.5C5 16.3284 5.67157 17 6.5 17H13.5C14.3284 17 15 16.3284 15 15.5V9.5C15 8.67157 14.3284 8 13.5 8H6.5ZM10 11.5C10.5523 11.5 11 11.9477 11 12.5C11 13.0523 10.5523 13.5 10 13.5C9.44772 13.5 9 13.0523 9 12.5C9 11.9477 9.44772 11.5 10 11.5ZM10 2C8.34315 2 7 3.34315 7 5V7H13V5C13 3.34315 11.6569 2 10 2Z"
+  },
+  "reading": {
+    "size": 20,
+    "path": "M10 16.0002C9.54389 16.6073 8.8178 17 8 17H3.5C2.67157 17 2 16.3284 2 15.5V4.5C2 3.67157 2.67157 3 3.5 3H8C8.8178 3 9.54389 3.39267 10 3.99976C10.4561 3.39267 11.1822 3 12 3H16.5C17.3284 3 18 3.67157 18 4.5L18 15.5C18 16.3284 17.3284 17 16.5 17L12 17C11.1822 17 10.4561 16.6073 10 16.0002ZM3 4.5V15.5C3 15.7761 3.22386 16 3.5 16H8C8.82843 16 9.5 15.3284 9.5 14.5V5.5C9.5 4.67157 8.82843 4 8 4H3.5C3.22386 4 3 4.22386 3 4.5ZM10.5 14.5C10.5 15.3284 11.1716 16 12 16L16.5 16C16.7761 16 17 15.7761 17 15.5L17 4.5C17 4.22386 16.7761 4 16.5 4L12 4C11.1716 4 10.5 4.67157 10.5 5.5V14.5Z"
+  },
+  "star": {
+    "size": 20,
+    "path": "M9.10433 2.89923C9.47114 2.15598 10.531 2.15599 10.8978 2.89923L12.8282 6.81073L17.1448 7.43797C17.9651 7.55715 18.2926 8.56513 17.699 9.14366L14.5755 12.1883L15.3129 16.4875C15.453 17.3044 14.5956 17.9274 13.8619 17.5417L10.0011 15.5119L6.14018 17.5417C5.40655 17.9274 4.54913 17.3044 4.68924 16.4875L5.4266 12.1883L2.30308 9.14366C1.70956 8.56512 2.03708 7.55715 2.8573 7.43797L7.17389 6.81073L9.10433 2.89923ZM10.0011 3.3418L8.07062 7.25329C7.92496 7.54844 7.6434 7.75301 7.31769 7.80034L3.00109 8.42757L6.12461 11.4722C6.3603 11.702 6.46784 12.033 6.41221 12.3574L5.67484 16.6565L9.53572 14.6267C9.82705 14.4736 10.1751 14.4736 10.4664 14.6267L14.3273 16.6565L13.5899 12.3574C13.5343 12.033 13.6418 11.702 13.8775 11.4722L17.001 8.42757L12.6844 7.80034C12.3587 7.75301 12.0772 7.54844 11.9315 7.25329L10.0011 3.3418Z"
+  },
+  "favorites": {
+    "size": 20,
+    "path": "M9.10431 2.89923C9.47113 2.15597 10.531 2.15599 10.8978 2.89926L12.9217 7.00032H17.5008C17.777 7.00032 18.0008 7.22418 18.0008 7.50032C18.0008 7.77646 17.777 8.00032 17.5008 8.00032H12.9217C12.541 8.00032 12.1934 7.78421 12.0249 7.44286L10.001 3.3418L8.07062 7.25326C7.92496 7.54841 7.6434 7.75298 7.31769 7.8003L3.00109 8.42754L6.12461 11.4722C6.3603 11.702 6.46784 12.033 6.41221 12.3573L5.67484 16.6565L9.76839 14.5044C10.0128 14.3759 10.3151 14.4699 10.4436 14.7143C10.5721 14.9587 10.4782 15.261 10.2337 15.3895L6.14018 17.5416C5.40655 17.9273 4.54913 17.3044 4.68924 16.4875L5.4266 12.1883L2.30308 9.14363C1.70956 8.56509 2.03708 7.55712 2.8573 7.43793L7.17389 6.8107L9.10431 2.89923ZM12 10.5004C12 10.2242 12.2239 10.0004 12.5 10.0004H17.5C17.7761 10.0004 18 10.2242 18 10.5004C18 10.7765 17.7761 11.0004 17.5 11.0004H12.5C12.2239 11.0004 12 10.7765 12 10.5004ZM12.5 13.0004C12.2239 13.0004 12 13.2242 12 13.5004C12 13.7765 12.2239 14.0004 12.5 14.0004H17.5C17.7761 14.0004 18 13.7765 18 13.5004C18 13.2242 17.7761 13.0004 17.5 13.0004H12.5Z"
+  },
+  "profile": {
+    "size": 20,
+    "path": "M8 7C8 5.89543 8.89543 5 10 5C11.1046 5 12 5.89543 12 7C12 8.10457 11.1046 9 10 9C8.89543 9 8 8.10457 8 7ZM7.49998 10L12.5 10C13.3284 10 14 10.6716 14 11.5C14 12.6161 13.541 13.5103 12.7879 14.1148C12.0466 14.7098 11.0531 15 10 15C8.94692 15 7.95342 14.7098 7.21215 14.1148C6.45897 13.5103 6 12.6161 6 11.5C6 10.6716 6.67156 10 7.49998 10ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+  },
+  "more-horizontal": {
+    "size": 20,
+    "path": "M6.25 10C6.25 10.6904 5.69036 11.25 5 11.25C4.30964 11.25 3.75 10.6904 3.75 10C3.75 9.30964 4.30964 8.75 5 8.75C5.69036 8.75 6.25 9.30964 6.25 10ZM11.25 10C11.25 10.6904 10.6904 11.25 10 11.25C9.30964 11.25 8.75 10.6904 8.75 10C8.75 9.30964 9.30964 8.75 10 8.75C10.6904 8.75 11.25 9.30964 11.25 10ZM15 11.25C15.6904 11.25 16.25 10.6904 16.25 10C16.25 9.30964 15.6904 8.75 15 8.75C14.3096 8.75 13.75 9.30964 13.75 10C13.75 10.6904 14.3096 11.25 15 11.25Z"
+  },
+  "chevron-down": {
+    "size": 20,
+    "path": "M15.8537 7.64582C16.0493 7.84073 16.0499 8.15731 15.855 8.35292L10.39 13.8374C10.1751 14.0531 9.82574 14.0531 9.6108 13.8374L4.14582 8.35292C3.9509 8.15731 3.95147 7.84073 4.14708 7.64582C4.34269 7.4509 4.65927 7.45147 4.85418 7.64708L10.0004 12.8117L15.1466 7.64708C15.3415 7.45147 15.6581 7.4509 15.8537 7.64582Z"
+  },
+  "plus": {
+    "size": 20,
+    "path": "M10 2.5C10.2761 2.5 10.5 2.72386 10.5 3V9.5H17C17.2761 9.5 17.5 9.72386 17.5 10C17.5 10.2761 17.2761 10.5 17 10.5H10.5V17C10.5 17.2761 10.2761 17.5 10 17.5C9.72386 17.5 9.5 17.2761 9.5 17V10.5H3C2.72386 10.5 2.5 10.2761 2.5 10C2.5 9.72386 2.72386 9.5 3 9.5H9.5V3C9.5 2.72386 9.72386 2.5 10 2.5Z"
+  },
+  "close-tab": {
+    "size": 20,
+    "path": "M4.08859 4.21569L4.14645 4.14645C4.32001 3.97288 4.58944 3.9536 4.78431 4.08859L4.85355 4.14645L10 9.293L15.1464 4.14645C15.32 3.97288 15.5894 3.9536 15.7843 4.08859L15.8536 4.14645C16.0271 4.32001 16.0464 4.58944 15.9114 4.78431L15.8536 4.85355L10.707 10L15.8536 15.1464C16.0271 15.32 16.0464 15.5894 15.9114 15.7843L15.8536 15.8536C15.68 16.0271 15.4106 16.0464 15.2157 15.9114L15.1464 15.8536L10 10.707L4.85355 15.8536C4.67999 16.0271 4.41056 16.0464 4.21569 15.9114L4.14645 15.8536C3.97288 15.68 3.9536 15.4106 4.08859 15.2157L4.14645 15.1464L9.293 10L4.14645 4.85355C3.97288 4.67999 3.9536 4.41056 4.08859 4.21569L4.14645 4.14645L4.08859 4.21569Z"
+  }
+};

package/DS1/5-visual-kit/window.ts

@@ -0,0 +1,22 @@
+import { LitElement, css, html } from 'lit';
+import { define } from '../0-face/define';
+import './app-chrome';
+/** Window shell around real app DOM or an iframe. The default slot owns the viewport. */
+export class DsWindow extends LitElement {
+  static properties = { frameless:{type:Boolean,reflect:true}, kind:{reflect:true}, appearance:{reflect:true}, label:{}, address:{}, href:{}, interactive:{type:Boolean}, favicon:{}, backAvailable:{type:Boolean,attribute:'back-available'}, forwardAvailable:{type:Boolean,attribute:'forward-available'} };
+  declare frameless: boolean; declare kind: string; declare appearance: string; declare label: string; declare address: string; declare href: string; declare interactive: boolean; declare favicon: string; declare backAvailable: boolean; declare forwardAvailable: boolean;
+  constructor(){super();this.frameless=false;this.kind='macos';this.appearance='light';this.label='Application';this.address='';this.href='';this.interactive=false;this.favicon='';this.backAvailable=true;this.forwardAvailable=false;}
+  static styles=css`
+    :host { display:flex; flex-direction:column; min-width:0; height:var(--ds-window-height,100%); overflow:hidden; border-radius:12px; border:1px solid #0003; background:var(--ds-window-paper,#fff); box-shadow:0 20px 50px #0002; }
+    :host([frameless]) { display:contents; }
+    :host([frameless]) ds-app-chrome { display:none; }
+    :host([frameless]) .viewport { display:contents; }
+    :host([appearance=dark]) { border-color:#ffffff40; --ds-window-paper:#1c1c1e; }
+    :host([kind=macos-compact]) { border-radius:calc(10px * var(--sf,1)); box-shadow:none; border-color:color-mix(in srgb,var(--ds-text-color,#26251e) 10%,transparent); }
+    ds-app-chrome { flex:none; } .viewport { position:relative; flex:1; min-height:0; overflow:hidden; }
+    ::slotted(iframe) { display:block; width:100%; height:100%; border:0; }
+  `;
+  render(){return html`<ds-app-chrome .kind=${this.kind} .appearance=${this.appearance} .label=${this.label} .address=${this.address} .href=${this.href} .interactive=${this.interactive} .favicon=${this.favicon} .backAvailable=${this.backAvailable} .forwardAvailable=${this.forwardAvailable}></ds-app-chrome><div class="viewport" part="viewport"><slot></slot></div>`;}
+}
+define('ds-window',DsWindow);
+declare global { interface HTMLElementTagNameMap { 'ds-window': DsWindow; } }

package/DS1/components.ts

@@ -1,5 +1,6 @@
 /** Shared Lit components. Import the scoped component tokens separately. */
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-activity";
 export * from "./2-core/ds-text";
 export * from "./2-core/ds-input";
 export * from "./2-core/ds-gap";

package/DS1/index.ts

@@ -21,6 +21,8 @@ import "./0-face/i18n";
 
 export * from "./0-face/device";
 export * from "./0-face/grid";
+export * from "./0-face/constraints";
+export * from "./0-face/constraint-panel";
 export * from "./0-face/tooltips";
 export * from "./0-face/i18n";
 export * from "./0-face/languages";
@@ -30,6 +32,7 @@ export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
+export * from "./0-face/shape";
 export * from "./0-face/keys";
 export * from "./0-face/sidebar";
 
@@ -40,6 +43,7 @@ export * from "./0-face/sidebar";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-tag";
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-activity";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
@@ -52,6 +56,7 @@ export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-number";
 export * from "./2-core/ds-file-picker";
 export * from "./2-core/ds-composer";
 export * from "./2-core/ds-message";
@@ -70,7 +75,6 @@ export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
 export * from "./3-unit/ds-calendar";
-export * from "./3-unit/ds-calendar-large";
 export * from "./3-unit/ds-bento";
 export * from "./3-unit/ds-carousel";
 export * from "./3-unit/ds-form";
@@ -78,6 +82,7 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
+export * from "./3-unit/ds-table-of-contents";
 
 // ============================================================================
 // 4-page: Layout Components
@@ -106,3 +111,11 @@ export * from "./2-core/ds-chart";
 export * from "./0-face/component-visibility";
 
 export * from "./2-core/ds-image";
+
+export { reportFailure, FAILURE_EVENT } from "./0-face/failures";
+export type { Failure } from "./0-face/failures";
+
+export * from "./2-core/ds-window";
+export * from "./2-core/ds-device-bezel";
+export * from "./2-core/ds-app-chrome";
+export { BEZELS, bezelById, screenGeometry } from "./5-visual-kit/bezels";

package/DS1/react/choice.ts

@@ -37,12 +37,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
 
 export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "role" | "aria-checked" | "onChange" | "type"> & {
   checked: boolean;
+  compact?: boolean;
+  monochrome?: boolean;
   onCheckedChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 };
 export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
-  { checked, onCheckedChange, onClick, className, style, hidden, ...props }, ref,
+  { checked, onCheckedChange, onClick, className, style, hidden, compact, monochrome, ...props }, ref,
 ) {
-  return createElement("ds-switch", { className, style, hidden }, createElement("button", {
+  return createElement("ds-switch", { className, style, hidden, compact: compact || undefined, monochrome: monochrome || undefined }, createElement("button", {
     ...props, ref, hidden, type: "button", role: "switch", "aria-checked": checked,
     onClick: (event: MouseEvent<HTMLButtonElement>) => {
       onClick?.(event);

package/DS1/react/context.ts

@@ -7,7 +7,7 @@ import {
 import { MenuHost, type MenuProps } from "./menu-engine";
 import { Button, type ButtonProps } from "./button";
 import { FilePicker, type FilePickerProps } from "./file-picker";
-import type { Menu as MenuElement, MenuCloseReason } from "../3-unit/ds-menu";
+import type { Menu as MenuElement, MenuAnchor, MenuCloseReason } from "../3-unit/ds-menu";
 
 const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 type State = {
@@ -73,18 +73,23 @@ export const ContextTrigger = forwardRef<HTMLElement, ContextTriggerProps>(funct
   return h("span", { ...attributes, tabIndex: disabled ? -1 : 0 }, children);
 });
 
-export type ContextContentProps = Omit<MenuProps, "open" | "trigger" | "anchor" | "triggerMode" | "onOpenChange">;
+export type ContextContentProps = Omit<MenuProps, "open" | "trigger" | "anchor" | "triggerMode" | "onOpenChange"> & {
+  /** The context bar over what is selected: the rows side by side, standing over `anchor`, the focus left where it is. */
+  bar?: boolean;
+  /** Where a bar stands: the selection's rectangle, or an element. */
+  anchor?: MenuAnchor | null;
+};
 export const ContextContent = forwardRef<MenuElement, ContextContentProps>(function ContextContent(
-  { children, placement, ...props }, ref,
+  { children, placement, bar, anchor, ...props }, ref,
 ) {
   const state = useMenu();
   useCommitEffect(() => { state.menu.current?.renderNow(); });
   // Render the closed host so the source can continue listening to its trigger.
   // Open descendants unmount together, including nested menu state.
-  return h(MenuHost, { ...props, tag: state.nested ? "ds-select" : "ds-context", id: props.id ?? state.id, role: "menu", hidden: !state.open,
+  return h(MenuHost, { ...props, bar, tag: state.nested ? "ds-select" : "ds-context", id: props.id ?? state.id, role: "menu", hidden: !state.open,
     "data-slot": state.nested ? "context-sub-content" : "context-content",
-    open: state.open, trigger: state.trigger, anchor: state.trigger,
-    triggerMode: state.nested ? "submenu" : "context", placement: placement ?? (state.nested ? "right" : "bottom"),
+    open: state.open, trigger: state.trigger, anchor: bar ? anchor ?? null : state.trigger,
+    triggerMode: state.nested ? "submenu" : "context", placement: placement ?? (bar ? "top" : state.nested ? "right" : "bottom"),
     ref: (element: MenuElement | null) => { state.menu.current = element; setRef(ref, element); },
     onOpenChange: state.change,
   } as MenuProps, state.open ? children : null);

package/DS1/react/empty.ts

@@ -9,7 +9,7 @@ export type EmptyProps = Omit<HTMLAttributes<EmptyElement>, "title"> & {
   heading?: ReactNode;
   /** The line under the title; `children` take its place when given. */
   text?: ReactNode;
-  /** An icon from the library on the square above the title. */
+  /** An icon from the library inline before the title. */
   icon?: string;
   /** The buttons or links that fill the place, on one row. */
   actions?: ReactNode;
@@ -27,7 +27,7 @@ const title = (content: ReactNode) =>
 export const Empty = forwardRef<EmptyElement, EmptyProps>(function Empty(
   { heading, text, icon, actions, centered, level, tone, children, ...props }, ref,
 ) {
-  return h("ds-empty", { ...props, icon, centered: centered || undefined, level, tone, ref },
+  return h("ds-empty", { ...props, icon, centered: centered ?? true, level, tone, ref },
     title(heading),
     children ?? text,
     actions == null || actions === false ? null : h("div", { slot: "actions", style: { display: "contents" } }, actions));

package/DS1/react/footer.ts

@@ -1,12 +1,12 @@
 import { createElement, forwardRef, type HTMLAttributes } from "react";
 import type { Footer as FooterElement } from "../4-page/ds-footer";
 
-export type { FooterColumn, FooterLink, FooterPreference } from "../4-page/ds-footer";
-export type FooterProps = Omit<HTMLAttributes<FooterElement>, "columns"> &
-  Partial<Pick<FooterElement, "brand" | "href" | "tagline" | "columns" | "label" | "owner" | "year" | "preferences" | "literal">>;
+export type { FooterColumn, FooterIcons, FooterLink, FooterPreference } from "../4-page/ds-footer";
+export type FooterProps = Omit<HTMLAttributes<FooterElement>, "columns" | "policies"> &
+  Partial<Pick<FooterElement, "brand" | "href" | "tagline" | "columns" | "label" | "owner" | "year" | "policies" | "preferences" | "literal">>;
 /**
- * A site footer from data: `columns` is set as a property, so React passes
- * the array as it stands. A brand, preferences or legal line of the page's own
+ * A site footer from data: `columns` and `policies` are set as properties, so
+ * React passes the arrays as they stand. A brand, preferences or legal line of the page's own
  * take `slot="brand"`, `slot="preferences"` and `slot="legal"`. A page that
  * must render its links on the server writes the `.ds-footer` classes instead.
  * Browser-only registration stays in the product's runtime entry for SSR.

package/DS1/react/header.ts

@@ -2,7 +2,7 @@ import { createElement, forwardRef, type HTMLAttributes } from "react";
 import type { Header as HeaderElement } from "../4-page/ds-header";
 
 export type HeaderProps = HTMLAttributes<HeaderElement> &
-  Partial<Pick<HeaderElement, "brand" | "href" | "label" | "literal" | "sticky">>;
+  Partial<Pick<HeaderElement, "variant" | "brand" | "href" | "label" | "literal" | "sticky">>;
 /**
  * A site header. Its navigation is the children: `<a href>` links, in the
  * light DOM so they render on the server; actions take `slot="actions"`, a

package/DS1/react/message.ts

@@ -7,6 +7,8 @@ import type { Message as MessageElement, MessageTone } from "../2-core/ds-messag
 export type { MessageTone } from "../2-core/ds-message";
 export type MessageProps = Omit<HTMLAttributes<MessageElement>, "title"> & {
   /** The mark's colour and icon; danger also colours the words. Neutral by default. */
+  /** Stable diagnostic for a real operation failure, independent of colour. */
+  failure?: import("../0-face/failures").Failure;
   expand?: boolean;
   visibleToasts?: number;
   richColors?: boolean;
@@ -52,7 +54,7 @@ const title = (content: ReactNode) =>
   content == null || content === false || content === "" ? null : h("span", { slot: "heading" }, content);
 
 export const Message = forwardRef<MessageElement, MessageProps>(function Message(
-  { expand, visibleToasts, richColors, contained, label, closeLabel, form, position, duration, closeButton, tone, heading, text, icon, actions, dismissible, banner, onDismiss, src, appId, appUrl, open, remember, preview, children, ...props }, ref,
+  { failure, expand, visibleToasts, richColors, contained, label, closeLabel, form, position, duration, closeButton, tone, heading, text, icon, actions, dismissible, banner, onDismiss, src, appId, appUrl, open, remember, preview, children, ...props }, ref,
 ) {
   const host = useRef<MessageElement | null>(null);
   useCommitEffect(() => {
@@ -68,7 +70,7 @@ export const Message = forwardRef<MessageElement, MessageProps>(function Message
   });
   // The live region is in the markup from the first render, on the server too.
   return h("ds-message", {
-    expand: expand || undefined, "visible-toasts": visibleToasts, "rich-colors": richColors || undefined, contained: contained || undefined, label, "close-label": closeLabel,
+    failure, expand: expand || undefined, "visible-toasts": visibleToasts, "rich-colors": richColors || undefined, contained: contained || undefined, label, "close-label": closeLabel,
     form, position, duration, "close-button": closeButton || undefined,
     src, "app-id": appId, "app-url": appUrl, open, remember, preview: preview || undefined,
     role: form === "toast" ? "presentation" : form === "app" ? "region" : tone === "danger" ? "alert" : "status",

package/DS1/react/number.ts

@@ -0,0 +1,53 @@
+/** React binding only. ds-number owns the field and all of its behaviour. */
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, type HTMLAttributes } from "react";
+import type { NumberField as NumberElement } from "../2-core/ds-number";
+export type { NumberElement };
+export type NumberFieldProps = Omit<HTMLAttributes<NumberElement>, "onChange" | "onInput" | "defaultValue"> & {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  bigStep?: number;
+  places?: number;
+  /** What a double-click on the lead puts back. */
+  defaultValue?: number;
+  label?: string;
+  icon?: string;
+  unit?: string;
+  /** Width in squares, four by default. */
+  width?: number;
+  /** `value` makes the whole field the handle, dragged up and down. */
+  drag?: "lead" | "value";
+  name?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** While a drag moves the value. */
+  onInput?: (value: number) => void;
+  /** When a value is taken: a drag's end, Enter, leaving the field, an arrow. */
+  onChange?: (value: number) => void;
+};
+
+export const NumberField = forwardRef<NumberElement, NumberFieldProps>(function NumberField(
+  { value, min, max, step, bigStep, places, defaultValue, label, icon, unit, width, drag, name, disabled, readOnly, onInput, onChange, ...rest },
+  ref,
+) {
+  const element = useRef<NumberElement>(null);
+  useImperativeHandle(ref, () => element.current!, []);
+  const handlers = useRef({ onInput, onChange });
+  handlers.current = { onInput, onChange };
+  useEffect(() => {
+    const node = element.current;
+    if (!node) return;
+    const input = () => handlers.current.onInput?.(node.value);
+    const change = () => handlers.current.onChange?.(node.value);
+    node.addEventListener("input", input);
+    node.addEventListener("change", change);
+    return () => { node.removeEventListener("input", input); node.removeEventListener("change", change); };
+  }, []);
+  useEffect(() => {
+    const node = element.current;
+    if (!node) return;
+    Object.assign(node, { value, min, max, step: step ?? 1, bigStep, places, defaultValue, label: label ?? "", icon: icon ?? "", unit: unit ?? "", width: width ?? 4, dragMode: drag ?? "lead", name: name ?? "", disabled: !!disabled, readonly: !!readOnly });
+  }, [value, min, max, step, bigStep, places, defaultValue, label, icon, unit, width, drag, name, disabled, readOnly]);
+  return createElement("ds-number", { ...rest, ref: element });
+});

package/DS1/react/sidebar.ts

@@ -16,6 +16,8 @@ export type SidebarProps = Omit<HTMLAttributes<SidebarElement>, "onSelect" | "on
   empty?: string;
   /** A tree of nested things instead of navigation. */
   tree?: boolean;
+  /** Navigation eight squares wide, each row hugging its words. */
+  narrow?: boolean;
   disclosurePosition?: "start" | "end"; expandIcon?: string;
   collapseIcon?: string;
   reorderable?: boolean;
@@ -33,7 +35,7 @@ export type SidebarProps = Omit<HTMLAttributes<SidebarElement>, "onSelect" | "on
 const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
 export const Sidebar = forwardRef<SidebarElement, SidebarProps>(function Sidebar(
-  { items, label, empty, tree, expandIcon, collapseIcon, disclosurePosition, reorderable, onMove, onToggle, onSelect, onActivate, onAction, ...props }, ref,
+  { items, label, empty, tree, narrow, expandIcon, collapseIcon, disclosurePosition, reorderable, onMove, onToggle, onSelect, onActivate, onAction, ...props }, ref,
 ) {
   const host = useRef<SidebarElement>(null);
   useCommitEffect(() => {
@@ -65,7 +67,7 @@ export const Sidebar = forwardRef<SidebarElement, SidebarProps>(function Sidebar
       element.removeEventListener("sidebar-action", action);
     };
   });
-  return h("ds-sidebar", { ...props, label, empty, tree: tree || undefined,
+  return h("ds-sidebar", { ...props, label, empty, tree: tree || undefined, narrow: narrow || undefined,
     ref: (element: SidebarElement | null) => { host.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; },
   });
 });

package/DS1/react/table-of-contents.ts

@@ -0,0 +1,28 @@
+/** Register the element in the browser before hydrating this property adapter. */
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef, type HTMLAttributes } from 'react';
+import type { TableOfContents as Element, TableOfContentsItem } from '../3-unit/ds-table-of-contents';
+export type { TableOfContentsItem };
+export type TableOfContentsProps = HTMLAttributes<Element> & {
+  items?: TableOfContentsItem[]; label?: string; literal?: boolean;
+  target?: HTMLElement; onSectionChange?: (href: string) => void;
+};
+const useCommitEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+export const TableOfContents = forwardRef<Element, TableOfContentsProps>(function TableOfContents(
+  {items, label, literal, target, onSectionChange, ...props}, ref,
+) {
+  const host = useRef<Element>(null);
+  useCommitEffect(() => {
+    const element = host.current; if (!element) return;
+    element.items = items ?? []; element.target = target;
+  }, [items, target]);
+  useCommitEffect(() => {
+    const element = host.current; if (!element) return;
+    const changed = (event: Event) => onSectionChange?.((event as CustomEvent<{href:string}>).detail.href);
+    element.addEventListener('toc-change', changed);
+    return () => element.removeEventListener('toc-change', changed);
+  }, [onSectionChange]);
+  return createElement('ds-table-of-contents', {...props, label, literal:literal ? '' : undefined, ref:(element: Element | null) => {
+    host.current=element;
+    if (typeof ref==='function') ref(element); else if(ref) ref.current=element;
+  }});
+});

package/DS1/x-flag/LICENSE.md

@@ -0,0 +1,26 @@
+# Flags
+
+Drawn by country-flag-icons 1.6.20 (https://gitlab.com/catamphetamine/country-flag-icons), 3:2, under the MIT licence below; Japan's is Ezo's own drawing. `scripts/import-flags.mjs` writes this folder.
+
+(The MIT License)
+
+Copyright (c) 2020 @catamphetamine <purecatamphetamine@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/DS1/x-flag/ac.svg

@@ -0,0 +1 @@
+<svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#012169" d="M0 0h513v342H0z"/><path fill="#FFF" d="M440.1 181.1c-.1 39.2-6.4 81.4-57.4 101.5-51.1-20.1-57.3-62.3-57.4-101.5h114.8z"/><path fill="#1B81B6" d="M439.6 197.7c-2.8 34.9-12.4 67.4-57 85-44.4-17.6-54.5-51.2-56.9-84.9"/><path fill="#FFF" d="M437.8 214.1c-3.2 24.3-16.7 53.5-55.1 68.6-38.4-15.1-50.5-42.5-55.1-68.4"/><path fill="#1B81B6" d="M434.2 230.3c-5.7 17.7-19.3 39.4-51.3 52.8-32-12.6-45.2-33.8-51.4-53"/><path fill="#FFF" d="M426.7 246.9c-6.5 11.3-17.7 25.4-44 35.9-27.5-11.5-37.4-25.3-44-36.1"/><path fill="#1B81B6" d="M412.4 265.1c-8.1 7.2-12 11.2-29.6 17.9-20.1-7.9-22.6-11.6-29.2-17.5"/><path fill="#288549" d="M383.3 231.6c-.2-.2-27.9 35.7-27.9 35.7-1.8-1.3-10-9.5-13.3-15l41.3-50.1 40.2 49.7c-3.9 6.5-11.4 13.6-13.2 15M382.6 85.3l-26.5 45h53z"/><g fill="#F0955D"><path d="M275.9 223.6c3.6-26.7 13.5-47.3 22.1-46.2s12.6 23.7 9 50.4-13.5 47.3-22.1 46.2c-8.6-1.2-12.6-23.7-9-50.4zM467.1 177.7c8.6-1.2 18.5 19.5 22.1 46.2s-.4 49.2-9 50.4-18.5-19.6-22.2-46.3c-3.6-26.6.5-49.2 9.1-50.3z"/></g><g fill="#EADFD5"><path d="M296.4 162c2.4-6 7.4-9.7 11-8.2 3.7 1.5 4.7 7.5 2.3 13.5s-7.4 9.7-11 8.2c-3.6-1.5-4.7-7.5-2.3-13.5zM288.4 271.2c.9-6.2 3.1-11.1 4.9-10.8s2.5 5.5 1.6 11.8c-.9 6.2-3.1 11.1-4.9 10.8s-2.5-5.5-1.6-11.8zM299 258.4c1.8-.1 3.6 4.7 3.9 10.8s-.9 11.1-2.7 11.2c-1.8.1-3.6-4.7-3.9-10.8-.3-6.1.9-11.1 2.7-11.2zM309.5 188.4c2.1-.8 6.1 4.2 8.8 11.2 2.8 7 3.3 13.4 1.2 14.2-2.1.8-6.1-4.2-8.8-11.2-2.8-7-3.3-13.4-1.2-14.2zM316 174.3c7-2.8 13.4-3.3 14.2-1.2.8 2.1-4.2 6.1-11.2 8.8-7 2.8-13.4 3.3-14.2 1.2-.9-2.1 4.2-6 11.2-8.8zM457.6 154.1c3.7-1.5 8.6 2.2 11 8.2 2.4 6 1.4 12.1-2.3 13.5-3.7 1.5-8.6-2.2-11-8.2-2.4-6-1.3-12.1 2.3-13.5zM471.8 260.6c1.8-.3 4 4.6 4.9 10.8.9 6.2.2 11.5-1.6 11.8-1.8.3-4-4.6-4.9-10.8-1-6.3-.2-11.5 1.6-11.8zM462.2 269.4c.3-6.1 2.1-10.9 3.9-10.8 1.8.1 3 5.1 2.7 11.2-.3 6.1-2.1 10.9-3.9 10.8-1.8-.1-3-5.1-2.7-11.2zM446.7 199.7c2.8-7 6.7-12.1 8.8-11.2 2.1.8 1.6 7.2-1.2 14.2-2.8 7-6.7 12.1-8.8 11.2s-1.6-7.2 1.2-14.2zM434.9 173.2c.8-2.1 7.2-1.6 14.2 1.2 7 2.8 12.1 6.7 11.2 8.8-.8 2.1-7.2 1.6-14.2-1.2-7-2.7-12.1-6.7-11.2-8.8z"/></g><path fill="#B0C6CC" d="M373.3 130.3 356.1 155l17.8 26.1H396l4.7-25.4-5.4-25.4z"/><path fill="#012169" d="M0 0h256.5v171H0z"/><g fill="#FFF"><path d="M256.5 0v30.6l-45.3 25.2h45.3v59.4h-59.2l59.2 32.9V171h-26.7l-73.7-40.9V171h-55.7v-48.7L12.8 171H0v-30.6l45.3-25.2H0V55.8h59.2L0 22.9V0h26.7l73.7 40.9V0h55.7v48.7L243.7 0z"/><path d="M156.1 115.2 256.5 171v-15.8l-72-40zM100.4 55.8 0 0v15.8l72 40z"/></g><g fill="#D80027"><path d="M144.3 0h-32.1v69.5H0v32h112.2V171h32.1v-69.5h112.2v-32H144.3z"/><path d="M156.1 115.2 256.5 171v-15.8l-72-40zM72 115.2l-72 40V171l100.4-55.8zM100.4 55.8 0 0v15.8l72 40zM184.5 55.8l72-40V0L156.1 55.8z"/></g></svg>

package/DS1/x-flag/ad.svg

@@ -0,0 +1 @@
+<svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#fedd00" d="M0 0h513v342H0z"/><path fill="#10069f" d="M0 0h171v342H0z"/><path fill="#d50032" d="M342 0h171v342H342z"/><path fill="#D80027" d="M198.9 113.6H256v64.8h-57.1z"/><g stroke="#D80027" stroke-width="7"><path d="M267.6 113.6v64.7M284.2 113.6v64.7M300.8 113.6v64.7"/></g><g stroke="#D80027" stroke-width="5"><path d="M247.4 178.4v64.7M234.1 178.4v64.7M220.8 178.5v53.9M207.1 178.5v47.1"/></g><path fill="#FFDA44" d="m199.9 146 27.6-32.4 28.5 32.3-28.1 32.4z"/><path fill="#BC8B00" d="M182.2 95.9v92.2c0 34.3 27.3 54.2 48.6 64.5-.8 1.4 25.1 8.3 25.1 8.3s25.9-6.9 25.1-8.3c21.4-10.3 48.6-30.1 48.6-64.5V95.9H182.2zm129.9 92.2c0 16.9-10 29.4-32.8 43.9-8.6 5.5-17.5 9-23.3 11-5.8-2-14.7-5.5-23.3-11-22.8-14.5-32.8-28-32.8-43.9v-74.5h112.2v74.5z"/><path fill="#D80027" d="M264.4 188.9h29.5v8.6h-29.5zM264.4 206.5h29.5v8.6h-29.5z"/></svg>