gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/DemoShell.vue

@@ -1,54 +1,54 @@
-<script setup>
-/**
- * 演示外壳：分组页签 + 一句说明 + 当前演示（动态组件）。
- *
- * 每个演示都是一个独立组件（BasicDemo / LabelDemo / ... / GisViewDemo），
- * 切到哪个才 import 哪个 —— 综合示例那份最大，不点进去就不会下载。
- * 组件卸载即销毁各自的视图（各演示自己 onBeforeUnmount destroy()），来回切不会漏画布。
- *
- * 外壳只管「怎么找演示」：页签按 DEMO_GROUPS 分组、每句说明旁边给一条对应文档的直达链接、
- * 地址栏可点播（`?demo=labels`）、记不住地址就接着上次看的（localStorage），
- * 键盘 `[` / `]` 前后翻页签（焦点在输入框里时不抢键）。
- */
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
-import { DEFAULT_DEMO_ID, DEMO_GROUPS, DEMOS } from './demos.js'
-
-const publicBase = String(import.meta.env?.BASE_URL ?? '/').replace(/\/?$/, '/')
-/** 外壳顶部的五个常驻入口：看文档、查 API、跑步进代码、看拆解、跑自测，都不用先离开当前演示 */
-const quickLinks = [
-	{ label: '文档中心', href: `${publicBase}docs/index.html`, title: '按章节阅读全部文档' },
-	{ label: 'API 速查', href: `${publicBase}docs/api/index.html`, title: '搜索实例方法、属性与 options' },
-	{ label: '调试页', href: `${publicBase}docs/playground/index.html`, title: '在可运行实例上改代码' },
-	{ label: '分步演示', href: `${publicBase}docs/steps/index.html`, title: '从空画布到完整组件的十三步' },
-	{ label: '自测', href: `${publicBase}docs/steps/selftest-demos.html`, title: '打开演示页的 PASS / FAIL 清单' }
-]
-
-/** 地址栏可以点播：`?demo=labels` 直接进标签演示（文档里给链接、自测页切页签都靠它） */
-const requestedId = typeof window === 'undefined' ? '' : new URLSearchParams(window.location.search).get('demo')
-/** 上次看过的演示：地址栏没点播时接着它；读不出来（隐私模式 / 禁掉存储）就当没记过 */
-const DEMO_STORAGE_KEY = 'gis-view:last-demo'
-const storedId = (() => {
-	try {
-		return window.localStorage.getItem(DEMO_STORAGE_KEY) ?? ''
-	}
-	catch {
-		return ''
-	}
-})()
-const currentId = ref(
-	DEMOS.some(item => item.id === requestedId) ? requestedId
-		: DEMOS.some(item => item.id === storedId) ? storedId
-			: DEFAULT_DEMO_ID
-)
-const current = computed(() => DEMOS.find(item => item.id === currentId.value) ?? DEMOS[0])
-const currentIndex = computed(() => Math.max(0, DEMOS.findIndex(item => item.id === current.value.id)))
-const currentGroup = computed(() => DEMO_GROUPS.find(group => group.id === current.value.group) ?? DEMO_GROUPS[0])
-/** 上一个 / 下一步：按钮与键盘共用，到了头尾就绕回另一端 */
-const stepDemo = (step) => {
-	const next = DEMOS[(currentIndex.value + step + DEMOS.length) % DEMOS.length]
-	currentId.value = next.id
-}
-/** 按 DEMO_GROUPS 的次序把演示分组：外壳一个循环画出「组名 + 组里的页签」 */
+<script setup>
+/**
+ * 演示外壳：分组页签 + 一句说明 + 当前演示（动态组件）。
+ *
+ * 每个演示都是一个独立组件（BasicDemo / LabelDemo / ... / GisViewDemo），
+ * 切到哪个才 import 哪个 —— 综合示例那份最大，不点进去就不会下载。
+ * 组件卸载即销毁各自的视图（各演示自己 onBeforeUnmount destroy()），来回切不会漏画布。
+ *
+ * 外壳只管「怎么找演示」：页签按 DEMO_GROUPS 分组、每句说明旁边给一条对应文档的直达链接、
+ * 地址栏可点播（`?demo=labels`）、记不住地址就接着上次看的（localStorage），
+ * 键盘 `[` / `]` 前后翻页签（焦点在输入框里时不抢键）。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { DEFAULT_DEMO_ID, DEMO_GROUPS, DEMOS } from './demos.js'
+
+const publicBase = String(import.meta.env?.BASE_URL ?? '/').replace(/\/?$/, '/')
+/** 外壳顶部的五个常驻入口：看文档、查 API、跑步进代码、看拆解、跑自测，都不用先离开当前演示 */
+const quickLinks = [
+	{ label: '文档中心', href: `${publicBase}docs/index.html`, title: '按章节阅读全部文档' },
+	{ label: 'API 速查', href: `${publicBase}docs/api/index.html`, title: '搜索实例方法、属性与 options' },
+	{ label: '调试页', href: `${publicBase}docs/playground/index.html`, title: '在可运行实例上改代码' },
+	{ label: '分步演示', href: `${publicBase}docs/steps/index.html`, title: '从空画布到完整组件的十三步' },
+	{ label: '自测', href: `${publicBase}docs/steps/selftest-demos.html`, title: '打开演示页的 PASS / FAIL 清单' }
+]
+
+/** 地址栏可以点播：`?demo=labels` 直接进标签演示（文档里给链接、自测页切页签都靠它） */
+const requestedId = typeof window === 'undefined' ? '' : new URLSearchParams(window.location.search).get('demo')
+/** 上次看过的演示：地址栏没点播时接着它；读不出来（隐私模式 / 禁掉存储）就当没记过 */
+const DEMO_STORAGE_KEY = 'gis-view:last-demo'
+const storedId = (() => {
+	try {
+		return window.localStorage.getItem(DEMO_STORAGE_KEY) ?? ''
+	}
+	catch {
+		return ''
+	}
+})()
+const currentId = ref(
+	DEMOS.some(item => item.id === requestedId) ? requestedId
+		: DEMOS.some(item => item.id === storedId) ? storedId
+			: DEFAULT_DEMO_ID
+)
+const current = computed(() => DEMOS.find(item => item.id === currentId.value) ?? DEMOS[0])
+const currentIndex = computed(() => Math.max(0, DEMOS.findIndex(item => item.id === current.value.id)))
+const currentGroup = computed(() => DEMO_GROUPS.find(group => group.id === current.value.group) ?? DEMO_GROUPS[0])
+/** 上一个 / 下一步：按钮与键盘共用，到了头尾就绕回另一端 */
+const stepDemo = (step) => {
+	const next = DEMOS[(currentIndex.value + step + DEMOS.length) % DEMOS.length]
+	currentId.value = next.id
+}
+/** 按 DEMO_GROUPS 的次序把演示分组：外壳一个循环画出「组名 + 组里的页签」 */
 const groupedDemos = computed(() => DEMO_GROUPS
 	.map(group => ({ ...group, items: DEMOS.filter(item => item.group === group.id) }))
 	.filter(group => group.items.length > 0))
@@ -143,48 +143,48 @@ const retryCurrent = () => {
 	moduleCache.delete(currentId.value)
 	loadCurrent()
 }
-
-/** 组件自己报一句读数（比如「已加载 N 个节点」）：外壳只负责显示，不掺和演示内部 */
-const notice = ref('')
-const notify = (text) => {
-	notice.value = text ?? ''
-}
-// 切演示时把上一份的读数清掉，免得看着像新演示报的
-watch(currentId, () => { notice.value = '' })
-
-// 切页签时把当前演示写进地址栏：刷新 / 分享链接还停在同一个演示上
-watch(currentId, (id) => {
-	if (typeof window === 'undefined') {
-		return
-	}
-	const url = new URL(window.location.href)
-	url.searchParams.set('demo', id)
-	window.history.replaceState(null, '', url)
-	try {
-		window.localStorage.setItem(DEMO_STORAGE_KEY, id)
-	}
-	catch {
-		// 存不了就算了：只是少一次「接着上次看」的回忆
-	}
-}, { immediate: true })
-/**
- * 键盘翻页签：`[` / `]` 前后一个（到头绕回）。焦点在输入框 / 可编辑元素里时不抢键 ——
- * 演示面板里到处是输入框，抢键会让「打一个方括号」变成切演示。
- */
-const handleDemoKeys = (event) => {
-	if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
-		return
-	}
-	if (event.key !== '[' && event.key !== ']') {
-		return
-	}
-	const target = event.target
-	if (target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select'))) {
-		return
-	}
-	const step = event.key === ']' ? 1 : -1
-	stepDemo(step)
-}
+
+/** 组件自己报一句读数（比如「已加载 N 个节点」）：外壳只负责显示，不掺和演示内部 */
+const notice = ref('')
+const notify = (text) => {
+	notice.value = text ?? ''
+}
+// 切演示时把上一份的读数清掉，免得看着像新演示报的
+watch(currentId, () => { notice.value = '' })
+
+// 切页签时把当前演示写进地址栏：刷新 / 分享链接还停在同一个演示上
+watch(currentId, (id) => {
+	if (typeof window === 'undefined') {
+		return
+	}
+	const url = new URL(window.location.href)
+	url.searchParams.set('demo', id)
+	window.history.replaceState(null, '', url)
+	try {
+		window.localStorage.setItem(DEMO_STORAGE_KEY, id)
+	}
+	catch {
+		// 存不了就算了：只是少一次「接着上次看」的回忆
+	}
+}, { immediate: true })
+/**
+ * 键盘翻页签：`[` / `]` 前后一个（到头绕回）。焦点在输入框 / 可编辑元素里时不抢键 ——
+ * 演示面板里到处是输入框，抢键会让「打一个方括号」变成切演示。
+ */
+const handleDemoKeys = (event) => {
+	if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+		return
+	}
+	if (event.key !== '[' && event.key !== ']') {
+		return
+	}
+	const target = event.target
+	if (target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select'))) {
+		return
+	}
+	const step = event.key === ']' ? 1 : -1
+	stepDemo(step)
+}
 onMounted(() => window.addEventListener('keydown', handleDemoKeys))
 onBeforeUnmount(() => {
 	requestSeq += 1
@@ -220,44 +220,44 @@ onBeforeUnmount(() => {
 					:class="{ 'demo-shell__group--active': group.id === currentGroup.id }"
 				>
 					<button
-						v-for="item in group.items"
-						:key="item.id"
-						type="button"
-						class="demo-shell__tab"
-						:class="{ 'demo-shell__tab--active': item.id === currentId }"
-						:aria-current="item.id === currentId ? 'page' : undefined"
-						:title="item.blurb"
-						@click="currentId = item.id"
-					>
+						v-for="item in group.items"
+						:key="item.id"
+						type="button"
+						class="demo-shell__tab"
+						:class="{ 'demo-shell__tab--active': item.id === currentId }"
+						:aria-current="item.id === currentId ? 'page' : undefined"
+						:title="item.blurb"
+						@click="currentId = item.id"
+					>
 						{{ item.title }}
 					</button>
 				</div>
-			</nav>
-			<div class="demo-shell__quick" aria-label="快捷入口">
-				<span class="demo-shell__quick-label">快速入口</span>
-				<a
-					v-for="link in quickLinks"
-					:key="link.href"
-					class="demo-shell__quick-link"
-					:href="link.href"
-					:title="link.title"
-					target="_blank"
-					rel="noreferrer"
-				>{{ link.label }}</a>
-			</div>
-		</div>
-		<p class="demo-shell__blurb">
-			<span class='demo-shell__eyebrow'>{{ currentGroup.label }} · {{ currentIndex + 1 }} / {{ DEMOS.length }}</span>
-			<strong>{{ current.title }}</strong>
-			<span>{{ current.blurb }}</span>
-			<span class='demo-shell__step'>
-				<button type='button' class='demo-shell__step-btn' data-demo='demo-prev' title='上一个演示（[）' @click='stepDemo(-1)'>← 上一项</button>
-				<button type='button' class='demo-shell__step-btn' data-demo='demo-next' title='下一个演示（]）' @click='stepDemo(1)'>下一项 →</button>
-			</span>
-			<span v-if="notice" class="demo-shell__notice">{{ notice }}</span>
-			<a class="demo-shell__doc" :href="current.doc.href" target="_blank" rel="noreferrer">对应文档 · {{ current.doc.label }}</a>
-			<span class="demo-shell__keys">[ / ] 切换</span>
-		</p>
+			</nav>
+			<div class="demo-shell__quick" aria-label="快捷入口">
+				<span class="demo-shell__quick-label">快速入口</span>
+				<a
+					v-for="link in quickLinks"
+					:key="link.href"
+					class="demo-shell__quick-link"
+					:href="link.href"
+					:title="link.title"
+					target="_blank"
+					rel="noreferrer"
+				>{{ link.label }}</a>
+			</div>
+		</div>
+		<p class="demo-shell__blurb">
+			<span class='demo-shell__eyebrow'>{{ currentGroup.label }} · {{ currentIndex + 1 }} / {{ DEMOS.length }}</span>
+			<strong>{{ current.title }}</strong>
+			<span>{{ current.blurb }}</span>
+			<span class='demo-shell__step'>
+				<button type='button' class='demo-shell__step-btn' data-demo='demo-prev' title='上一个演示（[）' @click='stepDemo(-1)'>← 上一项</button>
+				<button type='button' class='demo-shell__step-btn' data-demo='demo-next' title='下一个演示（]）' @click='stepDemo(1)'>下一项 →</button>
+			</span>
+			<span v-if="notice" class="demo-shell__notice">{{ notice }}</span>
+			<a class="demo-shell__doc" :href="current.doc.href" target="_blank" rel="noreferrer">对应文档 · {{ current.doc.label }}</a>
+			<span class="demo-shell__keys">[ / ] 切换</span>
+		</p>
 		<component :is="loaded" v-if="loaded" :key="current.id" @notice="notify" />
 		<p v-else-if="loading" class="demo-shell__loading" aria-live="polite">
 			<span class="demo-shell__spinner" aria-hidden="true"></span>
@@ -271,31 +271,31 @@ onBeforeUnmount(() => {
 		</div>
 	</section>
 </template>
-
-<style scoped>
-.demo-shell {
-	min-width: 0;
-	max-width: 100%;
-}
-
-.demo-shell__sticky {
-	position: sticky;
-	top: 0;
-	z-index: 20;
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
-	max-width: 100%;
-	margin: -4px -10px 9px;
-	padding: 8px 10px 9px;
-	border: 1px solid rgba(214, 224, 236, 0.9);
-	border-radius: 10px;
-	background: rgba(244, 247, 251, 0.94);
-	box-shadow: 0 6px 22px rgba(31, 62, 105, 0.1);
-	backdrop-filter: blur(10px);
-}
-
+
+<style scoped>
+.demo-shell {
+	min-width: 0;
+	max-width: 100%;
+}
+
+.demo-shell__sticky {
+	position: sticky;
+	top: 0;
+	z-index: 20;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+	max-width: 100%;
+	margin: -4px -10px 9px;
+	padding: 8px 10px 9px;
+	border: 1px solid rgba(214, 224, 236, 0.9);
+	border-radius: 10px;
+	background: rgba(244, 247, 251, 0.94);
+	box-shadow: 0 6px 22px rgba(31, 62, 105, 0.1);
+	backdrop-filter: blur(10px);
+}
+
 .demo-shell__tabs {
 	display: flex;
 	align-items: center;
@@ -383,37 +383,37 @@ onBeforeUnmount(() => {
 .demo-shell__group--active {
 	display: flex;
 }
-
-.demo-shell__group:nth-child(1) {
-	--demo-group: #3678bf;
-	--demo-group-soft: #eaf2fc;
-}
-
-.demo-shell__group:nth-child(2) {
-	--demo-group: #2f8668;
-	--demo-group-soft: #e7f5ef;
-}
-
-.demo-shell__group:nth-child(3) {
-	--demo-group: #7959bd;
-	--demo-group-soft: #f0ebfb;
-}
-
-.demo-shell__group:nth-child(4) {
-	--demo-group: #a86418;
-	--demo-group-soft: #fbf1e4;
-}
-
-.demo-shell__group:nth-child(5) {
-	--demo-group: #b24b5d;
-	--demo-group-soft: #fbecef;
-}
-
-.demo-shell__group:nth-child(6) {
-	--demo-group: #4c5f91;
-	--demo-group-soft: #ebeff7;
-}
-
+
+.demo-shell__group:nth-child(1) {
+	--demo-group: #3678bf;
+	--demo-group-soft: #eaf2fc;
+}
+
+.demo-shell__group:nth-child(2) {
+	--demo-group: #2f8668;
+	--demo-group-soft: #e7f5ef;
+}
+
+.demo-shell__group:nth-child(3) {
+	--demo-group: #7959bd;
+	--demo-group-soft: #f0ebfb;
+}
+
+.demo-shell__group:nth-child(4) {
+	--demo-group: #a86418;
+	--demo-group-soft: #fbf1e4;
+}
+
+.demo-shell__group:nth-child(5) {
+	--demo-group: #b24b5d;
+	--demo-group-soft: #fbecef;
+}
+
+.demo-shell__group:nth-child(6) {
+	--demo-group: #4c5f91;
+	--demo-group-soft: #ebeff7;
+}
+
 .demo-shell__group-count {
 	min-width: 16px;
 	padding: 0 4px;
@@ -430,134 +430,134 @@ onBeforeUnmount(() => {
 	background: rgba(255, 255, 255, 0.2);
 	color: #fff;
 }
-
-.demo-shell__tab {
-	padding: 7px 13px;
-	border: 1px solid #d6e0ec;
-	border-radius: 999px;
-	background: #fff;
-	color: var(--demo-group);
-	font-size: 13px;
-	cursor: pointer;
-}
-
-.demo-shell__tab:hover {
-	background: var(--demo-group-soft);
-}
-
-.demo-shell__tab--active {
-	border-color: var(--demo-group);
-	background: var(--demo-group);
-	color: #fff;
-	font-weight: 600;
-}
-
-.demo-shell__quick {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 5px;
-	padding-top: 6px;
-	border-top: 1px dashed #dce6f1;
-}
-
-.demo-shell__quick-label {
-	margin-right: 2px;
-	color: #93a2b9;
-	font-size: 11px;
-	white-space: nowrap;
-}
-
-.demo-shell__quick-link {
-	padding: 2px 8px;
-	border-radius: 999px;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-size: 11px;
-	text-decoration: none;
-	transition: background 0.12s ease, color 0.12s ease;
-}
-
-.demo-shell__quick-link:hover {
-	background: #3678bf;
-	color: #fff;
-}
-
-.demo-shell__blurb {
-	display: flex;
-	align-items: baseline;
-	flex-wrap: wrap;
-	gap: 8px;
-	margin: 0 0 12px;
-	color: #71809d;
-	font-size: 13px;
-	line-height: 1.6;
-}
-
-.demo-shell__blurb strong {
-	color: #17233d;
-	font-size: 14px;
-}
-
-.demo-shell__eyebrow {
-	padding: 1px 8px;
-	border-radius: 999px;
-	background: #eaf2fc;
-	color: #5a7296;
-	font-size: 11px;
-	line-height: 1.8;
-	font-variant-numeric: tabular-nums;
-	white-space: nowrap;
-}
-
-.demo-shell__step {
-	display: inline-flex;
-	gap: 4px;
-}
-
-.demo-shell__step-btn {
-	padding: 2px 8px;
-	border: 1px solid #d6e0ec;
-	border-radius: 999px;
-	background: #fff;
-	color: #2f5e94;
-	font-size: 11px;
-	line-height: 1.7;
-	cursor: pointer;
-}
-
-.demo-shell__step-btn:hover {
-	background: #eef4fc;
-}
-
-.demo-shell__notice {
-	padding: 2px 8px;
-	border-radius: 999px;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-size: 11px;
-}
-
-.demo-shell__doc {
-	color: #3678bf;
-	font-size: 12px;
-	text-decoration: none;
-}
-
-.demo-shell__doc:hover {
-	text-decoration: underline;
-}
-
-.demo-shell__keys {
-	margin-left: auto;
-	padding: 1px 8px;
-	border: 1px solid #e2e8f1;
-	border-radius: 999px;
-	color: #9aa7bc;
-	font-size: 11px;
-	white-space: nowrap;
-}
-
+
+.demo-shell__tab {
+	padding: 7px 13px;
+	border: 1px solid #d6e0ec;
+	border-radius: 999px;
+	background: #fff;
+	color: var(--demo-group);
+	font-size: 13px;
+	cursor: pointer;
+}
+
+.demo-shell__tab:hover {
+	background: var(--demo-group-soft);
+}
+
+.demo-shell__tab--active {
+	border-color: var(--demo-group);
+	background: var(--demo-group);
+	color: #fff;
+	font-weight: 600;
+}
+
+.demo-shell__quick {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 5px;
+	padding-top: 6px;
+	border-top: 1px dashed #dce6f1;
+}
+
+.demo-shell__quick-label {
+	margin-right: 2px;
+	color: #93a2b9;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.demo-shell__quick-link {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-size: 11px;
+	text-decoration: none;
+	transition: background 0.12s ease, color 0.12s ease;
+}
+
+.demo-shell__quick-link:hover {
+	background: #3678bf;
+	color: #fff;
+}
+
+.demo-shell__blurb {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin: 0 0 12px;
+	color: #71809d;
+	font-size: 13px;
+	line-height: 1.6;
+}
+
+.demo-shell__blurb strong {
+	color: #17233d;
+	font-size: 14px;
+}
+
+.demo-shell__eyebrow {
+	padding: 1px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #5a7296;
+	font-size: 11px;
+	line-height: 1.8;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+
+.demo-shell__step {
+	display: inline-flex;
+	gap: 4px;
+}
+
+.demo-shell__step-btn {
+	padding: 2px 8px;
+	border: 1px solid #d6e0ec;
+	border-radius: 999px;
+	background: #fff;
+	color: #2f5e94;
+	font-size: 11px;
+	line-height: 1.7;
+	cursor: pointer;
+}
+
+.demo-shell__step-btn:hover {
+	background: #eef4fc;
+}
+
+.demo-shell__notice {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-size: 11px;
+}
+
+.demo-shell__doc {
+	color: #3678bf;
+	font-size: 12px;
+	text-decoration: none;
+}
+
+.demo-shell__doc:hover {
+	text-decoration: underline;
+}
+
+.demo-shell__keys {
+	margin-left: auto;
+	padding: 1px 8px;
+	border: 1px solid #e2e8f1;
+	border-radius: 999px;
+	color: #9aa7bc;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
 .demo-shell__loading {
 	display: flex;
 	align-items: center;
@@ -566,10 +566,10 @@ onBeforeUnmount(() => {
 	margin: 0;
 	padding: 28px;
 	border: 1px dashed #d6e0ec;
-	border-radius: 10px;
-	background: #fff;
-	color: #8191a8;
-	font-size: 13px;
+	border-radius: 10px;
+	background: #fff;
+	color: #8191a8;
+	font-size: 13px;
 	text-align: center;
 }
 
@@ -632,11 +632,11 @@ onBeforeUnmount(() => {
 }
 
 @media (max-width: 760px) {
-	.demo-shell__sticky {
-		position: static;
-		margin: -4px 0 9px;
-	}
-
+	.demo-shell__sticky {
+		position: static;
+		margin: -4px 0 9px;
+	}
+
 	.demo-shell__groups {
 		flex-wrap: nowrap;
 		width: 100%;
@@ -649,18 +649,18 @@ onBeforeUnmount(() => {
 	}
 
 	.demo-shell__tabs {
-		flex-wrap: nowrap;
-		width: 100%;
-		overflow-x: auto;
-		padding-bottom: 3px;
-	}
-
-	.demo-shell__group {
-		flex: none;
-	}
-
-	.demo-shell__keys {
-		margin-left: 0;
-	}
-}
-</style>
+		flex-wrap: nowrap;
+		width: 100%;
+		overflow-x: auto;
+		padding-bottom: 3px;
+	}
+
+	.demo-shell__group {
+		flex: none;
+	}
+
+	.demo-shell__keys {
+		margin-left: 0;
+	}
+}
+</style>