From 998297f5047f6f7b6142aa567e7c18f817b3c5c6 Mon Sep 17 00:00:00 2001
From: HouseOfHawks <joshua.kemp@parchment.com>
Date: Tue, 9 Jun 2026 13:50:33 -0400
Subject: [PATCH] feat(many): poc for parchment consumers

poc which shows extractions of component anatomy and reimplementations
---
 packages/__docs__/buildScripts/build-docs.mts |    3 +
 .../buildScripts/build-storybooks.mts         |   92 ++
 packages/__docs__/package.json                |    3 +-
 packages/__docs__/src/App/index.tsx           |   34 +
 packages/__docs__/src/Nav/index.tsx           |   18 +-
 packages/ui-alerts/src/Alert/v2/behavior.ts   |  204 +++
 packages/ui-alerts/src/Alert/v2/index.tsx     |  129 +-
 packages/ui-alerts/src/Alert/v2/props.ts      |  115 +-
 packages/ui-alerts/src/Alert/v2/styles.ts     |   15 +-
 packages/ui-alerts/src/Alert/v2/types.ts      |   97 ++
 .../src/Drilldown/__tests__/behavior.test.tsx |  303 ++++
 .../ui-drilldown/src/Drilldown/v2/behavior.ts |  359 +++++
 .../ui-drilldown/src/Drilldown/v2/index.tsx   |  308 ++--
 .../ui-drilldown/src/Drilldown/v2/styles.ts   |   25 +-
 .../ui-drilldown/src/Drilldown/v2/types.ts    |  117 ++
 .../src/Menu/__tests__/behavior.test.tsx      |  143 ++
 .../ui-menu/src/Menu/v2/MenuItem/index.tsx    |    6 +-
 .../ui-menu/src/Menu/v2/MenuItem/styles.ts    |    5 +-
 .../src/Menu/v2/MenuItemGroup/index.tsx       |   38 +-
 packages/ui-menu/src/Menu/v2/behavior.ts      |  130 ++
 packages/ui-menu/src/Menu/v2/index.tsx        |   10 +-
 packages/ui-menu/src/Menu/v2/styles.ts        |    5 +-
 packages/ui-menu/src/Menu/v2/types.ts         |  123 ++
 .../src/Popover/__tests__/behavior.test.tsx   |  208 +++
 .../ui-popover/src/Popover/v2/behavior.ts     |  131 ++
 packages/ui-popover/src/Popover/v2/index.tsx  |  105 +-
 packages/ui-popover/src/Popover/v2/styles.ts  |   16 +-
 packages/ui-popover/src/Popover/v2/types.ts   |  110 ++
 packages/ui-web-core/.gitignore               |    5 +
 packages/ui-web-core/.storybook/main.ts       |   57 +
 packages/ui-web-core/.storybook/preview.ts    |   50 +
 packages/ui-web-core/README.md                |   50 +
 packages/ui-web-core/aliases.mjs              |   50 +
 packages/ui-web-core/babel.config.cjs         |   36 +
 packages/ui-web-core/package.json             |   92 ++
 .../ui-web-core/src/Alert/Alert.stories.ts    |  180 +++
 packages/ui-web-core/src/Alert/Alert.ts       |  311 ++++
 packages/ui-web-core/src/Alert/README.md      |   76 +
 packages/ui-web-core/src/Alert/icons.ts       |   90 ++
 packages/ui-web-core/src/Alert/index.ts       |   25 +
 .../src/Drilldown/Drilldown.stories.ts        |  244 ++++
 .../ui-web-core/src/Drilldown/Drilldown.ts    |  602 ++++++++
 packages/ui-web-core/src/Drilldown/README.md  |   83 ++
 packages/ui-web-core/src/Drilldown/icons.ts   |   67 +
 packages/ui-web-core/src/Drilldown/index.ts   |   32 +
 packages/ui-web-core/src/Menu/Menu.stories.ts |  180 +++
 packages/ui-web-core/src/Menu/Menu.ts         |  725 +++++++++
 packages/ui-web-core/src/Menu/README.md       |   70 +
 packages/ui-web-core/src/Menu/icons.ts        |   53 +
 packages/ui-web-core/src/Menu/index.ts        |   32 +
 .../src/Popover/Popover.stories.ts            |  119 ++
 packages/ui-web-core/src/Popover/Popover.ts   |  479 ++++++
 packages/ui-web-core/src/Popover/README.md    |   61 +
 packages/ui-web-core/src/Popover/index.ts     |   26 +
 .../ui-web-core/src/ThemeProvider/README.md   |   79 +
 .../ThemeProvider/ThemeProvider.stories.ts    |  171 +++
 .../src/ThemeProvider/ThemeProvider.ts        |  244 ++++
 .../ui-web-core/src/ThemeProvider/index.ts    |   25 +
 packages/ui-web-core/src/Welcome.stories.ts   |   73 +
 packages/ui-web-core/src/angular/index.ts     |   28 +
 packages/ui-web-core/src/index.ts             |   45 +
 packages/ui-web-core/src/react/index.ts       |   95 ++
 packages/ui-web-core/src/ssr/index.ts         |   97 ++
 packages/ui-web-core/src/theme/index.ts       |   38 +
 .../ui-web-core/src/theme/styleObjectToCss.ts |  137 ++
 packages/ui-web-core/src/theme/themes.ts      |  135 ++
 .../ui-web-core/src/theme/toCssVariables.ts   |   86 ++
 packages/ui-web-core/tsconfig.build.json      |   14 +
 packages/ui-web-core/tsconfig.json            |   17 +
 packages/ui-web-core/vite.config.ts           |   92 ++
 pnpm-lock.yaml                                | 1292 ++++++++++++++++-
 71 files changed, 8762 insertions(+), 553 deletions(-)
 create mode 100644 packages/__docs__/buildScripts/build-storybooks.mts
 create mode 100644 packages/ui-alerts/src/Alert/v2/behavior.ts
 create mode 100644 packages/ui-alerts/src/Alert/v2/types.ts
 create mode 100644 packages/ui-drilldown/src/Drilldown/__tests__/behavior.test.tsx
 create mode 100644 packages/ui-drilldown/src/Drilldown/v2/behavior.ts
 create mode 100644 packages/ui-drilldown/src/Drilldown/v2/types.ts
 create mode 100644 packages/ui-menu/src/Menu/__tests__/behavior.test.tsx
 create mode 100644 packages/ui-menu/src/Menu/v2/behavior.ts
 create mode 100644 packages/ui-menu/src/Menu/v2/types.ts
 create mode 100644 packages/ui-popover/src/Popover/__tests__/behavior.test.tsx
 create mode 100644 packages/ui-popover/src/Popover/v2/behavior.ts
 create mode 100644 packages/ui-popover/src/Popover/v2/types.ts
 create mode 100644 packages/ui-web-core/.gitignore
 create mode 100644 packages/ui-web-core/.storybook/main.ts
 create mode 100644 packages/ui-web-core/.storybook/preview.ts
 create mode 100644 packages/ui-web-core/README.md
 create mode 100644 packages/ui-web-core/aliases.mjs
 create mode 100644 packages/ui-web-core/babel.config.cjs
 create mode 100644 packages/ui-web-core/package.json
 create mode 100644 packages/ui-web-core/src/Alert/Alert.stories.ts
 create mode 100644 packages/ui-web-core/src/Alert/Alert.ts
 create mode 100644 packages/ui-web-core/src/Alert/README.md
 create mode 100644 packages/ui-web-core/src/Alert/icons.ts
 create mode 100644 packages/ui-web-core/src/Alert/index.ts
 create mode 100644 packages/ui-web-core/src/Drilldown/Drilldown.stories.ts
 create mode 100644 packages/ui-web-core/src/Drilldown/Drilldown.ts
 create mode 100644 packages/ui-web-core/src/Drilldown/README.md
 create mode 100644 packages/ui-web-core/src/Drilldown/icons.ts
 create mode 100644 packages/ui-web-core/src/Drilldown/index.ts
 create mode 100644 packages/ui-web-core/src/Menu/Menu.stories.ts
 create mode 100644 packages/ui-web-core/src/Menu/Menu.ts
 create mode 100644 packages/ui-web-core/src/Menu/README.md
 create mode 100644 packages/ui-web-core/src/Menu/icons.ts
 create mode 100644 packages/ui-web-core/src/Menu/index.ts
 create mode 100644 packages/ui-web-core/src/Popover/Popover.stories.ts
 create mode 100644 packages/ui-web-core/src/Popover/Popover.ts
 create mode 100644 packages/ui-web-core/src/Popover/README.md
 create mode 100644 packages/ui-web-core/src/Popover/index.ts
 create mode 100644 packages/ui-web-core/src/ThemeProvider/README.md
 create mode 100644 packages/ui-web-core/src/ThemeProvider/ThemeProvider.stories.ts
 create mode 100644 packages/ui-web-core/src/ThemeProvider/ThemeProvider.ts
 create mode 100644 packages/ui-web-core/src/ThemeProvider/index.ts
 create mode 100644 packages/ui-web-core/src/Welcome.stories.ts
 create mode 100644 packages/ui-web-core/src/angular/index.ts
 create mode 100644 packages/ui-web-core/src/index.ts
 create mode 100644 packages/ui-web-core/src/react/index.ts
 create mode 100644 packages/ui-web-core/src/ssr/index.ts
 create mode 100644 packages/ui-web-core/src/theme/index.ts
 create mode 100644 packages/ui-web-core/src/theme/styleObjectToCss.ts
 create mode 100644 packages/ui-web-core/src/theme/themes.ts
 create mode 100644 packages/ui-web-core/src/theme/toCssVariables.ts
 create mode 100644 packages/ui-web-core/tsconfig.build.json
 create mode 100644 packages/ui-web-core/tsconfig.json
 create mode 100644 packages/ui-web-core/vite.config.ts

diff --git a/packages/__docs__/buildScripts/build-docs.mts b/packages/__docs__/buildScripts/build-docs.mts
index 155f121db0..16236802cd 100644
--- a/packages/__docs__/buildScripts/build-docs.mts
+++ b/packages/__docs__/buildScripts/build-docs.mts
@@ -105,6 +105,9 @@ const pathsToIgnore = [
   '**/ui-theme-tokens/**',
   '**/ui-test-*/src/**',
   '**/ui-scripts/src/**',
+  // ui-web-core ships Lit Web Components with their own embedded Storybook at
+  // /parchment; the React docs builder's per-component shape doesn't apply.
+  '**/ui-web-core/**',
 
   // large generated files:
   '**/lucide/**', // Lucide icons directory (large generated file)
diff --git a/packages/__docs__/buildScripts/build-storybooks.mts b/packages/__docs__/buildScripts/build-storybooks.mts
new file mode 100644
index 0000000000..41a65a8756
--- /dev/null
+++ b/packages/__docs__/buildScripts/build-storybooks.mts
@@ -0,0 +1,92 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Builds the ui-web-core (Lit + Web Components) Storybook and copies its
+ * static output to packages/__docs__/__build__/storybook/parchment/, so the
+ * docs app can iframe it at the `/parchment` route.
+ *
+ * Dev workflow is unaffected: `pnpm --filter @instructure/ui-web-core
+ * storybook` runs at port 6006 for live development.
+ */
+
+import { spawnSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const projectRoot = path.resolve(__dirname, '../../../')
+const docsBuildDir = path.resolve(__dirname, '../__build__')
+const storybookOutDir = path.join(docsBuildDir, 'storybook')
+
+const packages = [
+  {
+    name: '@instructure/ui-web-core',
+    dir: 'ui-web-core',
+    mountAs: 'parchment'
+  }
+]
+
+function runBuildStorybook(packageName: string): void {
+  // eslint-disable-next-line no-console
+  console.log(`Building Storybook: ${packageName}`)
+  const result = spawnSync(
+    'pnpm',
+    ['--filter', packageName, 'build-storybook'],
+    { cwd: projectRoot, stdio: 'inherit' }
+  )
+  if (result.status !== 0) {
+    throw new Error(
+      `build-storybook failed for ${packageName} (exit ${result.status})`
+    )
+  }
+}
+
+function copyStorybookOutput(packageDir: string, mountAs: string): void {
+  const src = path.join(projectRoot, 'packages', packageDir, 'storybook-static')
+  const dest = path.join(storybookOutDir, mountAs)
+  if (!fs.existsSync(src)) {
+    throw new Error(`Expected Storybook output at ${src}`)
+  }
+  fs.rmSync(dest, { recursive: true, force: true })
+  fs.mkdirSync(dest, { recursive: true })
+  fs.cpSync(src, dest, { recursive: true })
+  // eslint-disable-next-line no-console
+  console.log(`Copied ${src} -> ${dest}`)
+}
+
+function main(): void {
+  fs.mkdirSync(storybookOutDir, { recursive: true })
+  for (const pkg of packages) {
+    runBuildStorybook(pkg.name)
+    copyStorybookOutput(pkg.dir, pkg.mountAs)
+  }
+  // eslint-disable-next-line no-console
+  console.log('Storybook(s) built and copied under', storybookOutDir)
+}
+
+main()
diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json
index b481a7ba27..2161c24eb3 100644
--- a/packages/__docs__/package.json
+++ b/packages/__docs__/package.json
@@ -16,7 +16,8 @@
     "start:watch": "pnpm run prestart && concurrently -n markdown,webpack -c cyan,yellow \"node buildScripts/watch-markdown.mjs\" \"ui-scripts bundle --watch\"",
     "start-watch-just-app": "ui-scripts bundle --watch",
     "watch:markdown": "node buildScripts/watch-markdown.mjs",
-    "bundle": "pnpm run prestart && ui-scripts bundle",
+    "build:storybooks": "pnpm run build:scripts:ts && node lib/build-storybooks.mjs",
+    "bundle": "pnpm run prestart && pnpm run build:storybooks && ui-scripts bundle",
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "build:scripts:ts": "tsc -b tsconfig.node.build.json",
diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index da4a7589d4..4e0342bbf6 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -650,6 +650,29 @@ class App extends Component<AppProps, AppState> {
     return <Section id={key}>{this.renderWrappedContent(iconContent)}</Section>
   }
 
+  renderParchmentStorybook(key: string) {
+    // The ui-web-core Storybook (Lit + Web Components) is built by the docs
+    // app's `build:storybooks` script and copied to
+    // `__build__/storybook/parchment/` during `bundle`. If that step hasn't
+    // run locally (e.g. `pnpm run dev`), the iframe will 404 — expected for
+    // the unbundled dev path.
+    const src = `${getDeployBase()}/storybook/parchment/`
+    const content = (
+      <View as="div" height="100vh" width="100%">
+        <iframe
+          src={src}
+          title="Parchment InstUI Storybook"
+          style={{
+            border: 0,
+            width: '100%',
+            height: '100%'
+          }}
+        />
+      </View>
+    )
+    return <Section id={key}>{content}</Section>
+  }
+
   renderDocument(docId: keyof NewComponentTypes, repository: string) {
     const { parents } = this.state.docsData!
     const children: any[] = []
@@ -863,6 +886,17 @@ class App extends Component<AppProps, AppState> {
           {this.renderLegacyIcons(key)}
         </View>
       )
+    } else if (key === 'parchment') {
+      return (
+        <View
+          elementRef={this.mainContentRef}
+          tabIndex={0}
+          aria-label="parchment instui page main content"
+          as={'div'}
+        >
+          {this.renderParchmentStorybook(key)}
+        </View>
+      )
     } else if (theme) {
       return (
         <View
diff --git a/packages/__docs__/src/Nav/index.tsx b/packages/__docs__/src/Nav/index.tsx
index 6fd41f4744..6476d7921e 100644
--- a/packages/__docs__/src/Nav/index.tsx
+++ b/packages/__docs__/src/Nav/index.tsx
@@ -110,8 +110,8 @@ class Nav extends Component<NavProps, NavState> {
       count === -1
         ? 'Search cleared'
         : count === 0
-        ? 'No results'
-        : `${count} ${count === 1 ? 'result' : 'results'} available below`
+          ? 'No results'
+          : `${count} ${count === 1 ? 'result' : 'results'} available below`
     setTimeout(() => {
       this.setState({
         announcement: message
@@ -452,7 +452,8 @@ class Nav extends Component<NavProps, NavState> {
 
         const renderThemeName = (rawName: string) => {
           if (rawName === 'canvas') return 'legacy-canvas'
-          if (rawName === 'canvas-high-contrast') return 'legacy-canvas-high-contrast'
+          if (rawName === 'canvas-high-contrast')
+            return 'legacy-canvas-high-contrast'
           return rawName
         }
 
@@ -512,7 +513,16 @@ class Nav extends Component<NavProps, NavState> {
         shouldBlur={true}
       />
     )
-    const matches = [...sections, ...themes, legacyIcons]
+    const parchmentStorybook = (
+      <NavToggle
+        key="Parchment InstUI button"
+        summary="Parchment InstUI"
+        onToggle={(e: any) => this.handleInternalNavigation('parchment', e)}
+        href="parchment"
+        shouldBlur={true}
+      />
+    )
+    const matches = [...sections, ...themes, legacyIcons, parchmentStorybook]
     const hasMatches = matches.length > 0
     const errorMessage = [
       { text: `No matches for '${this.state.queryStr}'`, type: 'hint' as const }
diff --git a/packages/ui-alerts/src/Alert/v2/behavior.ts b/packages/ui-alerts/src/Alert/v2/behavior.ts
new file mode 100644
index 0000000000..1f43345931
--- /dev/null
+++ b/packages/ui-alerts/src/Alert/v2/behavior.ts
@@ -0,0 +1,204 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral behavior for the v2 Alert. No React, no JSX. The React
+ * adapter wires these into class lifecycle methods; the future Lit adapter in
+ * @instructure/ui-web-core wires them into custom-element lifecycle hooks.
+ *
+ * Whatever isn't here lives in the rendering layer per framework:
+ *   - JSX/HTML output, the Transition wrapper, ScreenReaderContent / View /
+ *     CloseButton composition (React),
+ *   - Per-framework reactivity / state management (React this.state,
+ *     Lit's @property),
+ *   - Per-framework portal / declarative-shadow-DOM concerns.
+ */
+
+import keycode from 'keycode'
+import { logError as error } from '@instructure/console'
+
+import type {
+  AlertLiveRegion,
+  AlertLiveRegionPoliteness,
+  AlertVariant
+} from './types'
+
+// ---------------------------------------------------------------------------
+// Live region resolution + ARIA lifecycle
+// ---------------------------------------------------------------------------
+
+// Duck-type check for a DOM element node. Preserved verbatim from the original
+// React Alert (it intentionally accepts only `nodeType === 1`).
+const isDOMNode = (n: Element | null | undefined): boolean =>
+  !!n && typeof n === 'object' && n.nodeType === 1
+
+export const resolveLiveRegion = (
+  value: AlertLiveRegion | undefined
+): Element | null => {
+  const resolved = typeof value === 'function' ? value() : value
+  return isDOMNode(resolved as Element | null) ? (resolved as Element) : null
+}
+
+// Owns the ARIA attribute lifecycle on the consumer-provided live region.
+// Does NOT render screen-reader content itself — `appendContent` returns an
+// empty wrapper div and the calling adapter populates it (React: portal a
+// `<ScreenReaderContent>`; Lit: set textContent / append children).
+//
+// `getRegion`, `getPoliteness`, and `getAtomic` are callbacks (not snapshots)
+// so the controller always sees the consumer's current values; the original
+// React Alert read `this.props.*` at call-time of `initLiveRegion`, and the
+// `refresh` path can fire after the consumer's props have changed.
+export class AlertLiveRegionController {
+  constructor(
+    private readonly getRegion: () => Element | null,
+    private readonly getPoliteness: () => AlertLiveRegionPoliteness,
+    private readonly getAtomic: () => boolean
+  ) {}
+
+  init(): void {
+    const liveRegion = this.getRegion()
+    if (!liveRegion) return
+
+    error(
+      liveRegion.getAttribute('role') === 'alert',
+      `[Alert] live region must have role='alert' set on page load in order to announce content`
+    )
+
+    liveRegion.setAttribute('aria-live', this.getPoliteness())
+    // indicates what notifications the user agent will trigger when the
+    // accessibility tree within a live region is modified.
+    // additions: elements are added, text: Text content is added
+    liveRegion.setAttribute('aria-relevant', 'additions text')
+    liveRegion.setAttribute('aria-atomic', String(this.getAtomic()))
+  }
+
+  // Accessibility attributes must be removed for the deletion of the node
+  // and then reapplied because JAWS/IE will not respect the "aria-relevant"
+  // attribute and read when the node is deleted if the attributes are in
+  // place. The React Alert called this `removeScreenreaderAlert`.
+  refresh(contentId: string): void {
+    const liveRegion = this.getRegion()
+    if (!liveRegion) return
+
+    const div = document.getElementById(contentId)
+    if (!div) return
+
+    liveRegion.removeAttribute('aria-live')
+    liveRegion.removeAttribute('aria-relevant')
+    liveRegion.removeAttribute('aria-atomic')
+
+    this.init()
+  }
+
+  // Appends an empty wrapper div with the given id to the live region and
+  // returns it. The caller is responsible for inserting the screen-reader
+  // content into the returned element.
+  appendContent(contentId: string): HTMLDivElement | null {
+    const liveRegion = this.getRegion()
+    if (!liveRegion) return null
+
+    const div = document.createElement('div')
+    div.setAttribute('id', contentId)
+    liveRegion.appendChild(div)
+    return div
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Auto-dismiss timer
+// ---------------------------------------------------------------------------
+
+export type DismissTimer = {
+  arm: () => void
+  clear: () => void
+}
+
+// Mirrors the original `_timeouts` + `handleTimeout` + `clearTimeouts` trio.
+// `arm()` is a no-op when ms <= 0, matching the React Alert's guard.
+export const createDismissTimer = (
+  ms: number,
+  onTimeout: () => void
+): DismissTimer => {
+  const handles: ReturnType<typeof setTimeout>[] = []
+  return {
+    arm() {
+      if (ms > 0) handles.push(setTimeout(onTimeout, ms))
+    },
+    clear() {
+      handles.forEach((h) => clearTimeout(h))
+      handles.length = 0
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Keyboard handling
+// ---------------------------------------------------------------------------
+
+// Pure predicate so adapters can call from any event shape (React's
+// SyntheticEvent, a raw DOM KeyboardEvent, etc.) — only `keyCode` is read.
+export const shouldCloseOnKey = (
+  event: { keyCode: number },
+  hasCloseButton: boolean
+): boolean => hasCloseButton && event.keyCode === keycode.codes.esc
+
+// ---------------------------------------------------------------------------
+// Screen-reader content shape
+// ---------------------------------------------------------------------------
+
+export type ScreenReaderContentDescription<TChildren> = {
+  label: string
+  children: TChildren
+}
+
+// Produces the data the adapter needs to populate the wrapper div returned by
+// `AlertLiveRegionController.appendContent`. The shape mirrors the React
+// Alert's <ScreenReaderContent>{label} {children}</ScreenReaderContent>: a
+// label string followed by the original children. Each adapter renders
+// these into the SR wrapper in its own framework-appropriate way.
+export const describeScreenReaderContent = <TChildren>(props: {
+  variantScreenReaderLabel?: string
+  children?: TChildren
+}): ScreenReaderContentDescription<TChildren | undefined> => ({
+  label: props.variantScreenReaderLabel ?? '',
+  children: props.children
+})
+
+// ---------------------------------------------------------------------------
+// Variant → icon-name map (no SVG content, no framework refs)
+// ---------------------------------------------------------------------------
+
+// Adapters resolve these names to their own icon implementations:
+//   React adapter:  XCircleInstUIIcon (component) from @instructure/ui-icons
+//   Lit adapter:    <instui-icon-x-circle> (custom element) rendering SVG
+// Keeping just the names here avoids dragging icon source-of-truth into the
+// behavior layer while still pinning the variant→icon contract.
+export const variantIconName = {
+  error: 'XCircleInstUIIcon',
+  info: 'InfoInstUIIcon',
+  success: 'CircleCheckInstUIIcon',
+  warning: 'TriangleAlertInstUIIcon'
+} as const satisfies Record<AlertVariant, string>
+
+export type AlertVariantIconName = (typeof variantIconName)[AlertVariant]
diff --git a/packages/ui-alerts/src/Alert/v2/index.tsx b/packages/ui-alerts/src/Alert/v2/index.tsx
index 38ff51d915..4db3606ece 100644
--- a/packages/ui-alerts/src/Alert/v2/index.tsx
+++ b/packages/ui-alerts/src/Alert/v2/index.tsx
@@ -24,7 +24,6 @@
 
 import { Fragment, Component } from 'react'
 import ReactDOM from 'react-dom'
-import keycode from 'keycode'
 
 import {
   callRenderProp,
@@ -50,6 +49,15 @@ import generateStyle from './styles'
 import { allowedProps } from './props'
 import type { AlertProps, AlertState } from './props'
 
+import {
+  AlertLiveRegionController,
+  createDismissTimer,
+  describeScreenReaderContent,
+  resolveLiveRegion,
+  shouldCloseOnKey,
+  type DismissTimer
+} from './behavior'
+
 /**
 ---
 category: components
@@ -81,10 +89,22 @@ class Alert extends Component<AlertProps, AlertState> {
     this.state = {
       open: true
     }
+
+    // Behavior layer wiring. Callbacks (rather than captured values) so the
+    // controller always reads the consumer's current props — matches the
+    // original `initLiveRegion`/`handleTimeout` behavior of reading
+    // `this.props.*` at call time.
+    this.timer = createDismissTimer(this.props.timeout!, () => this.close())
+    this.liveRegionController = new AlertLiveRegionController(
+      () => resolveLiveRegion(this.props.liveRegion),
+      () => this.props.liveRegionPoliteness!,
+      () => this.props.isLiveRegionAtomic!
+    )
   }
 
-  _timeouts: ReturnType<typeof setTimeout>[] = []
   srid: string
+  private timer: DismissTimer
+  private liveRegionController: AlertLiveRegionController
 
   variantUI = {
     error: XCircleInstUIIcon,
@@ -99,19 +119,12 @@ class Alert extends Component<AlertProps, AlertState> {
     this.ref = el
   }
 
-  handleTimeout = () => {
-    if (this.props.timeout! > 0) {
-      this._timeouts.push(
-        setTimeout(() => {
-          this.close()
-        }, this.props.timeout)
-      )
-    }
-  }
-
-  clearTimeouts() {
-    this._timeouts.forEach((timeout) => clearTimeout(timeout))
-    this._timeouts = []
+  // Kept for backward compatibility — historically present but not invoked
+  // from React's render flow (the SR content goes through `createScreenReader-
+  // Portal`). Delegates to the behavior-layer controller so call sites that
+  // still reach for it get the unchanged DOM effect.
+  createScreenreaderAlert() {
+    this.liveRegionController.appendContent(this.srid)
   }
 
   onExitTransition = () => {
@@ -121,8 +134,8 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   close = () => {
-    this.clearTimeouts()
-    this.removeScreenreaderAlert()
+    this.timer.clear()
+    this.liveRegionController.refresh(this.srid)
     this.setState({ open: false }, () => {
       if (
         this.props.onDismiss &&
@@ -133,96 +146,38 @@ class Alert extends Component<AlertProps, AlertState> {
     })
   }
 
-  // duck type for a dom node
-  isDOMNode(n: Element | null | undefined) {
-    return n && typeof n === 'object' && n.nodeType === 1
-  }
-
+  // Preserved as a thin wrapper for compatibility with any tests or external
+  // call sites that referenced this method on the instance.
   getLiveRegion() {
-    const lr =
-      typeof this.props.liveRegion === 'function'
-        ? this.props.liveRegion()
-        : this.props.liveRegion
-
-    return this.isDOMNode(lr) ? lr : null
-  }
-
-  initLiveRegion(liveRegion: Element) {
-    error(
-      liveRegion.getAttribute('role') === 'alert',
-      `[Alert] live region must have role='alert' set on page load in order to announce content`
-    )
-
-    if (liveRegion) {
-      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness!)
-      // indicates what notifications the user agent will trigger when the
-      // accessibility tree within a live region is modified.
-      // additions: elements are added, text: Text content is added
-      liveRegion.setAttribute('aria-relevant', 'additions text')
-      liveRegion.setAttribute(
-        'aria-atomic',
-        `${this.props.isLiveRegionAtomic!}`
-      )
-    }
+    return resolveLiveRegion(this.props.liveRegion)
   }
 
   createScreenreaderContentNode() {
+    const { label, children } = describeScreenReaderContent({
+      variantScreenReaderLabel: this.props.variantScreenReaderLabel,
+      children: this.props.children
+    })
     return (
       <ScreenReaderContent>
-        {this.props.variantScreenReaderLabel || ''} {this.props.children}
+        {label} {children}
       </ScreenReaderContent>
     )
   }
 
-  createScreenreaderAlert() {
-    const liveRegion = this.getLiveRegion()
-    if (liveRegion) {
-      const div = document.createElement('div')
-      div.setAttribute('id', this.srid)
-
-      liveRegion.appendChild(div)
-    }
-  }
-
-  removeScreenreaderAlert() {
-    const liveRegion = this.getLiveRegion()
-    if (liveRegion) {
-      const div = document.getElementById(this.srid!)
-      if (div) {
-        // Accessibility attributes must be removed for the deletion of the node
-        // and then reapplied because JAWS/IE will not respect the
-        // "aria-relevant" attribute and read when the node is deleted if
-        // the attributes are in place
-        liveRegion.removeAttribute('aria-live')
-        liveRegion.removeAttribute('aria-relevant')
-        liveRegion.removeAttribute('aria-atomic')
-
-        this.initLiveRegion(liveRegion)
-      }
-    }
-  }
-
   handleKeyUp = (event: React.KeyboardEvent<ViewOwnProps>) => {
-    if (
-      this.props.renderCloseButtonLabel &&
-      event.keyCode === keycode.codes.esc
-    ) {
+    if (shouldCloseOnKey(event, !!this.props.renderCloseButtonLabel)) {
       this.close()
     }
   }
 
   componentDidMount() {
     this.props.makeStyles?.()
-    const liveRegion = this.getLiveRegion()
-    if (liveRegion) {
-      this.initLiveRegion(liveRegion)
-    }
-
-    this.handleTimeout()
+    this.liveRegionController.init()
+    this.timer.arm()
   }
 
   componentWillUnmount() {
-    this.clearTimeouts()
+    this.timer.clear()
   }
 
   componentDidUpdate(prevProps: AlertProps) {
diff --git a/packages/ui-alerts/src/Alert/v2/props.ts b/packages/ui-alerts/src/Alert/v2/props.ts
index 33a1966d06..ca1b6c62c8 100644
--- a/packages/ui-alerts/src/Alert/v2/props.ts
+++ b/packages/ui-alerts/src/Alert/v2/props.ts
@@ -22,7 +22,14 @@
  * SOFTWARE.
  */
 
-import { ReactNode } from 'react'
+/*
+ * React-flavored composite prop types for the v2 Alert. Framework-neutral
+ * primitives — `AlertVariant`, `AlertTransition`, `AlertState`,
+ * `AlertCorePropsOf`, `allowedProps`, etc. — live in ./types and can be
+ * consumed without pulling React.
+ */
+
+import type { ReactNode } from 'react'
 
 import type {
   Spacing,
@@ -33,83 +40,14 @@ import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { Renderable } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
-type AlertOwnProps = {
-  /**
-   * content to be rendered within Alert
-   */
-  children?: ReactNode
-  /**
-   * Determines color and icon
-   */
-  variant?: 'info' | 'success' | 'warning' | 'error'
-  /**
-   * How the screen reader should announce the alert variant. While the `variant` prop sets the color and icon for the alert component, this label should be a textual representation of that information. So e.g. if the variant is `info`, this label could be "Information," or "Information alert,". Note the `,` at the end of the label which helps the screenreader to be more natural sounding.
-   */
-  variantScreenReaderLabel?: string
-  /**
-   * A DOM element or function that returns an element where screenreader alerts will be placed.
-   */
-  liveRegion?: Element | null | (() => Element | null | undefined)
-  /**
-   * Choose the politeness level of screenreader alerts, sets the value of
-   * `aria-live`.
-   *
-   * When regions are specified as `polite`, assistive technologies will notify
-   * users of updates but generally do not interrupt the current task,
-   * and updates take low priority.
-   *
-   * When regions are specified as `assertive`, assistive technologies will
-   * immediately notify the user, and could potentially clear the speech queue
-   * of previous updates.
-   */
-  liveRegionPoliteness?: 'polite' | 'assertive'
-  /**
-   * Value for the `aria-atomic` attribute.
-   * `aria-atomic` controls how much is read when a change happens. Should only
-   * the specific thing that changed be read or should the entire element be
-   * read.
-   */
-  isLiveRegionAtomic?: boolean
-  /**
-   * If the alert should only be visible to screen readers
-   */
-  screenReaderOnly?: boolean
-  /**
-   * Milliseconds until the Alert is dismissed automatically
-   */
-  timeout?: number
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
-  margin?: Spacing
-  /**
-   * Close button label. Can be a React component
-   */
-  renderCloseButtonLabel?: Renderable
-  /**
-   * Callback after the alert is closed
-   */
-  onDismiss?: () => void
-  /**
-   * Transition used to make the alert appear and disappear
-   */
-  transition?: 'none' | 'fade'
-  /**
-   * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
-   * This is necessary to close the alert from the outside and still run the transition.
-   */
-  open?: boolean
-  /**
-   * If the alert should have a shadow.
-   */
-  hasShadow: boolean
+import { allowedProps } from './types'
+import type { AlertCorePropsOf, AlertState } from './types'
 
-  /**
-   * An icon, or function that returns an icon. Setting it will override the variant's icon.
-   */
-  renderCustomIcon?: Renderable
+// React-flavored own props: pins the generic renderable slots to React types
+// and layers the `margin` Spacing field that's specific to the React adapter
+// (it's passed straight through to <View />).
+type AlertOwnProps = AlertCorePropsOf<Renderable, ReactNode> & {
+  margin?: Spacing
 }
 
 type PropKeys = keyof AlertOwnProps
@@ -124,26 +62,5 @@ type AlertStyle = ComponentStyle<
   'alert' | 'icon' | 'closeButton' | 'content' | 'variantScreenReaderLabel'
 >
 
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'variant',
-  'margin',
-  'liveRegion',
-  'liveRegionPoliteness',
-  'isLiveRegionAtomic',
-  'screenReaderOnly',
-  'timeout',
-  'renderCloseButtonLabel',
-  'onDismiss',
-  'transition',
-  'open',
-  'hasShadow',
-  'renderCustomIcon'
-]
-
-type AlertState = {
-  open: boolean
-}
-
-export type { AlertProps, AlertStyle, AlertState }
+export type { AlertProps, AlertStyle, AlertState, AllowedPropKeys, PropKeys }
 export { allowedProps }
diff --git a/packages/ui-alerts/src/Alert/v2/styles.ts b/packages/ui-alerts/src/Alert/v2/styles.ts
index b69da3b19b..b972f7e21b 100644
--- a/packages/ui-alerts/src/Alert/v2/styles.ts
+++ b/packages/ui-alerts/src/Alert/v2/styles.ts
@@ -23,21 +23,28 @@
  */
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { AlertProps, AlertStyle } from './props'
+import type { AlertStyle } from './props'
+import type { AlertStyleInputs } from './types'
 
 /**
  * ---
  * private: true
  * ---
- * Generates the style object from the theme and provided additional information
+ * Generates the style object from the theme and provided additional information.
+ *
+ * The `props` parameter is typed as the narrow `AlertStyleInputs` (the actual
+ * fields this function reads) rather than the React-flavored `AlertProps`, so
+ * non-React adapters can call this without importing React. The full React
+ * `AlertProps` is structurally assignable to `AlertStyleInputs`, so existing
+ * call sites keep working unchanged.
+ *
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Alert']>,
-  props: AlertProps,
+  props: AlertStyleInputs,
   sharedTokens: SharedTokens
 ): AlertStyle => {
   const { variant, hasShadow } = props
diff --git a/packages/ui-alerts/src/Alert/v2/types.ts b/packages/ui-alerts/src/Alert/v2/types.ts
new file mode 100644
index 0000000000..4703325d4e
--- /dev/null
+++ b/packages/ui-alerts/src/Alert/v2/types.ts
@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral primitives for the v2 Alert. This file has no runtime
+ * imports — every symbol is either a type or a `const` of plain data — so it
+ * can be consumed from non-React contexts (e.g. @instructure/ui-web-core's
+ * Lit-based Alert) without pulling React into the bundle.
+ *
+ * React-flavored composite types (the ones that pull in ReactNode, Renderable,
+ * WithStyleProps, etc.) live in ./props.ts.
+ */
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
+
+export type AlertTransition = 'none' | 'fade'
+
+export type AlertLiveRegionPoliteness = 'polite' | 'assertive'
+
+export type AlertLiveRegion =
+  | Element
+  | null
+  | (() => Element | null | undefined)
+
+// Narrow contract for what styles.ts actually reads off props. Keeps the
+// style generator decoupled from any React-flavored composite prop type.
+export type AlertStyleInputs = {
+  variant?: AlertVariant
+  hasShadow: boolean
+}
+
+// Generic on the renderable / children types so each adapter can pin them:
+//   React:  AlertCorePropsOf<Renderable, ReactNode>
+//   Lit:    AlertCorePropsOf<unknown, unknown> (or TemplateResult)
+export type AlertCorePropsOf<TRenderable, TChildren = TRenderable> = {
+  children?: TChildren
+  variant?: AlertVariant
+  variantScreenReaderLabel?: string
+  liveRegion?: AlertLiveRegion
+  liveRegionPoliteness?: AlertLiveRegionPoliteness
+  isLiveRegionAtomic?: boolean
+  screenReaderOnly?: boolean
+  timeout?: number
+  renderCloseButtonLabel?: TRenderable
+  onDismiss?: () => void
+  transition?: AlertTransition
+  open?: boolean
+  hasShadow: boolean
+  renderCustomIcon?: TRenderable
+}
+
+export type AlertState = {
+  open: boolean
+}
+
+// Keys allowed by `passthroughProps` filtering. The list mirrors what's
+// historically lived on the React Alert as `allowedProps`; consumers of the
+// neutral types can read this directly without the React layer.
+export const allowedProps = [
+  'children',
+  'variant',
+  'margin',
+  'liveRegion',
+  'liveRegionPoliteness',
+  'isLiveRegionAtomic',
+  'screenReaderOnly',
+  'timeout',
+  'renderCloseButtonLabel',
+  'onDismiss',
+  'transition',
+  'open',
+  'hasShadow',
+  'renderCustomIcon'
+] as const
+
+export type AlertAllowedPropKey = (typeof allowedProps)[number]
diff --git a/packages/ui-drilldown/src/Drilldown/__tests__/behavior.test.tsx b/packages/ui-drilldown/src/Drilldown/__tests__/behavior.test.tsx
new file mode 100644
index 0000000000..428fe516e1
--- /dev/null
+++ b/packages/ui-drilldown/src/Drilldown/__tests__/behavior.test.tsx
@@ -0,0 +1,303 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+
+import {
+  computeInitialSelectionMap,
+  computeControlledSelectionUpdate,
+  reduceGroupSelection,
+  selectedValuesInGroup,
+  reduceGoToPage,
+  reduceHighlight,
+  previousPageId
+} from '../v2/behavior'
+import type { NeutralPageData, SelectedGroupOptionsMap } from '../v2/types'
+
+// These exercise the framework-neutral single source of truth that both the
+// React Drilldown and the Lit <instui-drilldown> consume.
+
+describe('Drilldown behavior (framework-neutral)', () => {
+  describe('computeInitialSelectionMap', () => {
+    it('controlled selectedOptions wins over defaults', () => {
+      const pages: NeutralPageData[] = [
+        {
+          pageId: 'p1',
+          groups: [
+            {
+              groupId: 'g1',
+              selectableType: 'multiple',
+              selectedOptions: ['b'],
+              defaultSelected: ['a'],
+              options: [
+                { optionId: 'oa', value: 'a', defaultSelected: true },
+                { optionId: 'ob', value: 'b' }
+              ]
+            }
+          ]
+        }
+      ]
+      const map = computeInitialSelectionMap(pages)
+      expect([...map.g1.values()]).toEqual(['b'])
+    })
+
+    it('per-option defaultSelected===false force-deselects despite group default', () => {
+      const pages: NeutralPageData[] = [
+        {
+          pageId: 'p1',
+          groups: [
+            {
+              groupId: 'g1',
+              selectableType: 'multiple',
+              defaultSelected: ['a', 'b'],
+              options: [
+                { optionId: 'oa', value: 'a', defaultSelected: false },
+                { optionId: 'ob', value: 'b' }
+              ]
+            }
+          ]
+        }
+      ]
+      const map = computeInitialSelectionMap(pages)
+      expect([...map.g1.values()]).toEqual(['b'])
+    })
+
+    it('skips groups without a selectableType', () => {
+      const pages: NeutralPageData[] = [
+        {
+          pageId: 'p1',
+          groups: [
+            {
+              groupId: 'nav',
+              options: [{ optionId: 'o1', value: undefined }]
+            }
+          ]
+        }
+      ]
+      const map = computeInitialSelectionMap(pages)
+      expect(map.nav).toBeUndefined()
+    })
+
+    it('reports an error for single-select groups with >1 default and leaves the group empty', () => {
+      const onError = vi.fn()
+      const pages: NeutralPageData[] = [
+        {
+          pageId: 'p1',
+          groups: [
+            {
+              groupId: 'g1',
+              selectableType: 'single',
+              defaultSelected: ['a', 'b'],
+              options: [
+                { optionId: 'oa', value: 'a' },
+                { optionId: 'ob', value: 'b' }
+              ]
+            }
+          ]
+        }
+      ]
+      const map = computeInitialSelectionMap(pages, onError)
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError.mock.calls[0][0]).toContain(
+        'only one default item selected'
+      )
+      expect(map.g1.size).toBe(0)
+    })
+  })
+
+  describe('reduceGroupSelection', () => {
+    const base: SelectedGroupOptionsMap = { g1: new Map([['oa', 'a']]) }
+
+    it('multiple: adds when not present', () => {
+      const next = reduceGroupSelection(base, {
+        groupId: 'g1',
+        optionId: 'ob',
+        value: 'b',
+        selectableType: 'multiple'
+      })
+      expect([...next.g1.values()]).toEqual(['a', 'b'])
+      // original is not mutated
+      expect([...base.g1.values()]).toEqual(['a'])
+    })
+
+    it('multiple: removes when already present (toggle off)', () => {
+      const next = reduceGroupSelection(base, {
+        groupId: 'g1',
+        optionId: 'oa',
+        value: 'a',
+        selectableType: 'multiple'
+      })
+      expect([...next.g1.values()]).toEqual([])
+    })
+
+    it('single: replaces the whole group (radio)', () => {
+      const next = reduceGroupSelection(base, {
+        groupId: 'g1',
+        optionId: 'ob',
+        value: 'b',
+        selectableType: 'single'
+      })
+      expect([...next.g1.entries()]).toEqual([['ob', 'b']])
+    })
+  })
+
+  describe('selectedValuesInGroup', () => {
+    it('returns all values, or [] for an unknown group', () => {
+      const map: SelectedGroupOptionsMap = {
+        g1: new Map([
+          ['oa', 'a'],
+          ['ob', 'b']
+        ])
+      }
+      expect(selectedValuesInGroup(map, 'g1')).toEqual(['a', 'b'])
+      expect(selectedValuesInGroup(map, 'nope')).toEqual([])
+    })
+  })
+
+  describe('computeControlledSelectionUpdate', () => {
+    const pages: NeutralPageData[] = [
+      {
+        pageId: 'p1',
+        groups: [
+          {
+            groupId: 'g1',
+            selectableType: 'multiple',
+            selectedOptions: ['a'],
+            options: [
+              { optionId: 'oa', value: 'a' },
+              { optionId: 'ob', value: 'b' }
+            ]
+          }
+        ]
+      }
+    ]
+
+    it('flags changed when the controlled prop diverges from state', () => {
+      const { next, changed } = computeControlledSelectionUpdate(pages, {
+        g1: new Map([['ob', 'b']])
+      })
+      expect(changed).toBe(true)
+      expect([...next.g1.entries()]).toEqual([['oa', 'a']])
+    })
+
+    it('flags unchanged when state already matches the controlled prop', () => {
+      const { changed } = computeControlledSelectionUpdate(pages, {
+        g1: new Map([['oa', 'a']])
+      })
+      expect(changed).toBe(false)
+    })
+  })
+
+  describe('reduceGoToPage', () => {
+    it('pushes a new page onto history', () => {
+      const result = reduceGoToPage(['root'], 'sub', true)
+      expect(result).toEqual({
+        history: ['root', 'sub'],
+        prevPageId: 'root',
+        newPageId: 'sub'
+      })
+    })
+
+    it('truncates history when navigating back to an earlier page', () => {
+      const result = reduceGoToPage(['root', 'a', 'b'], 'a', true)
+      expect('history' in result && result.history).toEqual(['root', 'a'])
+    })
+
+    it('warns when the page does not exist', () => {
+      const result = reduceGoToPage(['root'], 'missing', false)
+      expect('warning' in result && result.warning).toContain("doesn't exist")
+    })
+
+    it('warns when no id is provided', () => {
+      const result = reduceGoToPage(['root'], '', true)
+      expect('warning' in result && result.warning).toContain('no page id')
+    })
+  })
+
+  describe('reduceHighlight', () => {
+    const ids = ['a', 'b', 'c']
+
+    it('highlights the first option when nothing is highlighted', () => {
+      expect(
+        reduceHighlight({
+          activeOptionIds: ids,
+          highlightedOptionId: undefined,
+          rotateFocus: true
+        })
+      ).toBe('a')
+    })
+
+    it('moves by direction', () => {
+      expect(
+        reduceHighlight({
+          activeOptionIds: ids,
+          highlightedOptionId: 'a',
+          direction: 1,
+          rotateFocus: true
+        })
+      ).toBe('b')
+    })
+
+    it('wraps to the end when rotateFocus and moving past the start', () => {
+      expect(
+        reduceHighlight({
+          activeOptionIds: ids,
+          highlightedOptionId: 'a',
+          direction: -1,
+          rotateFocus: true
+        })
+      ).toBe('c')
+    })
+
+    it('does not wrap when rotateFocus is false', () => {
+      expect(
+        reduceHighlight({
+          activeOptionIds: ids,
+          highlightedOptionId: 'c',
+          direction: 1,
+          rotateFocus: false
+        })
+      ).toBeUndefined()
+    })
+
+    it('honors a directly requested id', () => {
+      expect(
+        reduceHighlight({
+          activeOptionIds: ids,
+          highlightedOptionId: 'a',
+          requestedId: 'c',
+          direction: 1,
+          rotateFocus: true
+        })
+      ).toBe('c')
+    })
+  })
+
+  describe('previousPageId', () => {
+    it('returns the second-to-last page id, or undefined on the root', () => {
+      expect(previousPageId(['root', 'a'])).toBe('root')
+      expect(previousPageId(['root'])).toBeUndefined()
+    })
+  })
+})
diff --git a/packages/ui-drilldown/src/Drilldown/v2/behavior.ts b/packages/ui-drilldown/src/Drilldown/v2/behavior.ts
new file mode 100644
index 0000000000..22506b88d5
--- /dev/null
+++ b/packages/ui-drilldown/src/Drilldown/v2/behavior.ts
@@ -0,0 +1,359 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral behavior for the v2 Drilldown. No React, no JSX, no runtime
+ * imports. Every function here is a pure reducer over plain data — the React
+ * adapter (./index.tsx) and the Lit adapter (@instructure/ui-web-core) both feed
+ * these the same `Neutral*Data` shapes and wire the results into their own
+ * reactivity/lifecycle.
+ *
+ * What lives here:  selection state machine, controlled-prop sync, page-history
+ *                   navigation, keyboard highlight index math.
+ * What does NOT:    walking React children / parsing a DOM tree into NeutralPageData
+ *                   (adapter), calling setState / requestUpdate (adapter), DOM focus
+ *                   (adapter), emitting console warnings (adapter supplies the sink),
+ *                   rendering (adapter).
+ */
+
+import type {
+  DrilldownOptionValue,
+  DrilldownSelectableType,
+  NeutralPageData,
+  SelectedGroupOptionsMap
+} from './types'
+
+// ---------------------------------------------------------------------------
+// Selection — initial map
+// ---------------------------------------------------------------------------
+
+/**
+ * Builds the initial `SelectedGroupOptionsMap` from plain page/group/option
+ * data, establishing the selection state with a clear precedence:
+ *
+ * 1. Controlled: if a group has an array `selectedOptions`, it is the absolute
+ *    source of truth and `defaultSelected` is ignored.
+ * 2. Uncontrolled: otherwise a per-option `defaultSelected === false` force-
+ *    deselects, then a per-option `defaultSelected === true` or the group-level
+ *    `defaultSelected` array selects.
+ *
+ * Single-select groups receiving more than one selected/default value are
+ * invalid: `onError` is invoked with the message and the group is left empty
+ * (mirroring the original React behavior, which bailed out of that group).
+ */
+export const computeInitialSelectionMap = (
+  pages: NeutralPageData[],
+  onError?: (message: string) => void
+): SelectedGroupOptionsMap => {
+  const selectedGroupOptionsMap: SelectedGroupOptionsMap = {}
+
+  pages.forEach((page) => {
+    page.groups.forEach((group) => {
+      const {
+        groupId,
+        selectableType,
+        selectedOptions,
+        defaultSelected = [],
+        options
+      } = group
+
+      if (!selectableType) return
+
+      selectedGroupOptionsMap[groupId] = new Map()
+
+      if (selectableType === 'single') {
+        if (Array.isArray(selectedOptions) && selectedOptions.length > 1) {
+          onError?.(
+            `Radio type selectable groups can have only one item selected! Group "${groupId}" has multiple values: [${selectedOptions.join(
+              ', '
+            )}]!`
+          )
+          return
+        }
+        if (defaultSelected.length > 1) {
+          onError?.(
+            `Radio type selectable groups can have only one default item selected! Group "${groupId}" has multiple values: [${defaultSelected.join(
+              ', '
+            )}]!`
+          )
+          return
+        }
+      }
+
+      options.forEach((option) => {
+        const {
+          optionId,
+          value: optionValue,
+          defaultSelected: optionDefault
+        } = option
+
+        if (optionValue == null) return
+
+        let isSelected = false
+        if (Array.isArray(selectedOptions)) {
+          isSelected = selectedOptions.includes(optionValue)
+        } else if (optionDefault === false) {
+          isSelected = false
+        } else {
+          const isGroupDefaultSelected = defaultSelected.includes(optionValue)
+          isSelected = Boolean(optionDefault) || isGroupDefaultSelected
+        }
+
+        if (isSelected) {
+          selectedGroupOptionsMap[groupId].set(optionId, optionValue)
+        }
+      })
+    })
+  })
+
+  return selectedGroupOptionsMap
+}
+
+// ---------------------------------------------------------------------------
+// Selection — controlled prop sync
+// ---------------------------------------------------------------------------
+
+type MapEntries = [string, DrilldownOptionValue][]
+
+const normalizeMap = (map: Map<string, DrilldownOptionValue>): MapEntries =>
+  Array.from(map.entries())
+
+// Positional compare of normalized entries — equivalent to the original
+// `deepEqual` over the entry arrays for these primitive [id, value] pairs,
+// without dragging @instructure/ui-utils into the neutral layer.
+const entriesEqual = (a: MapEntries, b: MapEntries): boolean => {
+  if (a.length !== b.length) return false
+  return a.every(([aId, aVal], i) => aId === b[i][0] && aVal === b[i][1])
+}
+
+/**
+ * Recomputes the selection map for every controlled group (one that has both a
+ * `selectableType` and an array `selectedOptions`) so the prop always wins over
+ * internal state. Returns the next map plus whether anything actually changed,
+ * so the adapter can skip a re-render when nothing moved.
+ */
+export const computeControlledSelectionUpdate = (
+  pages: NeutralPageData[],
+  current: SelectedGroupOptionsMap
+): { next: SelectedGroupOptionsMap; changed: boolean } => {
+  const next: SelectedGroupOptionsMap = { ...current }
+  let changed = false
+
+  pages.forEach((page) => {
+    page.groups.forEach((group) => {
+      const { groupId, selectableType, selectedOptions, options } = group
+
+      if (!selectableType || !Array.isArray(selectedOptions)) return
+
+      const newGroupMap = new Map<string, DrilldownOptionValue>()
+      options.forEach((option) => {
+        if (selectedOptions.includes(option.value)) {
+          newGroupMap.set(option.optionId, option.value)
+        }
+      })
+
+      const currentGroupMap = current[groupId] || new Map()
+
+      if (
+        !entriesEqual(normalizeMap(newGroupMap), normalizeMap(currentGroupMap))
+      ) {
+        next[groupId] = newGroupMap
+        changed = true
+      }
+    })
+  })
+
+  return { next, changed }
+}
+
+// ---------------------------------------------------------------------------
+// Selection — toggle reducer
+// ---------------------------------------------------------------------------
+
+/**
+ * Pure toggle of a single option's selection within its group:
+ *   - multiple + already selected -> remove (checkbox toggle off)
+ *   - multiple                    -> add (checkbox toggle on)
+ *   - single                      -> replace the whole group with this one (radio)
+ * Returns a brand-new top-level object with a new group Map so reactive layers
+ * see an identity change.
+ */
+export const reduceGroupSelection = (
+  map: SelectedGroupOptionsMap,
+  args: {
+    groupId: string
+    optionId: string
+    value: DrilldownOptionValue
+    selectableType: DrilldownSelectableType
+  }
+): SelectedGroupOptionsMap => {
+  const { groupId, optionId, value, selectableType } = args
+
+  let newGroupMap = new Map(map[groupId])
+
+  if (selectableType === 'multiple' && Boolean(map[groupId]?.has(optionId))) {
+    // toggle off, if already selected
+    newGroupMap.delete(optionId)
+  } else {
+    if (selectableType === 'multiple') {
+      // "checkbox"
+      newGroupMap.set(optionId, value)
+    } else if (selectableType === 'single') {
+      // "radio"
+      newGroupMap = new Map()
+      newGroupMap.set(optionId, value)
+    }
+  }
+
+  return {
+    ...map,
+    [groupId]: newGroupMap
+  }
+}
+
+// The array of all currently-selected values in a group. The selection
+// callbacks ALWAYS receive this array (even for single-select groups), so the
+// `value`-as-array contract lives in exactly one place.
+export const selectedValuesInGroup = (
+  map: SelectedGroupOptionsMap,
+  groupId: string
+): DrilldownOptionValue[] => (map[groupId] ? [...map[groupId].values()] : [])
+
+// ---------------------------------------------------------------------------
+// Navigation — page history
+// ---------------------------------------------------------------------------
+
+export type GoToPageResult =
+  | { history: string[]; prevPageId: string; newPageId: string }
+  | { warning: string }
+
+/**
+ * Pure page-history reducer. `pageExists` is supplied by the adapter (React
+ * checks its `pageMap`, Lit its `pages` property). On any invalid input a
+ * `{ warning }` is returned so the adapter can emit it via its own logger;
+ * otherwise the next history array + prev/new page ids are returned.
+ */
+export const reduceGoToPage = (
+  history: string[],
+  newPageId: string,
+  pageExists: boolean
+): GoToPageResult => {
+  if (!newPageId) {
+    return {
+      warning: `Cannot go to page because there was no page id provided.`
+    }
+  }
+
+  if (typeof newPageId !== 'string') {
+    return {
+      warning: `Cannot go to page because parameter newPageId has to be string (valid page id). Current newPageId is "${typeof newPageId}".`
+    }
+  }
+
+  if (!pageExists) {
+    return {
+      warning: `Cannot go to page because page with id: "${newPageId}" doesn't exist.`
+    }
+  }
+
+  const nextHistory = [...history]
+
+  // the last page id in the history is the current one,
+  // it will become the "prevPage"
+  const prevPageId = nextHistory[nextHistory.length - 1]
+  const idxInHistory = nextHistory.indexOf(newPageId)
+
+  if (idxInHistory < 0) {
+    // if it is not in the page history, we have to add it
+    nextHistory.push(newPageId)
+  } else {
+    // if it was already in the history, we go back to that page,
+    // and clear the rest from the history
+    nextHistory.splice(idxInHistory + 1, nextHistory.length - 1)
+  }
+
+  return { history: nextHistory, prevPageId, newPageId }
+}
+
+// The id of the page that "back" would navigate to, or undefined on the root.
+export const previousPageId = (history: string[]): string | undefined =>
+  history[history.length - 2]
+
+// ---------------------------------------------------------------------------
+// Keyboard — highlight index math
+// ---------------------------------------------------------------------------
+
+/**
+ * Computes the next highlighted option id from the current one and a navigation
+ * intent. Pure index math only — the adapter is responsible for (a) validating
+ * that a directly-requested id actually exists before passing it as
+ * `requestedId`, and (b) applying state + moving DOM focus to the returned id.
+ *
+ * Returns `undefined` for a no-op (e.g. nothing highlighted yet and no
+ * direction), in which case the adapter should do nothing.
+ */
+export const reduceHighlight = (args: {
+  activeOptionIds: string[]
+  highlightedOptionId: string | undefined
+  requestedId?: string
+  direction?: -1 | 1
+  rotateFocus: boolean
+}): string | undefined => {
+  const {
+    activeOptionIds,
+    highlightedOptionId,
+    requestedId,
+    direction,
+    rotateFocus
+  } = args
+
+  // if a valid id was requested directly, use it
+  let highlightId = requestedId
+
+  if (!highlightId) {
+    if (!highlightedOptionId) {
+      // nothing highlighted yet, highlight first option
+      highlightId = activeOptionIds[0]
+    } else if (direction) {
+      // if it has direction, find next id based on it
+      const index = activeOptionIds.indexOf(highlightedOptionId)
+      const newIndex = index + direction
+
+      highlightId = index > -1 ? activeOptionIds[newIndex] : undefined
+
+      if (rotateFocus) {
+        const lastOptionsIndex = activeOptionIds.length - 1
+
+        if (newIndex < 0) {
+          highlightId = activeOptionIds[lastOptionsIndex]
+        }
+        if (newIndex > lastOptionsIndex) {
+          highlightId = activeOptionIds[0]
+        }
+      }
+    }
+  }
+
+  return highlightId
+}
diff --git a/packages/ui-drilldown/src/Drilldown/v2/index.tsx b/packages/ui-drilldown/src/Drilldown/v2/index.tsx
index 9b8f14bf02..ac84f9a76c 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/v2/index.tsx
@@ -26,7 +26,6 @@ import { Children, Component, ReactElement, ReactNode } from 'react'
 
 import { warn, error } from '@instructure/console'
 import { contains, containsActiveElement } from '@instructure/ui-dom-utils'
-import { deepEqual } from '@instructure/ui-utils'
 import {
   callRenderProp,
   matchComponentTypes,
@@ -55,7 +54,6 @@ import { withStyleNew } from '@instructure/emotion'
 
 import { DrilldownSeparator } from './DrilldownSeparator'
 import { DrilldownOption } from './DrilldownOption'
-import type { DrilldownOptionValue } from './DrilldownOption/props'
 import { DrilldownGroup } from './DrilldownGroup'
 import type { DrilldownGroupProps, GroupChildren } from './DrilldownGroup/props'
 import { DrilldownPage } from './DrilldownPage'
@@ -63,7 +61,21 @@ import type { DrilldownPageProps, PageChildren } from './DrilldownPage/props'
 
 import generateStyle from './styles'
 
-import { allowedProps, SelectedGroupOptionsMap } from './props'
+import {
+  computeInitialSelectionMap,
+  computeControlledSelectionUpdate,
+  reduceGroupSelection,
+  selectedValuesInGroup,
+  reduceGoToPage,
+  reduceHighlight
+} from './behavior'
+import type {
+  NeutralPageData,
+  NeutralGroupData,
+  NeutralOptionData
+} from './types'
+
+import { allowedProps } from './props'
 
 import type {
   DrilldownProps,
@@ -234,55 +246,15 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       })
     }
 
-    // This block syncs the internal state if the selectedOptions prop changes
-    // selectedOptions prop values always win over internal state.
-    let shouldUpdateState = false
-    const nextSelectionMap: SelectedGroupOptionsMap = {
-      ...this.state.selectedGroupOptionsMap
-    }
-
-    this.pages.forEach((page) => {
-      this.getChildrenArray(page.props.children).forEach((child) => {
-        if (matchComponentTypes<GroupChild>(child, [DrilldownGroup])) {
-          const {
-            id: groupId,
-            selectableType,
-            selectedOptions,
-            children: groupChildren
-          } = child.props
-
-          if (!selectableType || !Array.isArray(selectedOptions)) return
-
-          const newGroupMap = new Map()
-
-          this.getChildrenArray(groupChildren)?.forEach((groupChild) => {
-            if (
-              matchComponentTypes<OptionChild>(groupChild, [DrilldownOption])
-            ) {
-              const { id: optionId, value: optionValue } = groupChild.props
-              if (selectedOptions.includes(optionValue)) {
-                newGroupMap.set(optionId, optionValue)
-              }
-            }
-          })
-
-          const currentGroupMapInState =
-            this.state.selectedGroupOptionsMap[groupId] || new Map()
-
-          if (
-            !deepEqual(
-              this.getNormalizedMap(newGroupMap),
-              this.getNormalizedMap(currentGroupMapInState)
-            )
-          ) {
-            nextSelectionMap[groupId] = newGroupMap
-            shouldUpdateState = true
-          }
-        }
-      })
-    })
-    if (shouldUpdateState) {
-      this.setState({ selectedGroupOptionsMap: nextSelectionMap })
+    // This block syncs the internal state if the selectedOptions prop changes.
+    // selectedOptions prop values always win over internal state. The recompute
+    // and change detection live in the framework-neutral behavior layer.
+    const { next, changed } = computeControlledSelectionUpdate(
+      this.getNeutralPages(),
+      this.state.selectedGroupOptionsMap
+    )
+    if (changed) {
+      this.setState({ selectedGroupOptionsMap: next })
     }
   }
 
@@ -395,10 +367,6 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     return id ? this._activeOptionsMap[id] : undefined
   }
 
-  getNormalizedMap(map: Map<string, DrilldownOptionValue>) {
-    return Array.from(map.entries())
-  }
-
   /**
    * Initializes the map of selected options for each group on initial render.
    *
@@ -418,44 +386,33 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
    * values are Maps of the selected { optionId: optionValue } pairs for that group.
    */
   getSelectedGroupOptionsMap() {
-    const selectedGroupOptionsMap: SelectedGroupOptionsMap = {}
-    this.pages.forEach((page) => {
-      const { children } = page.props
+    return computeInitialSelectionMap(this.getNeutralPages(), (message) =>
+      error(false, message)
+    )
+  }
+
+  /**
+   * Walks the React children into the framework-neutral `NeutralPageData[]`
+   * shape that the pure selection reducers in ./behavior consume. This is the
+   * React-children -> plain-data boundary: the selection precedence, validation
+   * and controlled-prop sync logic itself lives in ./behavior and is shared
+   * (as a single source of truth) with the Lit adapter in ui-web-core.
+   */
+  getNeutralPages(): NeutralPageData[] {
+    return this.pages.map((page): NeutralPageData => {
+      const groups: NeutralGroupData[] = []
 
-      this.getChildrenArray(children).forEach((child) => {
+      this.getChildrenArray(page.props.children).forEach((child) => {
         if (matchComponentTypes<GroupChild>(child, [DrilldownGroup])) {
           const {
             id: groupId,
             selectableType,
             selectedOptions,
-            defaultSelected = [],
+            defaultSelected,
             children: groupChildren
           } = child.props
 
-          if (!selectableType) return
-
-          selectedGroupOptionsMap[groupId] = new Map()
-
-          if (selectableType === 'single') {
-            if (Array.isArray(selectedOptions) && selectedOptions.length > 1) {
-              error(
-                false,
-                `Radio type selectable groups can have only one item selected! Group "${groupId}" has multiple values: [${selectedOptions.join(
-                  ', '
-                )}]!`
-              )
-              return
-            }
-            if (defaultSelected.length > 1) {
-              error(
-                false,
-                `Radio type selectable groups can have only one default item selected! Group "${groupId}" has multiple values: [${defaultSelected.join(
-                  ', '
-                )}]!`
-              )
-              return
-            }
-          }
+          const options: NeutralOptionData[] = []
 
           this.getChildrenArray(groupChildren)?.forEach((groupChild) => {
             if (
@@ -463,36 +420,29 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             ) {
               const {
                 id: optionId,
-                value: optionValue,
+                value,
                 defaultSelected: optionDefaultSelected
               } = groupChild.props
-
-              if (optionValue == null) return
-
-              let isSelected = false
-              // If the group is controlled via the `selectedOptions` prop, it is the source of truth.
-              // `defaultSelected` values are ignored.
-              if (Array.isArray(selectedOptions)) {
-                isSelected = selectedOptions.includes(optionValue)
-                // Second strongest is the `defaultSelected` value on the option itself.
-              } else if (optionDefaultSelected === false) {
-                isSelected = false
-              } else {
-                // Last is the `defaultSelected` array on the group.
-                const isGroupDefaultSelected =
-                  defaultSelected.includes(optionValue)
-                isSelected = optionDefaultSelected || isGroupDefaultSelected
-              }
-
-              if (isSelected) {
-                selectedGroupOptionsMap[groupId].set(optionId, optionValue)
-              }
+              options.push({
+                optionId,
+                value,
+                defaultSelected: optionDefaultSelected
+              })
             }
           })
+
+          groups.push({
+            groupId,
+            selectableType,
+            selectedOptions,
+            defaultSelected,
+            options
+          })
         }
       })
+
+      return { pageId: page.props.id, groups }
     })
-    return selectedGroupOptionsMap
   }
 
   get selectedGroupOptionIdsArray() {
@@ -677,89 +627,49 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     _event: React.SyntheticEvent,
     { id, direction }: { id?: string; direction?: -1 | 1 }
   ) => {
-    const { rotateFocus } = this.props
-    const { highlightedOptionId } = this.state
-
-    // if id exists, use that, or calculate from direction
-    let highlightId = this.getPageChildById(id) ? id : undefined
-
-    if (!highlightId) {
-      if (!highlightedOptionId) {
-        // nothing highlighted yet, highlight first option
-        highlightId = this.activeOptionIds[0]
-      } else if (direction) {
-        // if it has direction, find next id based on it
-        const index = this.activeOptionIds.indexOf(highlightedOptionId)
-        const newIndex = index + direction
-
-        highlightId = index > -1 ? this.activeOptionIds[newIndex] : undefined
-
-        if (rotateFocus) {
-          const lastOptionsIndex = this.activeOptionIds.length - 1
-
-          if (newIndex < 0) {
-            highlightId = this.activeOptionIds[lastOptionsIndex]
-          }
-          if (newIndex > lastOptionsIndex) {
-            highlightId = this.activeOptionIds[0]
-          }
-        }
-      }
-    }
+    // the next-highlight index math lives in the framework-neutral behavior
+    // layer; the adapter validates the requested id and performs DOM focus
+    const highlightId = reduceHighlight({
+      activeOptionIds: this.activeOptionIds,
+      highlightedOptionId: this.state.highlightedOptionId,
+      requestedId: this.getPageChildById(id) ? id : undefined,
+      direction,
+      rotateFocus: !!this.props.rotateFocus
+    })
 
     if (highlightId) {
       // only highlight if id exists as a valid option
       this.setState({ highlightedOptionId: highlightId }, () => {
-        this.focusOption(highlightId!)
+        this.focusOption(highlightId)
       })
     }
   }
 
   // Navigates to the page and also returns the new and old pageIds
   public goToPage = (newPageId: string) => {
-    if (!newPageId) {
-      warn(false, `Cannot go to page because there was no page id provided.`)
-      return undefined
-    }
-
-    // TS complains that it cannot be true, but since it is an exposed method,
-    // it is better if we provide a warning for this case too
-    if (typeof newPageId !== 'string') {
-      warn(
-        false,
-        `Cannot go to page because parameter newPageId has to be string (valid page id). Current newPageId is "${typeof newPageId}".`
-      )
-      return undefined
-    }
+    // history math + validation live in the framework-neutral behavior layer
+    const result = reduceGoToPage(
+      [...this._pageHistory],
+      newPageId,
+      !!this.pageMap?.[newPageId]
+    )
 
-    if (!this.pageMap?.[newPageId]) {
-      warn(
-        false,
-        `Cannot go to page because page with id: "${newPageId}" doesn't exist.`
-      )
+    if ('warning' in result) {
+      warn(false, result.warning)
       return undefined
     }
 
-    // the last page id in the history is the current one,
-    // it will become the "prevPage"
-    const prevPageId = this._pageHistory[this._pageHistory.length - 1]
-    const idxInHistory = this._pageHistory.indexOf(newPageId)
-
-    if (idxInHistory < 0) {
-      // if it is not in the page history, we have to add it
-      this._pageHistory.push(newPageId)
-    } else {
-      // if it was already in the history, we go back to that page,
-      // and clear the rest from the history
-      this._pageHistory.splice(idxInHistory + 1, this._pageHistory.length - 1)
-    }
+    // mutate the existing history array in place to preserve its identity
+    // (it is `readonly` and held elsewhere via spread-copy)
+    this._pageHistory.length = 0
+    this._pageHistory.push(...result.history)
 
     this.setState({
-      activePageId: newPageId,
+      activePageId: result.newPageId,
       highlightedOptionId: undefined
     })
 
-    return { prevPageId, newPageId }
+    return { prevPageId: result.prevPageId, newPageId: result.newPageId }
   }
 
   public goToPreviousPage = () => {
@@ -793,47 +703,29 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     event: React.SyntheticEvent,
     selectedOption: MappedOption
   ) {
+    const { id: optionId, value } = selectedOption.props
+    const { id: groupId, selectableType } = selectedOption.groupProps!
+
     this.setState(
-      (oldState) => {
-        const { id: optionId, value } = selectedOption.props
-        const { id: groupId, selectableType } = selectedOption.groupProps!
-
-        let newState = new Map(oldState.selectedGroupOptionsMap[groupId])
-
-        if (
-          selectableType === 'multiple' &&
-          Boolean(oldState.selectedGroupOptionsMap[groupId]?.has(optionId))
-        ) {
-          // toggle off, if already selected
-          newState.delete(optionId)
-        } else {
-          if (selectableType === 'multiple') {
-            // "checkbox"
-            newState.set(optionId, value)
-          } else if (selectableType === 'single') {
-            // "radio"
-            newState = new Map()
-            newState.set(optionId, value)
-          }
-        }
-        return {
-          ...oldState,
-          selectedGroupOptionsMap: {
-            ...oldState.selectedGroupOptionsMap,
-            [groupId]: newState
-          }
-        }
-      },
+      (oldState) => ({
+        ...oldState,
+        // the single/multiple toggle reducer lives in the behavior layer
+        selectedGroupOptionsMap: reduceGroupSelection(
+          oldState.selectedGroupOptionsMap,
+          { groupId, optionId, value, selectableType: selectableType! }
+        )
+      }),
       () => {
-        const { value } = selectedOption.props
-        const { id: groupId, onSelect: groupOnSelect } =
-          selectedOption.groupProps!
+        const { onSelect: groupOnSelect } = selectedOption.groupProps!
 
         const { onSelect } = this.props
         const { groupProps, ...option } = selectedOption
-        const selectedOptionValuesInGroup = [
-          ...this.state.selectedGroupOptionsMap[groupId].values()
-        ]
+        // callbacks always receive the full array of selected values in the
+        // group (even for single-select) — the array contract lives in behavior
+        const selectedOptionValuesInGroup = selectedValuesInGroup(
+          this.state.selectedGroupOptionsMap,
+          groupId
+        )
 
         if (typeof groupOnSelect === 'function') {
           groupOnSelect(event, {
diff --git a/packages/ui-drilldown/src/Drilldown/v2/styles.ts b/packages/ui-drilldown/src/Drilldown/v2/styles.ts
index 48abd79f2b..6d8e662d8f 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/styles.ts
+++ b/packages/ui-drilldown/src/Drilldown/v2/styles.ts
@@ -23,26 +23,31 @@
  */
 
 import type { NewComponentTypes } from '@instructure/ui-themes'
-import type {
-  DrilldownProps,
-  DrilldownStyleProps,
-  DrilldownStyle
-} from './props'
+import type { DrilldownStyle } from './props'
+import type { DrilldownStyleInputs } from './types'
 
 /**
  * ---
  * private: true
  * ---
- * Generates the style object from the theme and provided additional information
+ * Generates the style object from the theme and provided additional information.
+ *
+ * The `state` parameter is typed as the narrow, framework-neutral
+ * `DrilldownStyleInputs` (the only field this function reads) rather than the
+ * React-flavored `DrilldownStyleProps`, and `_props` is left untyped, so
+ * non-React adapters (e.g. @instructure/ui-web-core's Lit Drilldown) can call
+ * this without importing React. The structurally-identical React types stay
+ * assignable, so existing call sites keep working unchanged.
+ *
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} _props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} _props the props of the component (unused by this generator)
+ * @param  {Object} state the style inputs the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Drilldown']>,
-  _props: DrilldownProps,
-  state: DrilldownStyleProps
+  _props: unknown,
+  state: DrilldownStyleInputs
 ): DrilldownStyle => {
   const { hasHighlightedOption } = state
 
diff --git a/packages/ui-drilldown/src/Drilldown/v2/types.ts b/packages/ui-drilldown/src/Drilldown/v2/types.ts
new file mode 100644
index 0000000000..42be729826
--- /dev/null
+++ b/packages/ui-drilldown/src/Drilldown/v2/types.ts
@@ -0,0 +1,117 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral primitives for the v2 Drilldown. This file has no runtime
+ * imports — every symbol is either a type or a `const` of plain data — so it
+ * can be consumed from non-React contexts (e.g. @instructure/ui-web-core's
+ * Lit-based Drilldown) without pulling React into the bundle.
+ *
+ * React-flavored composite types (the ones that pull in ReactNode, Renderable,
+ * WithStyleProps, View/Popover props, etc.) live in ./props.ts.
+ *
+ * The `Neutral*Data` shapes below are the boundary between the React-children
+ * walk and the pure selection/navigation logic in ./behavior.ts: each adapter
+ * is responsible for producing this plain data (React from `Children` +
+ * `matchComponentTypes`, Lit from its `pages` property), then the behavior
+ * reducers operate on it without any framework knowledge.
+ */
+
+export type DrilldownSelectableType = 'single' | 'multiple'
+
+// Structurally identical to the canonical `DrilldownOptionValue` in
+// ./DrilldownOption/props.ts, redeclared here so the neutral layer carries no
+// React import. The two are interchangeable via structural typing.
+export type DrilldownOptionValue = string | number | undefined
+
+// groupId -> (optionId -> optionValue) for every selectable group
+export type SelectedGroupOptionsMap = {
+  [groupId: string]: Map<string, DrilldownOptionValue>
+}
+
+// ---------------------------------------------------------------------------
+// Plain-data shapes — the React-children -> pure-data boundary
+// ---------------------------------------------------------------------------
+
+export type NeutralOptionData = {
+  optionId: string
+  value: DrilldownOptionValue
+  // per-option `defaultSelected` boolean (uncontrolled); `false` force-deselects
+  defaultSelected?: boolean
+}
+
+export type NeutralGroupData = {
+  groupId: string
+  selectableType?: DrilldownSelectableType
+  // controlled selection — when an array, it is the absolute source of truth
+  selectedOptions?: DrilldownOptionValue[]
+  // uncontrolled group-level defaults
+  defaultSelected?: DrilldownOptionValue[]
+  options: NeutralOptionData[]
+}
+
+export type NeutralPageData = {
+  pageId: string
+  groups: NeutralGroupData[]
+}
+
+// ---------------------------------------------------------------------------
+// Style inputs
+// ---------------------------------------------------------------------------
+
+// Narrow contract for what styles.ts actually reads. Keeps the style generator
+// decoupled from any React-flavored composite prop type.
+export type DrilldownStyleInputs = {
+  hasHighlightedOption: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Generic core props
+// ---------------------------------------------------------------------------
+
+// The framework-neutral subset of the Drilldown's own props. Generic on the
+// renderable / children types so each adapter can pin them:
+//   React:  DrilldownCorePropsOf<Renderable, ReactNode>
+//   Lit:    DrilldownCorePropsOf<unknown, unknown> (or TemplateResult)
+// Trigger / Popover / View render concerns intentionally live only in the
+// React props.ts, not here.
+export type DrilldownCorePropsOf<_TRenderable, TChildren = _TRenderable> = {
+  rootPageId: string
+  children?: TChildren
+  id?: string
+  label?: string
+  disabled?: boolean
+  rotateFocus?: boolean
+}
+
+export const allowedProps = [
+  'rootPageId',
+  'children',
+  'id',
+  'label',
+  'disabled',
+  'rotateFocus'
+] as const
+
+export type DrilldownAllowedPropKey = (typeof allowedProps)[number]
diff --git a/packages/ui-menu/src/Menu/__tests__/behavior.test.tsx b/packages/ui-menu/src/Menu/__tests__/behavior.test.tsx
new file mode 100644
index 0000000000..ee62b1e268
--- /dev/null
+++ b/packages/ui-menu/src/Menu/__tests__/behavior.test.tsx
@@ -0,0 +1,143 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest'
+
+import {
+  updateGroupSelection,
+  resolveItemSelected,
+  resolveGroupSelectedValues,
+  itemTypeForGroup,
+  nextFocusIndex,
+  computeInitialGroupSelection
+} from '../v2/behavior'
+
+// Exercises the framework-neutral selection + roving-focus helpers that both
+// the React Menu and the Lit <instui-menu> consume.
+
+describe('Menu behavior (framework-neutral)', () => {
+  describe('updateGroupSelection', () => {
+    it('radio: selecting replaces the whole selection', () => {
+      expect(updateGroupSelection(['a'], 'b', true, false)).toEqual(['b'])
+    })
+    it('radio: cannot deselect to empty (keeps previous)', () => {
+      expect(updateGroupSelection(['a'], 'a', false, false)).toEqual(['a'])
+    })
+    it('checkbox: adds when not present', () => {
+      expect(updateGroupSelection(['a'], 'b', true, true)).toEqual(['a', 'b'])
+    })
+    it('checkbox: removes when present', () => {
+      expect(updateGroupSelection(['a', 'b'], 'a', false, true)).toEqual(['b'])
+    })
+    it('checkbox: can deselect down to empty', () => {
+      expect(updateGroupSelection(['a'], 'a', false, true)).toEqual([])
+    })
+    it('does not mutate the input array', () => {
+      const input = ['a']
+      updateGroupSelection(input, 'b', true, true)
+      expect(input).toEqual(['a'])
+    })
+  })
+
+  describe('resolveItemSelected', () => {
+    it('controlled prop wins', () => {
+      expect(resolveItemSelected(true, false)).toBe(true)
+      expect(resolveItemSelected(false, true)).toBe(false)
+    })
+    it('falls back to uncontrolled state when prop undefined', () => {
+      expect(resolveItemSelected(undefined, true)).toBe(true)
+      expect(resolveItemSelected(undefined, undefined)).toBe(false)
+    })
+  })
+
+  describe('resolveGroupSelectedValues', () => {
+    it('returns [] when both undefined', () => {
+      expect(resolveGroupSelectedValues(undefined, undefined)).toEqual([])
+    })
+    it('controlled wins (copy)', () => {
+      const controlled = ['a']
+      const out = resolveGroupSelectedValues(controlled, ['b'])
+      expect(out).toEqual(['a'])
+      expect(out).not.toBe(controlled)
+    })
+    it('falls back to state (copy)', () => {
+      expect(resolveGroupSelectedValues(undefined, ['x', 'y'])).toEqual([
+        'x',
+        'y'
+      ])
+    })
+  })
+
+  describe('itemTypeForGroup', () => {
+    it('checkbox when allowMultiple, radio otherwise', () => {
+      expect(itemTypeForGroup(true)).toBe('checkbox')
+      expect(itemTypeForGroup(false)).toBe('radio')
+      expect(itemTypeForGroup(undefined)).toBe('radio')
+    })
+  })
+
+  describe('nextFocusIndex', () => {
+    it('moves forward and wraps to start', () => {
+      expect(nextFocusIndex(0, 3, 1)).toBe(1)
+      expect(nextFocusIndex(2, 3, 1)).toBe(0)
+    })
+    it('moves backward and wraps to end', () => {
+      expect(nextFocusIndex(0, 3, -1)).toBe(2)
+    })
+    it('unfocused (-1) + up wraps to the last item (the quirk)', () => {
+      // step<0 forces current=0, then (0 + 3 - 1) % 3 = 2
+      expect(nextFocusIndex(-1, 3, -1)).toBe(2)
+    })
+    it('unfocused (-1) + down lands on the first item', () => {
+      // current stays -1, (-1 + 3 + 1) % 3 = 0
+      expect(nextFocusIndex(-1, 3, 1)).toBe(0)
+    })
+    it('returns null when there are no items', () => {
+      expect(nextFocusIndex(0, 0, 1)).toBeNull()
+    })
+  })
+
+  describe('computeInitialGroupSelection', () => {
+    const items = [
+      { id: 'a', label: 'A', value: 'a' },
+      { id: 'b', label: 'B', value: 'b', defaultSelected: true },
+      { id: 'c', label: 'C', value: 'c', defaultSelected: true }
+    ]
+    it('group-level defaultSelected wins (radio takes first)', () => {
+      expect(computeInitialGroupSelection(items, false, ['c'])).toEqual(['c'])
+    })
+    it('group-level defaultSelected (multiple keeps all)', () => {
+      expect(computeInitialGroupSelection(items, true, ['a', 'b'])).toEqual([
+        'a',
+        'b'
+      ])
+    })
+    it('radio: first defaultSelected item only', () => {
+      expect(computeInitialGroupSelection(items, false)).toEqual(['b'])
+    })
+    it('checkbox: all defaultSelected items', () => {
+      expect(computeInitialGroupSelection(items, true)).toEqual(['b', 'c'])
+    })
+  })
+})
diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx b/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx
index b7cd510447..684e892015 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx
+++ b/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx
@@ -40,6 +40,8 @@ import { MenuContext } from '../../../utils/v1/MenuContext'
 
 import generateStyle from './styles'
 
+import { resolveItemSelected } from '../behavior'
+
 import { allowedProps } from './props'
 import type { MenuItemProps, MenuItemState } from './props'
 
@@ -212,9 +214,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
   }
 
   get selected() {
-    return typeof this.props.selected === 'undefined'
-      ? this.state.selected
-      : this.props.selected
+    return resolveItemSelected(this.props.selected, this.state.selected)
   }
 
   get focused() {
diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts b/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts
index e175d4821e..8c8c1c2d1b 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts
+++ b/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts
@@ -23,7 +23,8 @@
  */
 
 import type { NewComponentTypes } from '@instructure/ui-themes'
-import type { MenuItemProps, MenuItemStyle } from './props'
+import type { MenuItemStyle } from './props'
+import type { MenuItemStyleInputs } from '../types'
 
 /**
  * ---
@@ -37,7 +38,7 @@ import type { MenuItemProps, MenuItemStyle } from './props'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['MenuItem']>,
-  props: MenuItemProps
+  props: MenuItemStyleInputs
 ): MenuItemStyle => {
   const { type, disabled, selected } = props
 
diff --git a/packages/ui-menu/src/Menu/v2/MenuItemGroup/index.tsx b/packages/ui-menu/src/Menu/v2/MenuItemGroup/index.tsx
index 451b3a6a9a..0d2f15c5c4 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItemGroup/index.tsx
+++ b/packages/ui-menu/src/Menu/v2/MenuItemGroup/index.tsx
@@ -40,6 +40,12 @@ import type { MenuSeparatorProps } from '../MenuItemSeparator/props'
 
 import generateStyle from './styles'
 
+import {
+  updateGroupSelection,
+  resolveGroupSelectedValues,
+  itemTypeForGroup
+} from '../behavior'
+
 import { allowedProps } from './props'
 import type { MenuGroupProps, MenuGroupState } from './props'
 
@@ -123,18 +129,13 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
     selected: MenuItemProps['selected'],
     item: MenuItem
   ) => {
-    const { allowMultiple } = this.props
-    let updated = allowMultiple ? [...items] : []
-    const location = updated.indexOf(value!)
-
-    if (selected === true && location < 0) {
-      updated.push(value!)
-    } else if (selected === false && location !== -1) {
-      updated.splice(location, 1)
-    } else if (!allowMultiple && updated.length < 1) {
-      // don't allow nothing selected if it's not allowMultiple/checkbox
-      updated = [...items]
-    }
+    // the value-array reducer lives in the framework-neutral behavior layer
+    const updated = updateGroupSelection(
+      items,
+      value!,
+      selected!,
+      !!this.props.allowMultiple
+    )
 
     if (typeof this.props.onSelect === 'function') {
       this.props.onSelect(e, updated, selected, item)
@@ -166,16 +167,7 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
   }
 
   get selected() {
-    if (
-      typeof this.props.selected === 'undefined' &&
-      typeof this.state.selected === 'undefined'
-    ) {
-      return []
-    } else {
-      return typeof this.props.selected === 'undefined'
-        ? [...this.state.selected]
-        : [...this.props.selected]
-    }
+    return resolveGroupSelectedValues(this.props.selected, this.state.selected)
   }
 
   renderLabel() {
@@ -207,7 +199,7 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
           controls,
           value,
           children: child.props.children,
-          type: allowMultiple ? 'checkbox' : 'radio',
+          type: itemTypeForGroup(allowMultiple),
           ref: this.props.itemRef,
           disabled: disabled || child.props.disabled,
           selected: this.selected.indexOf(value) > -1,
diff --git a/packages/ui-menu/src/Menu/v2/behavior.ts b/packages/ui-menu/src/Menu/v2/behavior.ts
new file mode 100644
index 0000000000..6d703a1186
--- /dev/null
+++ b/packages/ui-menu/src/Menu/v2/behavior.ts
@@ -0,0 +1,130 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral behavior for the v2 Menu. No React, no JSX, no runtime
+ * imports. Pure helpers for the (distributed) selection model and the DOM-focus
+ * roving math. The React adapter and the Lit adapter (@instructure/ui-web-core)
+ * both wire these into their own state + lifecycle.
+ *
+ * What lives here:  the value-array reducer, the controlled/uncontrolled
+ *                   resolvers, the radio/checkbox type, the roving-index math.
+ * What does NOT:    firing onSelect, setState/requestUpdate, MenuContext
+ *                   registration, DOM .focus(), rendering.
+ *
+ * Note: Menu's selection is distributed (an array per group, a boolean per
+ * standalone item), NOT a centralized map like Drilldown. These helpers reflect
+ * that — there is intentionally no single selection reducer.
+ */
+
+import type { MenuGroupSelection, NeutralMenuItem } from './types'
+
+// Pure core of MenuItemGroup.updateSelected (minus the onSelect fire):
+//   - radio (!allowMultiple): start from [] then set the one value
+//   - checkbox (allowMultiple): toggle the value in/out
+//   - radio cannot deselect to empty: keep the previous selection
+export const updateGroupSelection = (
+  items: MenuGroupSelection,
+  value: string | number,
+  selected: boolean,
+  allowMultiple: boolean
+): MenuGroupSelection => {
+  let updated = allowMultiple ? [...items] : []
+  const location = updated.indexOf(value)
+
+  if (selected === true && location < 0) {
+    updated.push(value)
+  } else if (selected === false && location !== -1) {
+    updated.splice(location, 1)
+  } else if (!allowMultiple && updated.length < 1) {
+    // don't allow nothing selected if it's not allowMultiple/checkbox
+    updated = [...items]
+  }
+
+  return updated
+}
+
+// MenuItem.get selected: controlled prop wins, else the uncontrolled state.
+export const resolveItemSelected = (
+  controlled: boolean | undefined,
+  stateSelected: boolean | undefined
+): boolean =>
+  typeof controlled === 'undefined' ? !!stateSelected : !!controlled
+
+// MenuItemGroup.get selected: controlled wins; either branch returns a copy.
+export const resolveGroupSelectedValues = (
+  controlled: MenuGroupSelection | undefined,
+  stateSelected: MenuGroupSelection | undefined
+): MenuGroupSelection => {
+  if (
+    typeof controlled === 'undefined' &&
+    typeof stateSelected === 'undefined'
+  ) {
+    return []
+  }
+  return typeof controlled === 'undefined'
+    ? [...(stateSelected as MenuGroupSelection)]
+    : [...controlled]
+}
+
+// The group decides its items' role/type.
+export const itemTypeForGroup = (
+  allowMultiple?: boolean
+): 'checkbox' | 'radio' => (allowMultiple ? 'checkbox' : 'radio')
+
+// Roving-focus index math from Menu.moveFocus. Returns the next index, or null
+// when there are no items. Preserves the quirk: while nothing is focused
+// (currentIndex < 0), pressing up forces current=0 → wraps to the LAST item,
+// while pressing down lands on the first item.
+export const nextFocusIndex = (
+  currentIndex: number,
+  count: number,
+  step: number
+): number | null => {
+  if (count <= 0) return null
+  const current = currentIndex < 0 && step < 0 ? 0 : currentIndex
+  return (current + count + step) % count
+}
+
+// Neutral form of MenuItemGroup.selectedFromChildren, for the Lit producer
+// (which has plain `items` data). The React adapter keeps its JSX-walking
+// version. Returns the initial selected-values array for an uncontrolled group.
+export const computeInitialGroupSelection = (
+  items: NeutralMenuItem[],
+  allowMultiple: boolean | undefined,
+  defaultSelected?: MenuGroupSelection
+): MenuGroupSelection => {
+  if (defaultSelected && defaultSelected.length > 0) {
+    return allowMultiple ? [...defaultSelected] : [defaultSelected[0]]
+  }
+
+  const selected: MenuGroupSelection = []
+  items.forEach((item, index) => {
+    const value = item.value ?? index
+    if ((selected.length === 0 || allowMultiple) && item.defaultSelected) {
+      selected.push(value)
+    }
+  })
+  return selected
+}
diff --git a/packages/ui-menu/src/Menu/v2/index.tsx b/packages/ui-menu/src/Menu/v2/index.tsx
index 67089f1eeb..5951126e8c 100644
--- a/packages/ui-menu/src/Menu/v2/index.tsx
+++ b/packages/ui-menu/src/Menu/v2/index.tsx
@@ -45,6 +45,8 @@ import { withStyleNew } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
+import { nextFocusIndex } from './behavior'
+
 import { allowedProps } from './props'
 import type { MenuProps } from './props'
 
@@ -283,14 +285,14 @@ class Menu extends Component<MenuProps> {
 
   moveFocus(step: number) {
     const count = this.menuItems ? this.menuItems.length : 0
+    // roving-index math lives in the framework-neutral behavior layer
+    const nextIndex = nextFocusIndex(this.focusedIndex, count, step)
 
-    if (count <= 0) {
+    if (nextIndex === null) {
       return
     }
 
-    const current = this.focusedIndex < 0 && step < 0 ? 0 : this.focusedIndex
-
-    const nextItem = this.menuItems[(current + count + step) % count]
+    const nextItem = this.menuItems[nextIndex]
 
     error(
       typeof nextItem !== 'undefined' && typeof nextItem.focus !== 'undefined',
diff --git a/packages/ui-menu/src/Menu/v2/styles.ts b/packages/ui-menu/src/Menu/v2/styles.ts
index 8af438da7f..96c6f6135b 100644
--- a/packages/ui-menu/src/Menu/v2/styles.ts
+++ b/packages/ui-menu/src/Menu/v2/styles.ts
@@ -23,7 +23,8 @@
  */
 
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { MenuStyle, MenuProps } from './props'
+import type { MenuStyle } from './props'
+import type { MenuStyleInputs } from './types'
 import { calcFocusOutlineStyles } from '@instructure/emotion'
 
 /**
@@ -38,7 +39,7 @@ import { calcFocusOutlineStyles } from '@instructure/emotion'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Menu']>,
-  props: MenuProps,
+  props: MenuStyleInputs,
   sharedTokens: SharedTokens
 ): MenuStyle => {
   const maxHeight = props.maxHeight
diff --git a/packages/ui-menu/src/Menu/v2/types.ts b/packages/ui-menu/src/Menu/v2/types.ts
new file mode 100644
index 0000000000..9dd440ff0f
--- /dev/null
+++ b/packages/ui-menu/src/Menu/v2/types.ts
@@ -0,0 +1,123 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral primitives for the v2 Menu. No runtime imports — every
+ * symbol is a type or a `const` of plain data — so non-React contexts (e.g.
+ * @instructure/ui-web-core's Lit Menu) can consume it without pulling React.
+ *
+ * The selection + roving-focus helpers that operate on these types live in
+ * ./behavior.ts. React-flavored composite types live in ./props.ts.
+ *
+ * Menu's selection is intentionally DISTRIBUTED (a value array per group +
+ * a boolean per standalone item), not a single centralized map like Drilldown —
+ * the `Neutral*` shapes + behavior helpers reflect that.
+ */
+
+export type MenuItemType = 'button' | 'checkbox' | 'radio' | 'flyout'
+export type MenuItemValue = string | number | undefined
+
+// The selected-values array a selectable group tracks.
+export type MenuGroupSelection = (string | number)[]
+
+// ---------------------------------------------------------------------------
+// Plain-data `items`-config shapes — the children/markup -> pure-data boundary.
+// Each adapter produces these (React from JSX children, Lit from its `items`
+// property); the behavior helpers + Lit renderer consume them.
+// ---------------------------------------------------------------------------
+
+export type NeutralMenuItem = {
+  id: string
+  label: string
+  type?: Exclude<MenuItemType, 'flyout'>
+  value?: string | number
+  disabled?: boolean
+  defaultSelected?: boolean
+  href?: string
+  // presence of `items` makes this a flyout submenu trigger
+  items?: NeutralMenuNode[]
+}
+
+export type NeutralMenuGroup = {
+  groupId: string
+  label?: string
+  allowMultiple?: boolean
+  // controlled selection — wins over defaults
+  selected?: MenuGroupSelection
+  // uncontrolled group-level defaults
+  defaultSelected?: MenuGroupSelection
+  items: NeutralMenuItem[]
+}
+
+export type NeutralMenuSeparator = {
+  separator: true
+  id: string
+}
+
+export type NeutralMenuNode =
+  | NeutralMenuItem
+  | NeutralMenuGroup
+  | NeutralMenuSeparator
+
+// ---------------------------------------------------------------------------
+// Narrow style inputs (only what each styles.ts reads off props)
+// ---------------------------------------------------------------------------
+
+export type MenuStyleInputs = {
+  maxHeight?: string | number
+}
+
+export type MenuItemStyleInputs = {
+  type?: MenuItemType
+  disabled?: boolean
+  selected?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Generic core props
+// ---------------------------------------------------------------------------
+
+export type MenuCorePropsOf<TChildren> = {
+  children?: TChildren
+  label?: string
+  disabled?: boolean
+  shouldHideOnSelect?: boolean
+  placement?: string
+  offsetX?: string | number
+  offsetY?: string | number
+  withArrow?: boolean
+}
+
+export const allowedProps = [
+  'children',
+  'label',
+  'disabled',
+  'shouldHideOnSelect',
+  'placement',
+  'offsetX',
+  'offsetY',
+  'withArrow'
+] as const
+
+export type MenuAllowedPropKey = (typeof allowedProps)[number]
diff --git a/packages/ui-popover/src/Popover/__tests__/behavior.test.tsx b/packages/ui-popover/src/Popover/__tests__/behavior.test.tsx
new file mode 100644
index 0000000000..f99c2f7567
--- /dev/null
+++ b/packages/ui-popover/src/Popover/__tests__/behavior.test.tsx
@@ -0,0 +1,208 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest'
+
+import {
+  resolveShown,
+  resolveShowIntent,
+  resolveHideIntent,
+  resolveToggleIntent,
+  resolveActiveTriggers,
+  isTooltip,
+  resolvePlacement
+} from '../v2/behavior'
+import type { PopoverPlacement } from '../v2/types'
+
+// Exercises the framework-neutral show/hide state machine that both the React
+// Popover and the Lit <instui-popover> consume.
+
+describe('Popover behavior (framework-neutral)', () => {
+  describe('resolveShown', () => {
+    it('uses internal state when uncontrolled (isShowingContent undefined)', () => {
+      expect(resolveShown(undefined, true)).toBe(true)
+      expect(resolveShown(undefined, false)).toBe(false)
+      expect(resolveShown(undefined, undefined)).toBe(false)
+    })
+    it('uses the controlled prop when defined', () => {
+      expect(resolveShown(true, false)).toBe(true)
+      expect(resolveShown(false, true)).toBe(false)
+    })
+  })
+
+  describe('resolveShowIntent', () => {
+    it('uncontrolled: set state true, fire show', () => {
+      expect(resolveShowIntent(false)).toEqual({
+        setStateShown: true,
+        fireShow: true
+      })
+    })
+    it('controlled: do not touch state, fire show', () => {
+      expect(resolveShowIntent(true)).toEqual({
+        setStateShown: null,
+        fireShow: true
+      })
+    })
+  })
+
+  describe('resolveHideIntent (the timing-critical matrix)', () => {
+    it('uncontrolled + was showing: set state false, fire hide', () => {
+      expect(
+        resolveHideIntent({ isControlled: false, currentShown: true })
+      ).toEqual({ setStateShown: false, fireHide: true })
+    })
+    it('uncontrolled + was hidden: set state false, do NOT fire hide', () => {
+      expect(
+        resolveHideIntent({ isControlled: false, currentShown: false })
+      ).toEqual({ setStateShown: false, fireHide: false })
+    })
+    it('controlled + showing: do not touch state, fire hide', () => {
+      expect(
+        resolveHideIntent({ isControlled: true, currentShown: true })
+      ).toEqual({ setStateShown: null, fireHide: true })
+    })
+    it('controlled + hidden: do not touch state, do NOT fire hide', () => {
+      expect(
+        resolveHideIntent({ isControlled: true, currentShown: false })
+      ).toEqual({ setStateShown: null, fireHide: false })
+    })
+  })
+
+  describe('resolveToggleIntent', () => {
+    it('shown -> hide, hidden -> show', () => {
+      expect(resolveToggleIntent(true)).toBe('hide')
+      expect(resolveToggleIntent(false)).toBe('show')
+    })
+  })
+
+  describe('resolveActiveTriggers', () => {
+    it('maps a single trigger string', () => {
+      expect(resolveActiveTriggers('click')).toMatchObject({
+        click: true,
+        hover: false,
+        focus: false
+      })
+    })
+    it('maps an array of triggers', () => {
+      expect(resolveActiveTriggers(['click', 'focus'])).toMatchObject({
+        click: true,
+        hover: false,
+        focus: true
+      })
+    })
+    it('returns a warning only for hover-only', () => {
+      expect(resolveActiveTriggers('hover').warning).toContain('"hover"')
+      expect(resolveActiveTriggers(['hover', 'focus']).warning).toBeUndefined()
+      expect(resolveActiveTriggers('click').warning).toBeUndefined()
+    })
+    it('handles undefined', () => {
+      expect(resolveActiveTriggers(undefined)).toMatchObject({
+        click: false,
+        hover: false,
+        focus: false
+      })
+    })
+  })
+
+  describe('isTooltip', () => {
+    it('true only when offscreen + no focus management', () => {
+      expect(
+        isTooltip({
+          shouldRenderOffscreen: true,
+          shouldReturnFocus: false,
+          shouldContainFocus: false,
+          shouldFocusContentOnTriggerBlur: false
+        })
+      ).toBe(true)
+    })
+    it('false when any focus management is on, or not offscreen', () => {
+      expect(
+        isTooltip({ shouldRenderOffscreen: true, shouldContainFocus: true })
+      ).toBe(false)
+      expect(
+        isTooltip({ shouldRenderOffscreen: true, shouldReturnFocus: true })
+      ).toBe(false)
+      expect(
+        isTooltip({
+          shouldRenderOffscreen: true,
+          shouldFocusContentOnTriggerBlur: true
+        })
+      ).toBe(false)
+      expect(isTooltip({ shouldRenderOffscreen: false })).toBe(false)
+    })
+  })
+
+  describe('resolvePlacement', () => {
+    // a stub mirror that flips start<->end horizontally
+    const mirror = (p: PopoverPlacement): PopoverPlacement =>
+      (p === 'top start'
+        ? 'top end'
+        : p === 'top end'
+          ? 'top start'
+          : p) as PopoverPlacement
+
+    it('passes placement through in LTR', () => {
+      expect(
+        resolvePlacement(
+          { placement: 'top start', isRtl: false, shown: true },
+          mirror
+        )
+      ).toBe('top start')
+    })
+    it('mirrors horizontally in RTL', () => {
+      expect(
+        resolvePlacement(
+          { placement: 'top start', isRtl: true, shown: true },
+          mirror
+        )
+      ).toBe('top end')
+    })
+    it('forces offscreen when hidden + shouldRenderOffscreen', () => {
+      expect(
+        resolvePlacement(
+          {
+            placement: 'top start',
+            isRtl: false,
+            shown: false,
+            shouldRenderOffscreen: true
+          },
+          mirror
+        )
+      ).toBe('offscreen')
+    })
+    it('keeps placement when shown even with shouldRenderOffscreen', () => {
+      expect(
+        resolvePlacement(
+          {
+            placement: 'bottom center',
+            isRtl: false,
+            shown: true,
+            shouldRenderOffscreen: true
+          },
+          mirror
+        )
+      ).toBe('bottom center')
+    })
+  })
+})
diff --git a/packages/ui-popover/src/Popover/v2/behavior.ts b/packages/ui-popover/src/Popover/v2/behavior.ts
new file mode 100644
index 0000000000..02a401b01d
--- /dev/null
+++ b/packages/ui-popover/src/Popover/v2/behavior.ts
@@ -0,0 +1,131 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral behavior for the v2 Popover. No React, no JSX, no runtime
+ * imports. Pure helpers describing the controlled/uncontrolled show/hide state
+ * machine, trigger-interaction mapping, tooltip detection and RTL/offscreen
+ * placement resolution. The React adapter (./index.tsx) and the Lit adapter
+ * (@instructure/ui-web-core) both wire these into their own state + lifecycle.
+ *
+ * What lives here:  the decisions (set state? fire callback? which triggers?).
+ * What does NOT:     calling setState/requestUpdate, rendering, DOM focus,
+ *                    positioning (delegated to @instructure/ui-position),
+ *                    focus management (delegated to FocusRegion), logging.
+ */
+
+import type { PopoverPlacement, PopoverTriggerProp } from './types'
+
+// The active visibility, given the controlled prop and the uncontrolled state.
+// Mirrors the React `shown` getter (index.tsx:316-320).
+export const resolveShown = (
+  isShowingContent: boolean | undefined,
+  stateShown: boolean | undefined
+): boolean =>
+  typeof isShowingContent === 'undefined' ? !!stateShown : isShowingContent
+
+// `setStateShown: null` means "don't touch internal state" (controlled mode).
+export type ShowHideIntent = {
+  setStateShown: boolean | null
+  fireShow?: boolean
+  fireHide?: boolean
+}
+
+// Mirrors `show` (index.tsx:326-331): uncontrolled flips state to true; the
+// callback always fires.
+export const resolveShowIntent = (isControlled: boolean): ShowHideIntent => ({
+  setStateShown: isControlled ? null : true,
+  fireShow: true
+})
+
+// Mirrors `hide` (index.tsx:333-348). `currentShown` is the PRE-transition
+// visibility (React reads it from the functional setState snapshot; the Lit
+// adapter reads `this.shown` synchronously before mutating). The callback fires
+// only when the popover was actually showing.
+export const resolveHideIntent = (args: {
+  isControlled: boolean
+  currentShown: boolean
+}): ShowHideIntent => {
+  const { isControlled, currentShown } = args
+  return {
+    setStateShown: isControlled ? null : false,
+    fireHide: currentShown
+  }
+}
+
+// Mirrors `toggle` (index.tsx:350-356).
+export const resolveToggleIntent = (currentShown: boolean): 'show' | 'hide' =>
+  currentShown ? 'hide' : 'show'
+
+// Which interaction handlers the `on` prop activates (index.tsx:455-476). The
+// hover-only warning is returned (not logged) so the adapter owns the sink.
+export const resolveActiveTriggers = (
+  on: PopoverTriggerProp | undefined
+): { click: boolean; hover: boolean; focus: boolean; warning?: string } => {
+  const has = (t: 'click' | 'hover' | 'focus') => !!on && on.indexOf(t) > -1
+  return {
+    click: has('click'),
+    hover: has('hover'),
+    focus: has('focus'),
+    warning:
+      on === 'hover'
+        ? '[Popover] Specifying only the `"hover"` trigger limits the visibility' +
+          ' of the Popover to just mouse users. Consider also including the `"focus"` trigger ' +
+          'so that touch and keyboard only users can see the Popover content as well.'
+        : undefined
+  }
+}
+
+// Tooltip mode = offscreen-rendered with no focus management (index.tsx:171-178).
+export const isTooltip = (p: {
+  shouldRenderOffscreen?: boolean
+  shouldReturnFocus?: boolean
+  shouldContainFocus?: boolean
+  shouldFocusContentOnTriggerBlur?: boolean
+}): boolean =>
+  !!p.shouldRenderOffscreen &&
+  !p.shouldReturnFocus &&
+  !p.shouldContainFocus &&
+  !p.shouldFocusContentOnTriggerBlur
+
+// Resolves the effective placement (index.tsx:286-297): mirror horizontally for
+// RTL, then force 'offscreen' while hidden if shouldRenderOffscreen. The mirror
+// fn is injected (a binding of mirrorHorizontalPlacement) so this stays free of
+// ui-position runtime imports.
+export const resolvePlacement = (
+  args: {
+    placement?: PopoverPlacement
+    isRtl: boolean
+    shown: boolean
+    shouldRenderOffscreen?: boolean
+  },
+  mirror: (placement: PopoverPlacement) => PopoverPlacement
+): PopoverPlacement | undefined => {
+  const { placement, isRtl, shown, shouldRenderOffscreen } = args
+  let resolved = placement
+  if (isRtl && resolved) {
+    resolved = mirror(resolved)
+  }
+  return !shown && shouldRenderOffscreen ? 'offscreen' : resolved
+}
diff --git a/packages/ui-popover/src/Popover/v2/index.tsx b/packages/ui-popover/src/Popover/v2/index.tsx
index 37c233f81b..57c804e4d1 100644
--- a/packages/ui-popover/src/Popover/v2/index.tsx
+++ b/packages/ui-popover/src/Popover/v2/index.tsx
@@ -63,6 +63,16 @@ import { withStyleNew } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
+import {
+  resolveShown,
+  resolveShowIntent,
+  resolveHideIntent,
+  resolveToggleIntent,
+  resolveActiveTriggers,
+  isTooltip,
+  resolvePlacement
+} from './behavior'
+
 import type { PopoverProps, PopoverState } from './props'
 import { allowedProps } from './props'
 import type { Renderable } from '@instructure/shared-types'
@@ -169,12 +179,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   get isTooltip() {
-    return (
-      this.props.shouldRenderOffscreen &&
-      !this.props.shouldReturnFocus &&
-      !this.props.shouldContainFocus &&
-      !this.props.shouldFocusContentOnTriggerBlur
-    )
+    return isTooltip(this.props)
   }
 
   componentDidMount() {
@@ -284,16 +289,16 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   get placement(): PopoverProps['placement'] {
-    let { placement } = this.props
-    const { dir } = this.props
-    const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl
-    if (isRtl) {
-      placement = mirrorHorizontalPlacement(placement!, ' ')
-    }
-
-    return !this.shown && this.props.shouldRenderOffscreen
-      ? 'offscreen'
-      : placement
+    const isRtl = this.props.dir === textDirectionContextConsumer.DIRECTION.rtl
+    return resolvePlacement(
+      {
+        placement: this.props.placement,
+        isRtl,
+        shown: !!this.shown,
+        shouldRenderOffscreen: this.props.shouldRenderOffscreen
+      },
+      (p) => mirrorHorizontalPlacement(p, ' ')
+    )
   }
 
   get positionProps(): Partial<PositionProps> {
@@ -314,9 +319,10 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   get shown() {
-    return typeof this.props.isShowingContent === 'undefined'
-      ? this.state.isShowingContent
-      : this.props.isShowingContent
+    return resolveShown(
+      this.props.isShowingContent,
+      this.state.isShowingContent
+    )
   }
 
   get defaultFocusElement() {
@@ -324,34 +330,52 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   show = (event: React.UIEvent | React.FocusEvent) => {
-    if (typeof this.props.isShowingContent === 'undefined') {
-      this.setState({ isShowingContent: true })
+    // controlled/uncontrolled decision lives in the framework-neutral behavior
+    const intent = resolveShowIntent(
+      typeof this.props.isShowingContent !== 'undefined'
+    )
+    if (intent.setStateShown !== null) {
+      this.setState({ isShowingContent: intent.setStateShown })
+    }
+    if (intent.fireShow) {
+      this.props.onShowContent?.(event)
     }
-    this.props.onShowContent?.(event)
   }
 
   hide = (event: React.UIEvent | React.FocusEvent, documentClick = false) => {
     const { onHideContent, isShowingContent } = this.props
-
-    if (typeof isShowingContent === 'undefined') {
-      // uncontrolled, set state, fire callbacks
-      this.setState(({ isShowingContent }) => {
-        if (isShowingContent) {
+    const isControlled = typeof isShowingContent !== 'undefined'
+
+    if (!isControlled) {
+      // uncontrolled, set state, fire callbacks — keep firing inside the
+      // functional setState so timing matches (reads the committed snapshot)
+      this.setState(({ isShowingContent: stateShown }) => {
+        const intent = resolveHideIntent({
+          isControlled: false,
+          currentShown: !!stateShown
+        })
+        if (intent.fireHide) {
           onHideContent?.(event, { documentClick })
         }
-        return { isShowingContent: false }
+        return { isShowingContent: intent.setStateShown as boolean }
+      })
+    } else {
+      // controlled, fire callback only when it was showing
+      const intent = resolveHideIntent({
+        isControlled: true,
+        currentShown: !!isShowingContent
       })
-    } else if (isShowingContent) {
-      // controlled, fire callback
-      onHideContent?.(event, { documentClick })
+      if (intent.fireHide) {
+        onHideContent?.(event, { documentClick })
+      }
     }
   }
 
   toggle = (event: React.MouseEvent) => {
-    if (this.shown) {
-      this.hide(event)
-    } else {
+    if (resolveToggleIntent(!!this.shown) === 'show') {
       this.show(event)
+    } else {
+      this.hide(event)
     }
   }
 
@@ -452,13 +476,16 @@ class Popover extends Component<PopoverProps, PopoverState> {
       let onMouseOver: React.MouseEventHandler | undefined = undefined
       let expanded: string | undefined
 
-      if (on && on.indexOf('click') > -1) {
+      // which interaction handlers to attach is decided in the behavior layer
+      const triggers = resolveActiveTriggers(on)
+
+      if (triggers.click) {
         onClick = (event: React.MouseEvent) => {
           this.toggle(event)
         }
       }
 
-      if (on && on.indexOf('hover') > -1) {
+      if (triggers.hover) {
         error(
           !(on === 'hover'),
           '[Popover] Specifying only the `"hover"` trigger limits the visibility' +
@@ -469,7 +496,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
         onMouseOut = this._handleMouseOut
       }
 
-      if (on && on.indexOf('focus') > -1) {
+      if (triggers.focus) {
         onFocus = (event: React.FocusEvent) => {
           this.show(event)
         }
@@ -520,9 +547,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
     let content = callRenderProp(this.props.children)
 
     if (this.props.shouldScrollContent) {
-      content = (
-        <div css={this.props.styles?.scrollContainer}>{content}</div>
-      )
+      content = <div css={this.props.styles?.scrollContainer}>{content}</div>
     }
 
     if (this.shown && !this.isTooltip) {
diff --git a/packages/ui-popover/src/Popover/v2/styles.ts b/packages/ui-popover/src/Popover/v2/styles.ts
index 38fc40442a..3f7884de61 100644
--- a/packages/ui-popover/src/Popover/v2/styles.ts
+++ b/packages/ui-popover/src/Popover/v2/styles.ts
@@ -22,20 +22,26 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { PopoverStyle } from './props'
+import type { PopoverStyleInputs } from './types'
 
 /**
  * ---
  * private: true
  * ---
- * Generates the style object from the theme and provided additional information
+ * Generates the style object from the theme and provided additional information.
+ *
+ * `componentTheme` is typed as the narrow, framework-neutral `PopoverStyleInputs`
+ * (the only fields this function reads) rather than the React-flavored
+ * `ReturnType<NewComponentTypes['Popover']>`, so non-React adapters (e.g.
+ * @instructure/ui-web-core's Lit Popover) can call this without importing React.
+ * The full React theme stays structurally assignable, so existing call sites
+ * keep working unchanged.
+ *
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['Popover']>
-): PopoverStyle => {
+const generateStyle = (componentTheme: PopoverStyleInputs): PopoverStyle => {
   return {
     borderColor: componentTheme.borderColor,
     borderRadius: componentTheme.borderRadius,
diff --git a/packages/ui-popover/src/Popover/v2/types.ts b/packages/ui-popover/src/Popover/v2/types.ts
new file mode 100644
index 0000000000..3c134477b0
--- /dev/null
+++ b/packages/ui-popover/src/Popover/v2/types.ts
@@ -0,0 +1,110 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Framework-neutral primitives for the v2 Popover. This file has no runtime
+ * imports — every symbol is a type or a `const` of plain data — so it can be
+ * consumed from non-React contexts (e.g. @instructure/ui-web-core's Lit-based
+ * Popover) without pulling React into the bundle.
+ *
+ * The show/hide state machine + trigger/placement helpers that operate on these
+ * types live in ./behavior.ts. React-flavored composite types (ReactNode,
+ * Renderable, WithStyleProps, Position/Dialog props, etc.) live in ./props.ts.
+ */
+
+// `PlacementPropValues` is a type-only import (erased at runtime) from the
+// already-React-free ui-position package; reusing it avoids drift with the
+// positioning util the adapters delegate to.
+import type { PlacementPropValues } from '@instructure/ui-position'
+import type { StyleObject } from '@instructure/emotion'
+
+export type PopoverPlacement = PlacementPropValues
+
+export type PopoverTrigger = 'click' | 'hover' | 'focus'
+export type PopoverTriggerProp = PopoverTrigger | PopoverTrigger[]
+
+export type PopoverColor = 'primary' | 'primary-inverse'
+
+// Narrow contract for what styles.ts actually reads off the component theme.
+// Keeps the style generator decoupled from any React-flavored theme type.
+export type PopoverStyleInputs = {
+  borderColor: string
+  borderRadius: string
+}
+
+// Emotion-style object returned by generateStyle. `StyleObject` is a type-only
+// import so this stays runtime-import-free.
+export type PopoverStyle = {
+  borderRadius: string
+  borderColor: string
+  scrollContainer: StyleObject
+}
+
+// Generic on the renderable / children types so each adapter can pin them:
+//   React:  PopoverCorePropsOf<Renderable, ReactNode>
+//   Lit:    PopoverCorePropsOf<unknown, unknown>
+// Position/Dialog/View render concerns live only in the React props.ts.
+export type PopoverCorePropsOf<TRenderable, TChildren = TRenderable> = {
+  isShowingContent?: boolean
+  defaultIsShowingContent?: boolean
+  on?: PopoverTriggerProp
+  placement?: PopoverPlacement
+  offsetX?: string | number
+  offsetY?: string | number
+  withArrow?: boolean
+  color?: PopoverColor
+  id?: string
+  shouldRenderOffscreen?: boolean
+  shouldContainFocus?: boolean
+  shouldReturnFocus?: boolean
+  shouldCloseOnDocumentClick?: boolean
+  shouldCloseOnEscape?: boolean
+  shouldFocusContentOnTriggerBlur?: boolean
+  shouldSetAriaExpanded?: boolean
+  renderTrigger?: TRenderable
+  children?: TChildren
+}
+
+export const allowedProps = [
+  'isShowingContent',
+  'defaultIsShowingContent',
+  'on',
+  'placement',
+  'offsetX',
+  'offsetY',
+  'withArrow',
+  'color',
+  'id',
+  'shouldRenderOffscreen',
+  'shouldContainFocus',
+  'shouldReturnFocus',
+  'shouldCloseOnDocumentClick',
+  'shouldCloseOnEscape',
+  'shouldFocusContentOnTriggerBlur',
+  'shouldSetAriaExpanded',
+  'renderTrigger',
+  'children'
+] as const
+
+export type PopoverAllowedPropKey = (typeof allowedProps)[number]
diff --git a/packages/ui-web-core/.gitignore b/packages/ui-web-core/.gitignore
new file mode 100644
index 0000000000..891d5303d8
--- /dev/null
+++ b/packages/ui-web-core/.gitignore
@@ -0,0 +1,5 @@
+lib/
+.babel-cache/
+es/
+types/
+storybook-static/
diff --git a/packages/ui-web-core/.storybook/main.ts b/packages/ui-web-core/.storybook/main.ts
new file mode 100644
index 0000000000..13dcde1aa9
--- /dev/null
+++ b/packages/ui-web-core/.storybook/main.ts
@@ -0,0 +1,57 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import type { StorybookConfig } from '@storybook/web-components-vite'
+
+const getAbsolutePath = (value: string) =>
+  dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
+
+// Source-only aliases (shared with the library build in ../vite.config.ts via
+// ../aliases.mjs) for cherry-picking React-free modules out of sibling InstUI
+// packages. Aliases remap paths only; import surgically (e.g.
+// `@alerts/Alert/v2/styles`) and avoid `.tsx` entries that pull in React.
+import { aliases } from '../aliases.mjs'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs')
+  ],
+  framework: getAbsolutePath('@storybook/web-components-vite'),
+  viteFinal: async (viteConfig) => ({
+    ...viteConfig,
+    resolve: {
+      ...viteConfig.resolve,
+      alias: {
+        ...(viteConfig.resolve?.alias as Record<string, string> | undefined),
+        ...aliases
+      }
+    }
+  })
+}
+
+export default config
diff --git a/packages/ui-web-core/.storybook/preview.ts b/packages/ui-web-core/.storybook/preview.ts
new file mode 100644
index 0000000000..16d0bc31c2
--- /dev/null
+++ b/packages/ui-web-core/.storybook/preview.ts
@@ -0,0 +1,50 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Preview } from '@storybook/web-components-vite'
+import { html } from 'lit'
+// Registers <instui-theme-provider> for the global decorator. This is our own
+// package's source, so the `*/src` restriction doesn't apply.
+// eslint-disable-next-line no-restricted-imports
+import '../src/ThemeProvider/ThemeProvider'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  },
+  decorators: [
+    (story) => html`
+      <instui-theme-provider default-theme-name="defaultTheme">
+        ${story()}
+      </instui-theme-provider>
+    `
+  ]
+}
+
+export default preview
diff --git a/packages/ui-web-core/README.md b/packages/ui-web-core/README.md
new file mode 100644
index 0000000000..a57a6ab887
--- /dev/null
+++ b/packages/ui-web-core/README.md
@@ -0,0 +1,50 @@
+## ui-web-core
+
+InstUI primitives delivered as Lit-based Web Components, plus the SSR/theming
+infrastructure needed to run them in the Parchment stack.
+
+Today this package ships:
+
+- **`<instui-theme-provider>`** — a Lit element that maps InstUI design tokens
+  (the modern `primitives` / `semantics` / `sharedTokens` / `components` shape
+  from `@instructure/ui-themes`) onto global CSS custom properties, with
+  automatic `prefers-color-scheme` and `prefers-contrast` switching.
+
+The dependency direction is one-way: consumers (apps, future Parchment
+composition layers) depend on `ui-web-core`, never the reverse.
+
+### Development
+
+```sh
+pnpm --filter @instructure/ui-web-core storybook
+```
+
+Storybook runs on port 6006. The static build is also embedded into the main
+InstUI docs site at `https://instructure.design/parchment`.
+
+### Build
+
+`pnpm --filter @instructure/ui-web-core build` runs a **Vite library build**
+(`vite.config.ts`) emitting ESM to `es/` with three entries — `index`, `react/index`
+(`@lit/react` wrappers), `ssr/index` (server theme helper + skeleton CSS). The build
+resolves the source aliases (`@alerts`, `@drilldown`, `@popover`, `@position`,
+`@a11y`, `@menu` — shared with Storybook via `aliases.mjs`) and **inlines** the
+React-free neutral modules **and** the `@instructure/*` utility packages they import
+(incl. `ui-themes`) + `keycode` into a **self-contained bundle**. Only the framework
+peers (`lit`, `@lit/react`, `react`, `@angular/*`) stay external, so the package is
+a drop-in consumable cross-repo via a `file:` link with no unresolvable
+`workspace:*` deps. A bundler resolving the aliases is what makes the alias approach
+production-ready (neither `tsc` nor Babel rewrite aliases in emitted output), which
+is why this package is built with Vite and excluded from the repo's composite
+`tsc -b` (`tsconfig.references.json`).
+
+> **Type declarations (`.d.ts`) — partial / tracked follow-up.** Single-entry
+> `vite-plugin-dts` `bundleTypes` (+ `@microsoft/api-extractor`, with `rootDir`
+> widened to `packages/`) **does** produce a clean, self-contained `es/index.d.ts`
+> with the neutral types inlined and no `@alias` leaks. But **multi-entry**
+> `bundleTypes` (needed once `react`/`ssr` became build entries) cross-wires the
+> per-entry outputs, so declaration emission is currently disabled — consumers get
+> untyped (`any`) imports. The package is `private`, and Web Component consumers use
+> the custom-element tags from HTML (no TS types required). Robust fix when types
+> are wanted for the JS/wrapper API: emit a self-contained types tree via `tsc`
+> (`rootDir=packages/`) + `tsc-alias`, or run api-extractor once per entry.
diff --git a/packages/ui-web-core/aliases.mjs b/packages/ui-web-core/aliases.mjs
new file mode 100644
index 0000000000..82d5b5d40c
--- /dev/null
+++ b/packages/ui-web-core/aliases.mjs
@@ -0,0 +1,50 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Source-only aliases for cherry-picking React-free modules out of sibling
+ * InstUI packages without taking on a workspace dep on the whole thing. Shared
+ * by the Storybook Vite config (.storybook/main.ts) and the library build
+ * (vite.config.ts) so dev and build never drift. The library build bundles
+ * (inlines) whatever these resolve to; the leaf utility packages those modules
+ * import (@instructure/console, ui-dom-utils, etc.) stay external.
+ *
+ * Aliases remap paths only; they do not strip React. Import surgically (e.g.
+ * `@alerts/Alert/v2/styles`) and avoid `.tsx` entries that pull in React.
+ */
+
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+// This file lives at the package root, so siblings are ../<pkg>/src
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export const aliases = {
+  '@alerts': resolve(__dirname, '../ui-alerts/src'),
+  '@drilldown': resolve(__dirname, '../ui-drilldown/src'),
+  '@popover': resolve(__dirname, '../ui-popover/src'),
+  '@position': resolve(__dirname, '../ui-position/src'),
+  '@a11y': resolve(__dirname, '../ui-a11y-utils/src'),
+  '@menu': resolve(__dirname, '../ui-menu/src')
+}
diff --git a/packages/ui-web-core/babel.config.cjs b/packages/ui-web-core/babel.config.cjs
new file mode 100644
index 0000000000..647821c390
--- /dev/null
+++ b/packages/ui-web-core/babel.config.cjs
@@ -0,0 +1,36 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}
diff --git a/packages/ui-web-core/package.json b/packages/ui-web-core/package.json
new file mode 100644
index 0000000000..61554801fd
--- /dev/null
+++ b/packages/ui-web-core/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "@instructure/ui-web-core",
+  "version": "11.7.3",
+  "private": true,
+  "description": "InstUI primitives delivered as Lit-based Web Components, plus SSR/theming utilities.",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "type": "module",
+  "files": [
+    "es",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "ui-scripts lint",
+    "lint:fix": "ui-scripts lint --fix",
+    "clean": "ui-scripts clean",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "build:types": "echo 'ui-web-core: multi-entry .d.ts emission is a tracked follow-up (see README); runtime bundle is produced by build'",
+    "ts:check": "tsc -p tsconfig.json --noEmit --emitDeclarationOnly false",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "lit": "^3.3.3"
+  },
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "workspace:*",
+    "@instructure/ui-scripts": "workspace:*",
+    "@microsoft/api-extractor": "^7.58.8",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/web-components-vite": "^10.4.1",
+    "storybook": "^10.4.1",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17",
+    "@angular/core": ">=17",
+    "react": ">=18 <=19",
+    "react-dom": ">=18 <=19"
+  },
+  "peerDependenciesMeta": {
+    "@angular/common": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": true,
+  "exports": {
+    "./package.json": "./package.json",
+    "./es/*": "./es/*",
+    "./types/*": "./types/*",
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/index.ts",
+      "import": "./es/index.js",
+      "default": "./es/index.js"
+    },
+    "./react": {
+      "src": "./src/react/index.ts",
+      "import": "./es/react/index.js",
+      "default": "./es/react/index.js"
+    },
+    "./ssr": {
+      "src": "./src/ssr/index.ts",
+      "import": "./es/ssr/index.js",
+      "default": "./es/ssr/index.js"
+    }
+  }
+}
diff --git a/packages/ui-web-core/src/Alert/Alert.stories.ts b/packages/ui-web-core/src/Alert/Alert.stories.ts
new file mode 100644
index 0000000000..8a95ea4890
--- /dev/null
+++ b/packages/ui-web-core/src/Alert/Alert.stories.ts
@@ -0,0 +1,180 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html, nothing } from 'lit'
+import './Alert'
+
+type Args = {
+  variant: 'info' | 'success' | 'warning' | 'error'
+  hasShadow: boolean
+  open: boolean
+  transition: 'none' | 'fade'
+  timeout: number
+  renderCloseButtonLabel: string
+  variantScreenReaderLabel: string
+}
+
+const meta: Meta<Args> = {
+  title: 'ui-web-core/Alert',
+  component: 'instui-alert',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['info', 'success', 'warning', 'error']
+    },
+    hasShadow: { control: 'boolean' },
+    open: { control: 'boolean' },
+    transition: {
+      control: { type: 'select' },
+      options: ['none', 'fade']
+    },
+    timeout: {
+      control: { type: 'number', min: 0, step: 500 },
+      description: 'Milliseconds before auto-dismiss. 0 disables.'
+    },
+    renderCloseButtonLabel: { control: 'text' },
+    variantScreenReaderLabel: { control: 'text' }
+  },
+  args: {
+    variant: 'info',
+    hasShadow: true,
+    open: true,
+    transition: 'fade',
+    timeout: 0,
+    renderCloseButtonLabel: '',
+    variantScreenReaderLabel: ''
+  }
+}
+
+export default meta
+
+type Story = StoryObj<Args>
+
+// ---------------------------------------------------------------------------
+// Interactive playground
+// ---------------------------------------------------------------------------
+
+export const Playground: Story = {
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <instui-alert
+        variant=${args.variant}
+        ?has-shadow=${args.hasShadow}
+        ?open=${args.open}
+        transition=${args.transition}
+        timeout=${args.timeout}
+        render-close-button-label=${args.renderCloseButtonLabel || nothing}
+        variant-screen-reader-label=${args.variantScreenReaderLabel || nothing}
+      >
+        This is a sample alert. Edit the controls to change its behavior.
+      </instui-alert>
+    </div>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// One per variant, side-by-side
+// ---------------------------------------------------------------------------
+
+const variantBlurb: Record<Args['variant'], string> = {
+  info: 'Heads up — the feature you used is in beta.',
+  success: 'Your changes have been saved.',
+  warning: 'Three of your fields are missing values.',
+  error: 'We could not save your changes. Try again in a moment.'
+}
+
+export const Variants: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      ${(['info', 'success', 'warning', 'error'] as const).map(
+        (variant) => html`
+          <instui-alert variant=${variant}>
+            ${variantBlurb[variant]}
+          </instui-alert>
+        `
+      )}
+    </div>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Dismissible (close button + Escape key)
+// ---------------------------------------------------------------------------
+
+export const Dismissible: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <instui-alert
+      variant="warning"
+      render-close-button-label="Close this alert"
+    >
+      Click the ✕ button or press Escape to dismiss. The
+      <code>instui-alert-dismiss</code> event fires on close.
+    </instui-alert>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Auto-dismiss after a timeout
+// ---------------------------------------------------------------------------
+
+export const AutoDismiss: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <p style="font-family: system-ui; margin: 0 0 1rem;">
+      This alert dismisses itself after 4 seconds.
+    </p>
+    <instui-alert variant="success" timeout="4000">
+      Auto-dismissing in 4 seconds…
+    </instui-alert>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Live region (screen-reader announcement)
+// ---------------------------------------------------------------------------
+
+export const WithLiveRegion: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <p style="font-family: system-ui; margin: 0 0 1rem;">
+      The hidden <code>role="alert"</code> element below receives a copy of the
+      alert content so screen readers announce it on appearance.
+    </p>
+    <div
+      id="alert-stories-live-region"
+      role="alert"
+      style="position: absolute; width: 1px; height: 1px; overflow: hidden;"
+    ></div>
+    <instui-alert
+      variant="info"
+      variant-screen-reader-label="Information,"
+      live-region-selector="#alert-stories-live-region"
+    >
+      I'm announced to assistive tech the moment I appear.
+    </instui-alert>
+  `
+}
diff --git a/packages/ui-web-core/src/Alert/Alert.ts b/packages/ui-web-core/src/Alert/Alert.ts
new file mode 100644
index 0000000000..e6683c8104
--- /dev/null
+++ b/packages/ui-web-core/src/Alert/Alert.ts
@@ -0,0 +1,311 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { LitElement, html, nothing, type PropertyValues } from 'lit'
+
+import generateStyle from '@alerts/Alert/v2/styles'
+import {
+  AlertLiveRegionController,
+  createDismissTimer,
+  describeScreenReaderContent,
+  resolveLiveRegion,
+  shouldCloseOnKey,
+  type DismissTimer
+} from '@alerts/Alert/v2/behavior'
+import type {
+  AlertLiveRegion,
+  AlertLiveRegionPoliteness,
+  AlertTransition,
+  AlertVariant
+} from '@alerts/Alert/v2/types'
+
+import {
+  resolveTheme,
+  themes,
+  styleObjectToCss,
+  type ThemeName
+} from '../theme'
+import { variantIcons } from './icons'
+
+// ---------------------------------------------------------------------------
+// <instui-alert>
+// ---------------------------------------------------------------------------
+
+const ALERT_TAG = 'instui-alert'
+
+// IDs that don't repeat across instances on the same page. Lit doesn't ship
+// deterministicId; nanosecond + counter is sufficient for the live region
+// portal lookup.
+let _idCounter = 0
+const mintId = () => `instui-alert-${++_idCounter}-${Date.now().toString(36)}`
+
+export class Alert extends LitElement {
+  static properties = {
+    variant: { type: String },
+    variantScreenReaderLabel: {
+      type: String,
+      attribute: 'variant-screen-reader-label'
+    },
+    liveRegionSelector: { type: String, attribute: 'live-region-selector' },
+    liveRegionPoliteness: {
+      type: String,
+      attribute: 'live-region-politeness'
+    },
+    isLiveRegionAtomic: { type: Boolean, attribute: 'is-live-region-atomic' },
+    screenReaderOnly: { type: Boolean, attribute: 'screen-reader-only' },
+    timeout: { type: Number },
+    renderCloseButtonLabel: {
+      type: String,
+      attribute: 'render-close-button-label'
+    },
+    transition: { type: String },
+    open: { type: Boolean, reflect: true },
+    hasShadow: { type: Boolean, attribute: 'has-shadow' },
+    themeName: { type: String, attribute: 'theme-name' }
+  }
+
+  // Public, attribute-backed reactive props (defaults mirror the v2 React Alert).
+  variant: AlertVariant = 'info'
+  variantScreenReaderLabel: string = ''
+  liveRegionSelector: string = ''
+  liveRegionPoliteness: AlertLiveRegionPoliteness = 'assertive'
+  isLiveRegionAtomic: boolean = false
+  screenReaderOnly: boolean = false
+  timeout: number = 0
+  renderCloseButtonLabel: string = ''
+  transition: AlertTransition = 'fade'
+  open: boolean = true
+  hasShadow: boolean = true
+  themeName: ThemeName = 'defaultTheme'
+
+  // Imperatively-settable property for callers that want to pass a DOM Element
+  // or a () => Element function directly (matches the React `liveRegion` prop
+  // shape, which can't fit through an HTML attribute).
+  liveRegion: AlertLiveRegion | undefined = undefined
+
+  private _srid: string = mintId()
+  private _timer: DismissTimer | null = null
+  private _liveRegionController: AlertLiveRegionController | null = null
+  private _onThemeChange = (event: Event) => {
+    const detail = (event as CustomEvent<{ themeName: ThemeName }>).detail
+    if (detail?.themeName && themes[detail.themeName]) {
+      this.themeName = detail.themeName
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback()
+    this._timer = createDismissTimer(this.timeout, () => this.close())
+    this._liveRegionController = new AlertLiveRegionController(
+      () => this._resolveLiveRegion(),
+      () => this.liveRegionPoliteness,
+      () => this.isLiveRegionAtomic
+    )
+    window.addEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    this._timer?.clear()
+    this._timer = null
+    this._liveRegionController = null
+    window.removeEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override firstUpdated() {
+    this._liveRegionController?.init()
+    this._mountScreenreaderContent()
+    this._timer?.arm()
+  }
+
+  override updated(changed: PropertyValues<this>) {
+    // External `open` flip from truthy to falsy is a close signal — mirrors
+    // the v2 React Alert's componentDidUpdate logic.
+    if (changed.has('open') && changed.get('open') === true && !this.open) {
+      this.close()
+    }
+  }
+
+  override render() {
+    const { componentTheme, sharedTokens } = this._resolveAlertTheme()
+    const styles = generateStyle(
+      componentTheme,
+      { variant: this.variant, hasShadow: this.hasShadow },
+      sharedTokens
+    ) as Record<string, Record<string, unknown>>
+
+    // Host visibility wrapper — keeps the screenReaderOnly + transition
+    // semantics tight. The screen-reader content is portal'd out to the live
+    // region element separately and stays in the DOM independent of host
+    // visibility.
+    const hostHidden = !this.open || this.screenReaderOnly
+    const hostStyle = hostHidden
+      ? this.transition === 'none'
+        ? 'display: none;'
+        : 'opacity: 0; pointer-events: none; transition: opacity 200ms ease;'
+      : 'opacity: 1; transition: opacity 200ms ease;'
+
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+        ${styleObjectToCss(styles)} .closeButton {
+          background: transparent;
+          border: 0;
+          padding: 0.25rem 0.5rem;
+          font: inherit;
+          font-size: 1rem;
+          line-height: 1;
+          color: inherit;
+          cursor: pointer;
+        }
+        .closeButton:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 2px;
+        }
+        .icon svg {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      </style>
+      <div
+        class="alert"
+        style=${hostStyle}
+        @keyup=${this._handleKeyUp}
+        @transitionend=${this._handleTransitionEnd}
+      >
+        <div class="icon">${variantIcons[this.variant]}</div>
+        <div class="content">
+          ${this.variantScreenReaderLabel
+            ? html`<span class="variantScreenReaderLabel"
+                >${this.variantScreenReaderLabel}</span
+              >`
+            : nothing}
+          <slot></slot>
+        </div>
+        ${this.renderCloseButtonLabel
+          ? html`
+              <div class="closeButton">
+                <button
+                  type="button"
+                  aria-label=${this.renderCloseButtonLabel}
+                  @click=${this.close}
+                >
+                  ✕
+                </button>
+              </div>
+            `
+          : nothing}
+      </div>
+    `
+  }
+
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+
+  close = () => {
+    if (!this.open) return
+    this._timer?.clear()
+    this._liveRegionController?.refresh(this._srid)
+    this.open = false
+    // Fire dismiss immediately for `transition: none` / screenReaderOnly —
+    // matches the React Alert's setState callback timing.
+    if (this.transition === 'none' || this.screenReaderOnly) {
+      this._fireDismiss()
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Internals
+  // -------------------------------------------------------------------------
+
+  private _resolveLiveRegion(): Element | null {
+    if (this.liveRegion !== undefined) {
+      return resolveLiveRegion(this.liveRegion)
+    }
+    if (this.liveRegionSelector) {
+      return document.querySelector(this.liveRegionSelector)
+    }
+    return null
+  }
+
+  // Resolves the current theme to the slices `generateStyle` needs. Defaults
+  // to the canvas theme; ThemeProvider's `instui-theme-change` event swaps
+  // `this.themeName` reactively when a sibling switches themes.
+  private _resolveAlertTheme() {
+    const theme = themes[this.themeName] ?? themes.defaultTheme
+    const resolved = resolveTheme(theme.raw, {})
+    return {
+      componentTheme: resolved.components.Alert as Parameters<
+        typeof generateStyle
+      >[0],
+      sharedTokens: resolved.sharedTokens as Parameters<typeof generateStyle>[2]
+    }
+  }
+
+  private _mountScreenreaderContent() {
+    if (!this._liveRegionController) return
+    const wrapper = this._liveRegionController.appendContent(this._srid)
+    if (!wrapper) return
+    const { label, children } = describeScreenReaderContent({
+      variantScreenReaderLabel: this.variantScreenReaderLabel,
+      children: this.textContent ?? ''
+    })
+    wrapper.textContent = `${label} ${children ?? ''}`.trim()
+  }
+
+  private _handleKeyUp = (event: KeyboardEvent) => {
+    if (shouldCloseOnKey(event, !!this.renderCloseButtonLabel)) {
+      this.close()
+    }
+  }
+
+  private _handleTransitionEnd = (event: TransitionEvent) => {
+    if (event.propertyName !== 'opacity') return
+    if (!this.open && this.transition !== 'none') {
+      this._fireDismiss()
+    }
+  }
+
+  private _fireDismiss() {
+    this.dispatchEvent(
+      new CustomEvent('instui-alert-dismiss', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get(ALERT_TAG)) {
+  customElements.define(ALERT_TAG, Alert)
+}
diff --git a/packages/ui-web-core/src/Alert/README.md b/packages/ui-web-core/src/Alert/README.md
new file mode 100644
index 0000000000..f078a333da
--- /dev/null
+++ b/packages/ui-web-core/src/Alert/README.md
@@ -0,0 +1,76 @@
+## Alert (Lit Web Component)
+
+`<instui-alert>` is the Lit Web Component port of `@instructure/ui-alerts`'s
+v2 Alert. It reuses the React-free pieces of v2 Alert directly via the
+`@alerts/*` source alias — `generateStyle` for conditional CSS, the behavior
+controllers for live regions / timers / keyboard, and the neutral type
+definitions for the public API — so the visual and behavioral contract stays
+locked in lock-step with the React component.
+
+### Variants
+
+| variant   | Icon (Lucide)  | Border / icon background      |
+| --------- | -------------- | ----------------------------- |
+| `info`    | info           | `--components-Alert-info*`    |
+| `success` | circle-check   | `--components-Alert-success*` |
+| `warning` | triangle-alert | `--components-Alert-warning*` |
+| `error`   | circle-x       | `--components-Alert-danger*`  |
+
+### Attributes
+
+- `variant` — `'info' \| 'success' \| 'warning' \| 'error'`. Default `'info'`.
+- `has-shadow` — boolean, default `true`.
+- `open` — boolean, reflects. Flipping from true to false dismisses the alert.
+- `transition` — `'none' \| 'fade'`. Default `'fade'`.
+- `timeout` — number (ms). Auto-dismiss after this many ms. `0` disables.
+- `render-close-button-label` — string. Setting the attribute renders a close
+  button labeled with this string. Escape key also closes when this is set.
+- `variant-screen-reader-label` — string. Read by assistive tech when an alert
+  appears.
+- `live-region-selector` — CSS selector that resolves to the screen-reader
+  live region element. Use the `liveRegion` _property_ instead when you need
+  to pass an Element or `() => Element` directly.
+- `live-region-politeness` — `'polite' \| 'assertive'`. Default `'assertive'`.
+- `is-live-region-atomic` — boolean. Default `false`.
+- `screen-reader-only` — boolean. Hides the visual alert; SR content still
+  goes to the live region.
+- `theme-name` — `'defaultTheme' \| 'contrastTheme' \| 'darkTheme' \| 'lightTheme'`.
+  Auto-updated when a sibling `<instui-theme-provider>` fires `instui-theme-change`.
+
+### Events
+
+- `instui-alert-dismiss` — bubbles + composed. Fires when the alert finishes
+  dismissing (after the fade transition; immediately for `transition="none"`
+  or `screen-reader-only`).
+
+### Example
+
+```html
+<instui-theme-provider>
+  <div id="sr-live" role="alert"></div>
+
+  <instui-alert
+    variant="success"
+    variant-screen-reader-label="Success,"
+    live-region-selector="#sr-live"
+    render-close-button-label="Close"
+    timeout="5000"
+  >
+    Your changes were saved.
+  </instui-alert>
+</instui-theme-provider>
+```
+
+### Re-used pieces from `@instructure/ui-alerts`
+
+These are imported via the `@alerts/*` source alias declared in
+`ui-web-core/tsconfig.json` and `.storybook/main.ts`:
+
+- `@alerts/Alert/v2/types` — `AlertVariant`, `AlertTransition`,
+  `AlertLiveRegion(Politeness)`, `AlertCorePropsOf`, etc.
+- `@alerts/Alert/v2/styles` — `generateStyle(componentTheme, props, sharedTokens)`
+  returns the same Emotion-shaped object the React Alert renders. The Lit
+  Alert flattens that into a CSS string scoped to its shadow root.
+- `@alerts/Alert/v2/behavior` — `AlertLiveRegionController`,
+  `createDismissTimer`, `shouldCloseOnKey`, `describeScreenReaderContent`,
+  `resolveLiveRegion`.
diff --git a/packages/ui-web-core/src/Alert/icons.ts b/packages/ui-web-core/src/Alert/icons.ts
new file mode 100644
index 0000000000..5d9e28f051
--- /dev/null
+++ b/packages/ui-web-core/src/Alert/icons.ts
@@ -0,0 +1,90 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * POC icon set for the Lit Alert. Path data hand-copied from Lucide
+ * (lucide-react@1.7.0, ISC license) to match the React Alert's variant icons:
+ *
+ *   error   → XCircleInstUIIcon       = lucide-react/circle-x
+ *   info    → InfoInstUIIcon          = lucide-react/info
+ *   success → CircleCheckInstUIIcon   = lucide-react/circle-check
+ *   warning → TriangleAlertInstUIIcon = lucide-react/triangle-alert
+ *
+ * When `@instructure/ui-icons-svg` lands on this branch, these inline SVGs
+ * should be replaced by imports from that package so the source-of-truth
+ * lives in one place.
+ */
+
+import { html, svg, type TemplateResult } from 'lit'
+
+import type { AlertVariant } from '@alerts/Alert/v2/types'
+
+const wrap = (children: TemplateResult): TemplateResult => html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${children}
+  </svg>
+`
+
+const xCircle = wrap(svg`
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="m15 9-6 6"></path>
+  <path d="m9 9 6 6"></path>
+`)
+
+const info = wrap(svg`
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M12 16v-4"></path>
+  <path d="M12 8h.01"></path>
+`)
+
+const circleCheck = wrap(svg`
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="m9 12 2 2 4-4"></path>
+`)
+
+const triangleAlert = wrap(svg`
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
+  <path d="M12 9v4"></path>
+  <path d="M12 17h.01"></path>
+`)
+
+// Keyed by variant name so the Lit Alert can look up an icon by `this.variant`
+// directly — same shape the React Alert's `variantUI` map exposes.
+export const variantIcons: Record<AlertVariant, TemplateResult> = {
+  error: xCircle,
+  info,
+  success: circleCheck,
+  warning: triangleAlert
+}
diff --git a/packages/ui-web-core/src/Alert/index.ts b/packages/ui-web-core/src/Alert/index.ts
new file mode 100644
index 0000000000..d0fa848047
--- /dev/null
+++ b/packages/ui-web-core/src/Alert/index.ts
@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { Alert } from './Alert'
diff --git a/packages/ui-web-core/src/Drilldown/Drilldown.stories.ts b/packages/ui-web-core/src/Drilldown/Drilldown.stories.ts
new file mode 100644
index 0000000000..f1b97ff552
--- /dev/null
+++ b/packages/ui-web-core/src/Drilldown/Drilldown.stories.ts
@@ -0,0 +1,244 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+import './Drilldown'
+// composition: register <instui-popover> so the drilldown can be triggered from it
+import '../Popover/Popover'
+import type {
+  DrilldownConfigPage,
+  DrilldownSelectDetail,
+  DrilldownPageChangeDetail
+} from './Drilldown'
+
+const meta: Meta = {
+  title: 'ui-web-core/Drilldown',
+  component: 'instui-drilldown'
+}
+
+export default meta
+
+type Story = StoryObj
+
+const onSelect = (event: Event) => {
+  const { detail } = event as CustomEvent<DrilldownSelectDetail>
+  // eslint-disable-next-line no-console
+  console.log('instui-drilldown-select', detail)
+}
+
+const onPageChange = (event: Event) => {
+  const { detail } = event as CustomEvent<DrilldownPageChangeDetail>
+  // eslint-disable-next-line no-console
+  console.log('instui-drilldown-page-change', detail)
+}
+
+// ---------------------------------------------------------------------------
+// Selection — single (radio) + multiple (checkbox) groups on one page
+// ---------------------------------------------------------------------------
+
+const selectionPages: DrilldownConfigPage[] = [
+  {
+    pageId: 'settings',
+    title: 'Account settings',
+    groups: [
+      {
+        groupId: 'theme',
+        groupTitle: 'Theme (single-select)',
+        selectableType: 'single',
+        defaultSelected: ['light'],
+        options: [
+          { id: 'theme-light', label: 'Light', value: 'light' },
+          { id: 'theme-dark', label: 'Dark', value: 'dark' },
+          { id: 'theme-system', label: 'Match system', value: 'system' }
+        ]
+      },
+      {
+        groupId: 'notifications',
+        groupTitle: 'Notifications (multi-select)',
+        selectableType: 'multiple',
+        defaultSelected: ['email'],
+        options: [
+          { id: 'notif-email', label: 'Email', value: 'email' },
+          { id: 'notif-sms', label: 'SMS', value: 'sms' },
+          {
+            id: 'notif-push',
+            label: 'Push (disabled)',
+            value: 'push',
+            disabled: true
+          }
+        ]
+      }
+    ]
+  }
+]
+
+export const Selection: Story = {
+  render: () => html`
+    <instui-drilldown
+      root-page-id="settings"
+      label="Account settings"
+      .pages=${selectionPages}
+      @instui-drilldown-select=${onSelect}
+    ></instui-drilldown>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Navigation — root page drilling into sub-pages, then selecting
+// ---------------------------------------------------------------------------
+
+const navigationPages: DrilldownConfigPage[] = [
+  {
+    pageId: 'root',
+    title: 'Order menu',
+    groups: [
+      {
+        groupId: 'root-nav',
+        options: [
+          { id: 'go-food', label: 'Food', subPageId: 'food' },
+          { id: 'go-drinks', label: 'Drinks', subPageId: 'drinks' }
+        ]
+      }
+    ]
+  },
+  {
+    pageId: 'food',
+    title: 'Food',
+    groups: [
+      {
+        groupId: 'food-choice',
+        groupTitle: 'Pick one',
+        selectableType: 'single',
+        options: [
+          { id: 'food-pizza', label: 'Pizza', value: 'pizza' },
+          { id: 'food-salad', label: 'Salad', value: 'salad' },
+          { id: 'food-soup', label: 'Soup', value: 'soup' }
+        ]
+      }
+    ]
+  },
+  {
+    pageId: 'drinks',
+    title: 'Drinks',
+    groups: [
+      {
+        groupId: 'drink-choice',
+        groupTitle: 'Pick any',
+        selectableType: 'multiple',
+        options: [
+          { id: 'drink-coffee', label: 'Coffee', value: 'coffee' },
+          { id: 'drink-tea', label: 'Tea', value: 'tea' },
+          { id: 'drink-water', label: 'Water', value: 'water' }
+        ]
+      }
+    ]
+  }
+]
+
+export const Navigation: Story = {
+  render: () => html`
+    <p style="font-family: system-ui; max-width: 30rem; margin: 0 0 1rem;">
+      Click a row (or use ↑/↓ then →) to drill into a sub-page. Use ← or the
+      Back button to return. Selection state per group is preserved across
+      navigation — all of it driven by the shared, React-free behavior reducers.
+    </p>
+    <instui-drilldown
+      root-page-id="root"
+      label="Order menu"
+      .pages=${navigationPages}
+      @instui-drilldown-select=${onSelect}
+      @instui-drilldown-page-change=${onPageChange}
+    ></instui-drilldown>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Keyboard reference
+// ---------------------------------------------------------------------------
+
+export const KeyboardNavigation: Story = {
+  render: () => html`
+    <p style="font-family: system-ui; max-width: 30rem; margin: 0 0 1rem;">
+      Focus an option and try: <kbd>↑</kbd>/<kbd>↓</kbd> move (wrapping),
+      <kbd>Home</kbd>/<kbd>End</kbd> jump, <kbd>Enter</kbd>/<kbd>Space</kbd>
+      activate, <kbd>→</kbd> drill in, <kbd>←</kbd> go back.
+    </p>
+    <instui-drilldown
+      root-page-id="root"
+      label="Order menu"
+      .pages=${navigationPages}
+      @instui-drilldown-select=${onSelect}
+      @instui-drilldown-page-change=${onPageChange}
+    ></instui-drilldown>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Trigger / popover mode — the two extracted Lit components composed.
+//
+// Shadow-DOM-correct composition: <instui-popover> relocates the WHOLE
+// <instui-drilldown> host element into its body portal, so the drilldown's own
+// shadow root (scoped styles + keyboard/selection listeners) travels intact.
+// This is the web-components equivalent of the React Drilldown's `trigger` prop.
+//
+// `shouldHideOnSelect` is wired here: a terminal selection (not page nav, which
+// fires page-change instead) closes the popover.
+// ---------------------------------------------------------------------------
+
+export const InPopover: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <div style="padding: 6rem; font-family: system-ui;">
+      <p style="max-width: 30rem;">
+        Click the trigger to open the drilldown in a positioned popover.
+        Navigate with the keyboard, pick a leaf option to select-and-close, or
+        click outside / press <kbd>Escape</kbd> to dismiss.
+      </p>
+      <instui-popover
+        id="dd-popover"
+        placement="bottom start"
+        should-contain-focus
+        should-return-focus
+      >
+        <button slot="trigger">Open menu</button>
+        <instui-drilldown
+          root-page-id="root"
+          label="Order menu"
+          .pages=${navigationPages}
+          @instui-drilldown-select=${(event: Event) => {
+            onSelect(event)
+            // shouldHideOnSelect: terminal selection closes the popover
+            ;(
+              document.getElementById('dd-popover') as
+                | (HTMLElement & { hide?: () => void })
+                | null
+            )?.hide?.()
+          }}
+          @instui-drilldown-page-change=${onPageChange}
+        ></instui-drilldown>
+      </instui-popover>
+    </div>
+  `
+}
diff --git a/packages/ui-web-core/src/Drilldown/Drilldown.ts b/packages/ui-web-core/src/Drilldown/Drilldown.ts
new file mode 100644
index 0000000000..29a406f5d9
--- /dev/null
+++ b/packages/ui-web-core/src/Drilldown/Drilldown.ts
@@ -0,0 +1,602 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { LitElement, html, nothing, type PropertyValues } from 'lit'
+
+import generateStyle from '@drilldown/Drilldown/v2/styles'
+import {
+  computeInitialSelectionMap,
+  reduceGroupSelection,
+  selectedValuesInGroup,
+  reduceGoToPage,
+  reduceHighlight,
+  previousPageId
+} from '@drilldown/Drilldown/v2/behavior'
+import type {
+  DrilldownOptionValue,
+  DrilldownSelectableType,
+  NeutralPageData,
+  SelectedGroupOptionsMap
+} from '@drilldown/Drilldown/v2/types'
+
+import {
+  resolveTheme,
+  themes,
+  styleObjectToCss,
+  type ThemeName
+} from '../theme'
+import { checkIcon, chevronLeftIcon, chevronRightIcon } from './icons'
+
+// ---------------------------------------------------------------------------
+// Declarative page config — the Lit adapter's producer of the framework-neutral
+// NeutralPageData shape (the React adapter walks JSX children to produce the
+// same thing). Groups without a `selectableType` are just navigation/link
+// containers; selectable groups become radio (single) or checkbox (multiple).
+// ---------------------------------------------------------------------------
+
+export type DrilldownConfigOption = {
+  id: string
+  label: string
+  value?: DrilldownOptionValue
+  /** navigate to this page id when activated */
+  subPageId?: string
+  disabled?: boolean
+  /** uncontrolled initial selection (selectable groups only) */
+  defaultSelected?: boolean
+}
+
+export type DrilldownConfigGroup = {
+  groupId: string
+  groupTitle?: string
+  selectableType?: DrilldownSelectableType
+  /** controlled selection — wins over defaults */
+  selectedOptions?: DrilldownOptionValue[]
+  /** uncontrolled group-level defaults */
+  defaultSelected?: DrilldownOptionValue[]
+  options: DrilldownConfigOption[]
+}
+
+export type DrilldownConfigPage = {
+  pageId: string
+  title?: string
+  groups: DrilldownConfigGroup[]
+}
+
+export type DrilldownSelectDetail = {
+  value: DrilldownOptionValue | DrilldownOptionValue[]
+  isSelected: boolean
+  optionId: string
+  groupId?: string
+}
+
+export type DrilldownPageChangeDetail = {
+  prevPageId: string
+  newPageId: string
+  pageHistory: string[]
+}
+
+const DRILLDOWN_TAG = 'instui-drilldown'
+
+export class Drilldown extends LitElement {
+  static properties = {
+    pages: { type: Array },
+    rootPageId: { type: String, attribute: 'root-page-id' },
+    label: { type: String },
+    backButtonLabel: { type: String, attribute: 'back-button-label' },
+    rotateFocus: { type: Boolean, attribute: 'rotate-focus' },
+    disabled: { type: Boolean },
+    themeName: { type: String, attribute: 'theme-name' },
+    _activePageId: { state: true },
+    _highlightedId: { state: true },
+    _selectionMap: { state: true },
+    _pageHistory: { state: true }
+  }
+
+  // Public, settable reactive props (defaults mirror the v2 React Drilldown).
+  pages: DrilldownConfigPage[] = []
+  rootPageId = ''
+  label = ''
+  backButtonLabel = 'Back'
+  rotateFocus = true
+  disabled = false
+  themeName: ThemeName = 'defaultTheme'
+
+  // Internal reactive state — same state machine the React Drilldown holds,
+  // driven entirely by the shared behavior reducers.
+  private _activePageId = ''
+  private _highlightedId: string | undefined = undefined
+  private _selectionMap: SelectedGroupOptionsMap = {}
+  private _pageHistory: string[] = []
+
+  private _onThemeChange = (event: Event) => {
+    const detail = (event as CustomEvent<{ themeName: ThemeName }>).detail
+    if (detail?.themeName && themes[detail.themeName]) {
+      this.themeName = detail.themeName
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    window.removeEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override willUpdate(changed: PropertyValues<this>) {
+    // (Re)initialize the selection map + navigation when the page config or
+    // root changes. Internal interaction-driven re-renders don't reassign
+    // `pages`, so this won't clobber live selection state.
+    if (changed.has('pages') || changed.has('rootPageId')) {
+      const root = this.rootPageId || this.pages?.[0]?.pageId || ''
+      this._activePageId = root
+      this._pageHistory = root ? [root] : []
+      this._highlightedId = undefined
+      this._selectionMap = computeInitialSelectionMap(
+        this._neutralPages(),
+        (message) => console.error(message)
+      )
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  override render() {
+    const componentTheme = this._resolveDrilldownTheme()
+    const styleObj = generateStyle(componentTheme, undefined, {
+      hasHighlightedOption: !!this._highlightedId
+    }) as Record<string, unknown>
+    const css = styleObjectToCss(styleObj)
+    const headerActionColor =
+      typeof styleObj.headerActionColor === 'string'
+        ? styleObj.headerActionColor
+        : 'inherit'
+
+    const page = this._activePage
+    if (!page) return html`<div></div>`
+
+    const canGoBack = this._pageHistory.length > 1
+    const activeIds = this._activeOptionIds
+    // roving tabindex entry point: the highlighted option, else the first one
+    const tabbableId = this._highlightedId ?? activeIds[0]
+
+    return html`
+      <style>
+        :host {
+          display: block;
+          font-family: system-ui, sans-serif;
+        }
+        ${css} .drilldown {
+          border-width: 1px;
+          border-style: solid;
+          box-sizing: border-box;
+          min-width: 16rem;
+          background: #fff;
+        }
+        .header {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+          padding: 0.25rem 0.5rem;
+          border-bottom: 1px solid currentColor;
+        }
+        .headerBack {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          background: transparent;
+          border: 0;
+          font: inherit;
+          cursor: pointer;
+          padding: 0.25rem;
+          color: ${headerActionColor};
+        }
+        .headerBack:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 2px;
+        }
+        .headerBack svg,
+        .check svg,
+        .chevron svg {
+          width: 1rem;
+          height: 1rem;
+          display: block;
+        }
+        .groupTitle {
+          padding: 0.375rem 0.75rem 0.25rem;
+          font-size: 0.75rem;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          opacity: 0.65;
+        }
+        .option {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border: 0;
+          font: inherit;
+          text-align: start;
+          color: inherit;
+          cursor: pointer;
+        }
+        .option[aria-disabled='true'] {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .option:hover:not([aria-disabled='true']) {
+          background: rgba(0, 0, 0, 0.06);
+        }
+        .option:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: -2px;
+        }
+        .check {
+          width: 1rem;
+          flex-shrink: 0;
+          display: inline-flex;
+        }
+        .label {
+          flex-grow: 1;
+        }
+        .chevron {
+          margin-inline-start: auto;
+          display: inline-flex;
+        }
+      </style>
+      <div
+        class="drilldown"
+        role="menu"
+        aria-label=${this.label || page.title || nothing}
+        @keydown=${this._handleKeyDown}
+      >
+        ${canGoBack || page.title
+          ? html`
+              <div class="header">
+                ${canGoBack
+                  ? html`
+                      <button
+                        class="headerBack"
+                        type="button"
+                        @click=${this._goToPreviousPage}
+                      >
+                        <span class="chevron" aria-hidden="true"
+                          >${chevronLeftIcon}</span
+                        >
+                        <span>${this.backButtonLabel}</span>
+                      </button>
+                    `
+                  : nothing}
+                ${page.title
+                  ? html`<span class="headerTitle">${page.title}</span>`
+                  : nothing}
+              </div>
+            `
+          : nothing}
+        <div class="container">
+          ${(page.groups ?? []).map((group) =>
+            this._renderGroup(group, tabbableId)
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  private _renderGroup(group: DrilldownConfigGroup, tabbableId?: string) {
+    return html`
+      ${group.groupTitle
+        ? html`<div class="groupTitle" role="presentation">
+            ${group.groupTitle}
+          </div>`
+        : nothing}
+      ${(group.options ?? []).map((option) =>
+        this._renderOption(group, option, tabbableId)
+      )}
+    `
+  }
+
+  private _renderOption(
+    group: DrilldownConfigGroup,
+    option: DrilldownConfigOption,
+    tabbableId?: string
+  ) {
+    const selectable = !!group.selectableType
+    const isSelected = selectable
+      ? !!this._selectionMap[group.groupId]?.has(option.id)
+      : false
+    const isDisabled = !!option.disabled || this.disabled
+    const role = selectable
+      ? group.selectableType === 'single'
+        ? 'menuitemradio'
+        : 'menuitemcheckbox'
+      : 'menuitem'
+    const tabindex = option.id === tabbableId && !isDisabled ? 0 : -1
+
+    return html`
+      <button
+        class="option"
+        type="button"
+        role=${role}
+        data-option-id=${option.id}
+        tabindex=${tabindex}
+        aria-disabled=${isDisabled ? 'true' : nothing}
+        aria-checked=${selectable ? String(isSelected) : nothing}
+        @click=${() => this._onOptionClick(option)}
+      >
+        ${selectable
+          ? html`<span class="check" aria-hidden="true"
+              >${isSelected ? checkIcon : nothing}</span
+            >`
+          : nothing}
+        <span class="label">${option.label}</span>
+        ${option.subPageId
+          ? html`<span class="chevron" aria-hidden="true"
+              >${chevronRightIcon}</span
+            >`
+          : nothing}
+      </button>
+    `
+  }
+
+  // -------------------------------------------------------------------------
+  // Behavior wiring — every state transition routes through the shared,
+  // framework-neutral reducers in @drilldown/Drilldown/v2/behavior.
+  // -------------------------------------------------------------------------
+
+  private _onOptionClick(option: DrilldownConfigOption) {
+    if (option.disabled || this.disabled) return
+    this._highlightedId = option.id
+    this._activateOption(option.id)
+  }
+
+  private _activateOption(optionId: string) {
+    const found = this._findOption(optionId)
+    if (!found) return
+    const { group, option } = found
+    if (option.disabled || this.disabled) return
+
+    if (option.subPageId) {
+      this._goToPage(option.subPageId)
+      return
+    }
+
+    if (group.selectableType) {
+      this._selectionMap = reduceGroupSelection(this._selectionMap, {
+        groupId: group.groupId,
+        optionId: option.id,
+        value: option.value,
+        selectableType: group.selectableType
+      })
+      const values = selectedValuesInGroup(this._selectionMap, group.groupId)
+      this._dispatchSelect({
+        value: values,
+        isSelected: values.includes(option.value),
+        optionId: option.id,
+        groupId: group.groupId
+      })
+    } else {
+      this._dispatchSelect({
+        value: option.value,
+        isSelected: true,
+        optionId: option.id
+      })
+    }
+  }
+
+  private _goToPage = (newPageId: string) => {
+    const result = reduceGoToPage(
+      [...this._pageHistory],
+      newPageId,
+      this.pages.some((page) => page.pageId === newPageId)
+    )
+
+    if ('warning' in result) {
+      console.warn(result.warning)
+      return
+    }
+
+    this._pageHistory = result.history
+    this._activePageId = result.newPageId
+    this._highlightedId = undefined
+    this._dispatchPageChange(result.prevPageId, result.newPageId)
+  }
+
+  private _goToPreviousPage = () => {
+    const prev = previousPageId(this._pageHistory)
+    if (prev) this._goToPage(prev)
+  }
+
+  // -------------------------------------------------------------------------
+  // Keyboard — native keydown mapped onto the shared highlight reducer. The
+  // React adapter delegates this to <Selectable>; both share reduceHighlight.
+  // -------------------------------------------------------------------------
+
+  private _handleKeyDown = (event: KeyboardEvent) => {
+    const ids = this._activeOptionIds
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        this._moveHighlight(1)
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        this._moveHighlight(-1)
+        break
+      case 'Home':
+        event.preventDefault()
+        this._setHighlight(ids[0])
+        break
+      case 'End':
+        event.preventDefault()
+        this._setHighlight(ids[ids.length - 1])
+        break
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (this._highlightedId) this._activateOption(this._highlightedId)
+        break
+      case 'ArrowRight': {
+        const found = this._findOption(this._highlightedId)
+        if (found?.option.subPageId) {
+          event.preventDefault()
+          this._goToPage(found.option.subPageId)
+        }
+        break
+      }
+      case 'ArrowLeft':
+        event.preventDefault()
+        this._goToPreviousPage()
+        break
+      default:
+        break
+    }
+  }
+
+  private _moveHighlight(direction: -1 | 1) {
+    const next = reduceHighlight({
+      activeOptionIds: this._activeOptionIds,
+      highlightedOptionId: this._highlightedId,
+      direction,
+      rotateFocus: this.rotateFocus
+    })
+    this._setHighlight(next)
+  }
+
+  private _setHighlight(id: string | undefined) {
+    if (!id) return
+    this._highlightedId = id
+    // focus must happen after the roving tabindex re-renders
+    void this.updateComplete.then(() => {
+      const el = this.renderRoot.querySelector(
+        `[data-option-id="${CSS.escape(id)}"]`
+      ) as HTMLElement | null
+      el?.focus()
+    })
+  }
+
+  // -------------------------------------------------------------------------
+  // Derived data + helpers
+  // -------------------------------------------------------------------------
+
+  // The React-children -> plain-data boundary, Lit edition: maps the
+  // declarative `pages` config into the framework-neutral NeutralPageData[].
+  private _neutralPages(): NeutralPageData[] {
+    return (this.pages ?? []).map((page) => ({
+      pageId: page.pageId,
+      groups: (page.groups ?? []).map((group) => ({
+        groupId: group.groupId,
+        selectableType: group.selectableType,
+        selectedOptions: group.selectedOptions,
+        defaultSelected: group.defaultSelected,
+        options: (group.options ?? []).map((option) => ({
+          optionId: option.id,
+          value: option.value,
+          defaultSelected: option.defaultSelected
+        }))
+      }))
+    }))
+  }
+
+  private get _activePage(): DrilldownConfigPage | undefined {
+    return (this.pages ?? []).find((page) => page.pageId === this._activePageId)
+  }
+
+  private get _activeOptionIds(): string[] {
+    const ids: string[] = []
+    for (const group of this._activePage?.groups ?? []) {
+      for (const option of group.options ?? []) {
+        if (!option.disabled && !this.disabled) ids.push(option.id)
+      }
+    }
+    return ids
+  }
+
+  private _findOption(
+    optionId: string | undefined
+  ):
+    | { group: DrilldownConfigGroup; option: DrilldownConfigOption }
+    | undefined {
+    if (!optionId) return undefined
+    for (const group of this._activePage?.groups ?? []) {
+      const option = (group.options ?? []).find((o) => o.id === optionId)
+      if (option) return { group, option }
+    }
+    return undefined
+  }
+
+  private _resolveDrilldownTheme() {
+    const theme = themes[this.themeName] ?? themes.defaultTheme
+    const resolved = resolveTheme(theme.raw, {})
+    return resolved.components.Drilldown as Parameters<typeof generateStyle>[0]
+  }
+
+  private _dispatchSelect(detail: DrilldownSelectDetail) {
+    this.dispatchEvent(
+      new CustomEvent<DrilldownSelectDetail>('instui-drilldown-select', {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private _dispatchPageChange(prevPageId: string, newPageId: string) {
+    this.dispatchEvent(
+      new CustomEvent<DrilldownPageChangeDetail>(
+        'instui-drilldown-page-change',
+        {
+          detail: {
+            prevPageId,
+            newPageId,
+            pageHistory: [...this._pageHistory]
+          },
+          bubbles: true,
+          composed: true
+        }
+      )
+    )
+  }
+}
+
+if (
+  typeof customElements !== 'undefined' &&
+  !customElements.get(DRILLDOWN_TAG)
+) {
+  customElements.define(DRILLDOWN_TAG, Drilldown)
+}
diff --git a/packages/ui-web-core/src/Drilldown/README.md b/packages/ui-web-core/src/Drilldown/README.md
new file mode 100644
index 0000000000..a97d28b660
--- /dev/null
+++ b/packages/ui-web-core/src/Drilldown/README.md
@@ -0,0 +1,83 @@
+# `<instui-drilldown>`
+
+A framework-agnostic (Lit) Web Component port of the React `@instructure/ui-drilldown`,
+built as the second stage of the ui-web-core POC (after `<instui-alert>`).
+
+This component is intentionally **not** a feature-complete port. It exists to prove
+two things on the most complex InstUI component:
+
+1. The "emotion style-object → CSS string" approach proven on Alert **repeats** —
+   here via the shared [`styleObjectToCss`](../theme/styleObjectToCss.ts) converter.
+2. Drilldown's **selection + navigation behavior is a single source of truth** shared
+   by both the React component and this Web Component, with **zero React dependency**.
+
+## Single source of truth
+
+The selection state machine, controlled-prop sync, page-history navigation, and
+keyboard-highlight index math live in framework-neutral, React-free modules inside
+the React package and are consumed by both adapters via the `@drilldown/*` source alias:
+
+- `@drilldown/Drilldown/v2/behavior` — `computeInitialSelectionMap`,
+  `computeControlledSelectionUpdate`, `reduceGroupSelection`, `selectedValuesInGroup`,
+  `reduceGoToPage`, `reduceHighlight`, `previousPageId`
+- `@drilldown/Drilldown/v2/types` — neutral unions + the `Neutral*Data` shapes that
+  form the boundary between each adapter's child-parsing and the pure reducers
+- `@drilldown/Drilldown/v2/styles` — the (now framework-neutral) `generateStyle`
+
+The React adapter produces `NeutralPageData[]` by walking JSX children; this adapter
+produces the same shape from its declarative `pages` property. Same reducers, two producers.
+
+## Usage
+
+Children are expressed as a declarative `pages` config (a JS property), not slots —
+this maps directly to the reducers' `NeutralPageData[]` and avoids re-parsing a DOM tree.
+
+```ts
+import '@instructure/ui-web-core' // registers <instui-drilldown>
+
+const el = document.createElement('instui-drilldown')
+el.rootPageId = 'settings'
+el.label = 'Account settings'
+el.pages = [
+  {
+    pageId: 'settings',
+    title: 'Account settings',
+    groups: [
+      {
+        groupId: 'theme',
+        groupTitle: 'Theme',
+        selectableType: 'single', // radio
+        defaultSelected: ['light'],
+        options: [
+          { id: 'theme-light', label: 'Light', value: 'light' },
+          { id: 'theme-dark', label: 'Dark', value: 'dark' }
+        ]
+      }
+    ]
+  }
+]
+el.addEventListener('instui-drilldown-select', (e) => console.log(e.detail))
+```
+
+A group **without** `selectableType` is a plain navigation/link container; options
+with a `subPageId` drill into another page.
+
+## Events
+
+- `instui-drilldown-select` — `{ value, isSelected, optionId, groupId? }`. For
+  selectable groups `value` is the full array of selected values in the group (even
+  for single-select), matching the React `onSelect` contract.
+- `instui-drilldown-page-change` — `{ prevPageId, newPageId, pageHistory }`.
+
+## Keyboard
+
+`↑`/`↓` move highlight (wrapping when `rotate-focus`), `Home`/`End` jump,
+`Enter`/`Space` activate, `→` drill into a sub-page, `←` go back. The React adapter
+delegates this to `<Selectable>`; here raw `keydown` handlers feed the shared
+`reduceHighlight`.
+
+## Theming
+
+Tokens come from a sibling `<instui-theme-provider>` (CSS custom properties +
+`instui-theme-change` event). `generateStyle` is resolved against
+`resolveTheme(...).components.Drilldown`, exactly like `<instui-alert>`.
diff --git a/packages/ui-web-core/src/Drilldown/icons.ts b/packages/ui-web-core/src/Drilldown/icons.ts
new file mode 100644
index 0000000000..46453c170f
--- /dev/null
+++ b/packages/ui-web-core/src/Drilldown/icons.ts
@@ -0,0 +1,67 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * POC icon set for the Lit Drilldown. Path data hand-copied from Lucide
+ * (lucide-react, ISC license) to match the React Drilldown's icons:
+ *
+ *   check        → CheckInstUIIcon        = lucide-react/check
+ *   chevronLeft  → ChevronLeftInstUIIcon  = lucide-react/chevron-left
+ *   chevronRight → ChevronRightInstUIIcon = lucide-react/chevron-right
+ *
+ * When `@instructure/ui-icons-svg` lands on this branch, these inline SVGs
+ * should be replaced by imports from that package so the source-of-truth
+ * lives in one place.
+ */
+
+import { html, svg, type TemplateResult } from 'lit'
+
+const wrap = (children: TemplateResult): TemplateResult => html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${children}
+  </svg>
+`
+
+export const checkIcon = wrap(svg`
+  <path d="M20 6 9 17l-5-5"></path>
+`)
+
+export const chevronLeftIcon = wrap(svg`
+  <path d="m15 18-6-6 6-6"></path>
+`)
+
+export const chevronRightIcon = wrap(svg`
+  <path d="m9 18 6-6-6-6"></path>
+`)
diff --git a/packages/ui-web-core/src/Drilldown/index.ts b/packages/ui-web-core/src/Drilldown/index.ts
new file mode 100644
index 0000000000..be95bbc817
--- /dev/null
+++ b/packages/ui-web-core/src/Drilldown/index.ts
@@ -0,0 +1,32 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { Drilldown } from './Drilldown'
+export type {
+  DrilldownConfigOption,
+  DrilldownConfigGroup,
+  DrilldownConfigPage,
+  DrilldownSelectDetail,
+  DrilldownPageChangeDetail
+} from './Drilldown'
diff --git a/packages/ui-web-core/src/Menu/Menu.stories.ts b/packages/ui-web-core/src/Menu/Menu.stories.ts
new file mode 100644
index 0000000000..bec9e43b48
--- /dev/null
+++ b/packages/ui-web-core/src/Menu/Menu.stories.ts
@@ -0,0 +1,180 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+import './Menu'
+// composition: register <instui-popover> for the dropdown story
+import '../Popover/Popover'
+import type { MenuConfigNode, MenuSelectDetail } from './Menu'
+
+const meta: Meta = {
+  title: 'ui-web-core/Menu',
+  component: 'instui-menu'
+}
+
+export default meta
+
+type Story = StoryObj
+
+const onSelect = (event: Event) => {
+  const { detail } = event as CustomEvent<MenuSelectDetail>
+  // eslint-disable-next-line no-console
+  console.log('instui-menu-select', detail)
+}
+
+// ---------------------------------------------------------------------------
+// Flat menu: plain items, a single-select group, a multi-select group
+// ---------------------------------------------------------------------------
+
+const items: MenuConfigNode[] = [
+  { id: 'new', label: 'New', value: 'new' },
+  { id: 'open', label: 'Open…', value: 'open' },
+  { separator: true, id: 'sep1' },
+  {
+    groupId: 'view',
+    label: 'View (single-select)',
+    allowMultiple: false,
+    defaultSelected: ['grid'],
+    items: [
+      { id: 'grid', label: 'Grid', value: 'grid' },
+      { id: 'list', label: 'List', value: 'list' },
+      { id: 'columns', label: 'Columns', value: 'columns' }
+    ]
+  },
+  { separator: true, id: 'sep2' },
+  {
+    groupId: 'panels',
+    label: 'Panels (multi-select)',
+    allowMultiple: true,
+    defaultSelected: ['sidebar'],
+    items: [
+      { id: 'sidebar', label: 'Sidebar', value: 'sidebar' },
+      { id: 'inspector', label: 'Inspector', value: 'inspector' },
+      { id: 'console', label: 'Console', value: 'console', disabled: true }
+    ]
+  }
+]
+
+export const Flat: Story = {
+  render: () => html`
+    <instui-menu
+      label="Editor menu"
+      .items=${items}
+      @instui-menu-select=${onSelect}
+    ></instui-menu>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Flyout submenus: an item with nested `items` opens a child menu in its own
+// nested <instui-popover> (hover / Right-arrow open, Left-arrow / Escape close)
+// ---------------------------------------------------------------------------
+
+const flyoutItems: MenuConfigNode[] = [
+  { id: 'cut', label: 'Cut', value: 'cut' },
+  { id: 'copy', label: 'Copy', value: 'copy' },
+  {
+    id: 'share',
+    label: 'Share',
+    items: [
+      { id: 'share-link', label: 'Copy link', value: 'share-link' },
+      { id: 'share-email', label: 'Email', value: 'share-email' },
+      {
+        id: 'share-social',
+        label: 'Social',
+        items: [
+          { id: 'share-x', label: 'X', value: 'share-x' },
+          { id: 'share-fb', label: 'Facebook', value: 'share-fb' }
+        ]
+      }
+    ]
+  },
+  { separator: true, id: 'sep' },
+  {
+    groupId: 'export',
+    label: 'Export as',
+    allowMultiple: false,
+    defaultSelected: ['pdf'],
+    items: [
+      { id: 'pdf', label: 'PDF', value: 'pdf' },
+      { id: 'png', label: 'PNG', value: 'png' }
+    ]
+  }
+]
+
+export const Flyout: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <p style="font-family: system-ui; max-width: 32rem; margin: 0 0 1rem;">
+      Hover or press <kbd>→</kbd> on “Share” / “Social” to open nested submenus
+      (each is a child <code>&lt;instui-menu&gt;</code> in its own
+      <code>&lt;instui-popover&gt;</code>). <kbd>←</kbd>/<kbd>Escape</kbd> or an
+      outside click closes them; focus returns to the parent item.
+    </p>
+    <instui-menu
+      label="Actions"
+      .items=${flyoutItems}
+      @instui-menu-select=${onSelect}
+    ></instui-menu>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown: the menu composed inside <instui-popover> (trigger mode)
+// ---------------------------------------------------------------------------
+
+export const Dropdown: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <div style="padding: 6rem; font-family: system-ui;">
+      <p style="max-width: 30rem;">
+        The menu composed inside <code>&lt;instui-popover&gt;</code>. Click the
+        trigger to open; keyboard-navigate; a selection closes the popover
+        (<code>shouldHideOnSelect</code>); click outside / <kbd>Escape</kbd>
+        dismisses.
+      </p>
+      <instui-popover
+        id="menu-popover"
+        placement="bottom start"
+        should-contain-focus
+        should-return-focus
+      >
+        <button slot="trigger" aria-haspopup="true">Actions ▾</button>
+        <instui-menu
+          label="Actions"
+          .items=${items}
+          @instui-menu-select=${(event: Event) => {
+            onSelect(event)
+            ;(
+              document.getElementById('menu-popover') as
+                | (HTMLElement & { hide?: () => void })
+                | null
+            )?.hide?.()
+          }}
+        ></instui-menu>
+      </instui-popover>
+    </div>
+  `
+}
diff --git a/packages/ui-web-core/src/Menu/Menu.ts b/packages/ui-web-core/src/Menu/Menu.ts
new file mode 100644
index 0000000000..8c3f73a4a7
--- /dev/null
+++ b/packages/ui-web-core/src/Menu/Menu.ts
@@ -0,0 +1,725 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { LitElement, html, nothing, type PropertyValues } from 'lit'
+
+import {
+  updateGroupSelection,
+  itemTypeForGroup,
+  nextFocusIndex,
+  computeInitialGroupSelection
+} from '@menu/Menu/v2/behavior'
+import type { MenuGroupSelection, NeutralMenuItem } from '@menu/Menu/v2/types'
+
+import { resolveTheme, themes, type ThemeName } from '../theme'
+import { checkIcon, chevronRightIcon } from './icons'
+// flyout submenus compose the sibling <instui-popover>; importing registers it
+import '../Popover/Popover'
+
+// ---------------------------------------------------------------------------
+// Declarative `items` config — the Lit producer of the neutral menu data
+// (the React Menu walks JSX children to produce the equivalent). A node with
+// `items` is a flyout submenu trigger (see flyout handling below).
+// ---------------------------------------------------------------------------
+
+export type MenuConfigItem = {
+  id: string
+  label: string
+  type?: 'button' | 'checkbox' | 'radio'
+  value?: string | number
+  disabled?: boolean
+  defaultSelected?: boolean
+  href?: string
+  /** presence makes this a flyout submenu trigger */
+  items?: MenuConfigNode[]
+}
+
+export type MenuConfigGroup = {
+  groupId: string
+  label?: string
+  allowMultiple?: boolean
+  /** controlled selected values */
+  selectedValues?: MenuGroupSelection
+  defaultSelected?: MenuGroupSelection
+  items: MenuConfigItem[]
+}
+
+export type MenuConfigSeparator = { separator: true; id: string }
+
+export type MenuConfigNode =
+  | MenuConfigItem
+  | MenuConfigGroup
+  | MenuConfigSeparator
+
+export type MenuSelectDetail = {
+  value: string | number | undefined
+  selected: boolean
+  groupId?: string
+}
+
+const isGroup = (n: MenuConfigNode): n is MenuConfigGroup =>
+  (n as MenuConfigGroup).groupId !== undefined
+const isSeparator = (n: MenuConfigNode): n is MenuConfigSeparator =>
+  (n as MenuConfigSeparator).separator === true
+
+const MENU_TAG = 'instui-menu'
+
+export class Menu extends LitElement {
+  static properties = {
+    items: { type: Array },
+    label: { type: String },
+    disabled: { type: Boolean },
+    shouldHideOnSelect: { type: Boolean, attribute: 'should-hide-on-select' },
+    themeName: { type: String, attribute: 'theme-name' },
+    _highlightedId: { state: true },
+    _itemSelected: { state: true },
+    _groupSelected: { state: true },
+    _activeSubmenuId: { state: true }
+  }
+
+  items: MenuConfigNode[] = []
+  label = ''
+  disabled = false
+  shouldHideOnSelect = true
+  themeName: ThemeName = 'defaultTheme'
+
+  private _highlightedId: string | undefined = undefined
+  private _itemSelected: Record<string, boolean> = {}
+  private _groupSelected: Record<string, MenuGroupSelection> = {}
+  private _activeSubmenuId: string | undefined = undefined
+
+  // Set by a parent menu when this menu is opened as a flyout submenu's content.
+  // Invoked on Left-arrow so the submenu can ask its owning popover to close
+  // (the popover's shouldReturnFocus restores focus to the parent trigger).
+  onCloseRequest: (() => void) | undefined = undefined
+
+  private _onThemeChange = (event: Event) => {
+    const detail = (event as CustomEvent<{ themeName: ThemeName }>).detail
+    if (detail?.themeName && themes[detail.themeName]) {
+      this.themeName = detail.themeName
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    window.removeEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override willUpdate(changed: PropertyValues<this>) {
+    if (changed.has('items')) {
+      const itemSelected: Record<string, boolean> = {}
+      const groupSelected: Record<string, MenuGroupSelection> = {}
+
+      for (const node of this.items ?? []) {
+        if (isSeparator(node)) continue
+        if (isGroup(node)) {
+          groupSelected[node.groupId] =
+            node.selectedValues ??
+            computeInitialGroupSelection(
+              this._neutralGroupItems(node),
+              node.allowMultiple,
+              node.defaultSelected
+            )
+        } else if (node.type === 'checkbox' || node.type === 'radio') {
+          itemSelected[node.id] = !!node.defaultSelected
+        }
+      }
+      this._itemSelected = itemSelected
+      this._groupSelected = groupSelected
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+
+  // Used by a parent menu when opening this menu as a flyout submenu, since the
+  // owning popover's FocusRegion cannot reach focusable nodes inside this
+  // element's shadow root.
+  focusFirstItem = () => {
+    const first = this._enabledItemIds[0]
+    if (first) this._setHighlight(first)
+  }
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  override render() {
+    const { menu, item, group } = this._resolveTokens()
+    const tabbableId = this._highlightedId ?? this._enabledItemIds[0]
+
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+        .menu {
+          box-sizing: border-box;
+          min-width: ${menu.minWidth};
+          max-width: ${menu.maxWidth};
+          margin: 0;
+          padding: 0.25rem 0;
+          list-style: none;
+          background: ${item.background};
+          font-family: ${item.fontFamily};
+          font-size: ${item.fontSize};
+          border: 1px solid rgba(0, 0, 0, 0.12);
+          border-radius: 4px;
+        }
+        .groupLabel {
+          display: block;
+          padding: ${group.paddingVertical} ${group.paddingHorizontal};
+          color: ${group.color};
+          font-weight: ${group.fontWeight};
+          font-size: ${group.fontSize};
+        }
+        .separator {
+          height: 1px;
+          margin: 0.25rem 0;
+          background: rgba(0, 0, 0, 0.12);
+          border: 0;
+        }
+        .menuItem {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          width: 100%;
+          box-sizing: border-box;
+          padding: ${item.paddingVertical} ${item.paddingHorizontal};
+          background: transparent;
+          border: 0;
+          font: inherit;
+          text-align: start;
+          color: ${item.labelColor};
+          cursor: pointer;
+        }
+        .menuItem[aria-disabled='true'] {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .menuItem:hover:not([aria-disabled='true']),
+        .menuItem:focus-visible {
+          outline: none;
+          background: ${item.highlightedBackground};
+          color: ${item.highlightedLabelColor};
+        }
+        .menuItem[aria-checked='true'] {
+          background: ${item.activeBackground};
+          color: ${item.activeLabelColor};
+        }
+        .check {
+          width: 1rem;
+          flex-shrink: 0;
+          display: inline-flex;
+        }
+        .check svg,
+        .chevron svg {
+          width: 1rem;
+          height: 1rem;
+          display: block;
+        }
+        .label {
+          flex-grow: 1;
+        }
+        .chevron {
+          margin-inline-start: auto;
+          display: inline-flex;
+        }
+      </style>
+      <ul
+        class="menu"
+        role="menu"
+        aria-label=${this.label || nothing}
+        @keydown=${this._handleKeyDown}
+      >
+        ${(this.items ?? []).map((node) => this._renderNode(node, tabbableId))}
+      </ul>
+    `
+  }
+
+  private _renderNode(node: MenuConfigNode, tabbableId?: string) {
+    if (isSeparator(node)) {
+      return html`<li role="separator" class="separator"></li>`
+    }
+    if (isGroup(node)) {
+      const role = itemTypeForGroup(node.allowMultiple)
+      return html`
+        ${node.label
+          ? html`<li class="groupLabel" role="presentation">${node.label}</li>`
+          : nothing}
+        ${node.items.map((it, i) =>
+          this._renderItem(it, tabbableId, {
+            role: role === 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio',
+            selected: !!this._groupSelected[node.groupId]?.includes(
+              this._itemValue(it, i)
+            ),
+            groupId: node.groupId
+          })
+        )}
+      `
+    }
+    if (node.items) return this._renderFlyoutItem(node, tabbableId)
+    return this._renderItem(node, tabbableId, this._standaloneMeta(node))
+  }
+
+  private _renderFlyoutItem(item: MenuConfigItem, tabbableId?: string) {
+    const isDisabled = !!item.disabled || this.disabled
+    const tabindex = item.id === tabbableId && !isDisabled ? 0 : -1
+    const expanded = this._activeSubmenuId === item.id
+
+    return html`
+      <li role="none">
+        <instui-popover
+          data-flyout-for=${item.id}
+          placement="end top"
+          offset-x="-5"
+          offset-y="5"
+          should-return-focus
+          style="display: block;"
+          @instui-popover-hide=${() => this._onFlyoutHide(item.id)}
+        >
+          <button
+            slot="trigger"
+            class="menuItem"
+            type="button"
+            role="menuitem"
+            data-item-id=${item.id}
+            tabindex=${tabindex}
+            aria-haspopup="true"
+            aria-expanded=${expanded ? 'true' : 'false'}
+            aria-disabled=${isDisabled ? 'true' : nothing}
+            @click=${() => {
+              if (!isDisabled) this._toggleSubmenu(item.id)
+            }}
+            @mouseenter=${() => this._hoverItem(item.id, !isDisabled)}
+          >
+            <span class="label">${item.label}</span>
+            <span class="chevron" aria-hidden="true">${chevronRightIcon}</span>
+          </button>
+          <instui-menu
+            data-submenu-for=${item.id}
+            theme-name=${this.themeName}
+            .items=${item.items ?? []}
+            @instui-menu-select=${(e: Event) => this._onSubmenuSelect(e)}
+          ></instui-menu>
+        </instui-popover>
+      </li>
+    `
+  }
+
+  private _standaloneMeta(item: MenuConfigItem) {
+    if (item.items) return { role: 'menuitem', selected: false, flyout: true }
+    if (item.type === 'checkbox') {
+      return {
+        role: 'menuitemcheckbox',
+        selected: !!this._itemSelected[item.id]
+      }
+    }
+    if (item.type === 'radio') {
+      return { role: 'menuitemradio', selected: !!this._itemSelected[item.id] }
+    }
+    return { role: 'menuitem', selected: false }
+  }
+
+  private _renderItem(
+    item: MenuConfigItem,
+    tabbableId: string | undefined,
+    meta: {
+      role: string
+      selected: boolean
+      groupId?: string
+      flyout?: boolean
+    }
+  ) {
+    const isDisabled = !!item.disabled || this.disabled
+    const selectable =
+      meta.role === 'menuitemcheckbox' || meta.role === 'menuitemradio'
+    const tabindex = item.id === tabbableId && !isDisabled ? 0 : -1
+
+    return html`
+      <li role="none">
+        <button
+          class="menuItem"
+          type="button"
+          role=${meta.role}
+          data-item-id=${item.id}
+          tabindex=${tabindex}
+          aria-disabled=${isDisabled ? 'true' : nothing}
+          aria-checked=${selectable ? String(meta.selected) : nothing}
+          aria-haspopup=${meta.flyout ? 'true' : nothing}
+          @click=${() => this._activate(item, meta)}
+          @mouseenter=${() => this._hoverItem(item.id, false)}
+        >
+          ${selectable
+            ? html`<span class="check" aria-hidden="true"
+                >${meta.selected ? checkIcon : nothing}</span
+              >`
+            : nothing}
+          <span class="label">${item.label}</span>
+          ${meta.flyout
+            ? html`<span class="chevron" aria-hidden="true"
+                >${chevronRightIcon}</span
+              >`
+            : nothing}
+        </button>
+      </li>
+    `
+  }
+
+  // -------------------------------------------------------------------------
+  // Selection + activation
+  // -------------------------------------------------------------------------
+
+  private _activate(
+    item: MenuConfigItem,
+    meta: {
+      role: string
+      selected: boolean
+      groupId?: string
+      flyout?: boolean
+    }
+  ) {
+    if (item.disabled || this.disabled) return
+
+    if (meta.flyout) {
+      this._openSubmenu(item.id)
+      return
+    }
+
+    if (meta.groupId) {
+      const node = this._findGroup(meta.groupId)!
+      const value = this._itemValue(item, node.items.indexOf(item))
+      const next = updateGroupSelection(
+        this._groupSelected[meta.groupId] ?? [],
+        value,
+        !meta.selected,
+        !!node.allowMultiple
+      )
+      this._groupSelected = { ...this._groupSelected, [meta.groupId]: next }
+      this._dispatchSelect({
+        value,
+        selected: next.includes(value),
+        groupId: meta.groupId
+      })
+    } else if (item.type === 'checkbox' || item.type === 'radio') {
+      const selected = !this._itemSelected[item.id]
+      this._itemSelected = { ...this._itemSelected, [item.id]: selected }
+      this._dispatchSelect({ value: item.value ?? item.id, selected })
+    } else {
+      // plain button item
+      this._dispatchSelect({ value: item.value ?? item.id, selected: true })
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Keyboard — DOM-focus roving (mirrors React Menu.moveFocus)
+  // -------------------------------------------------------------------------
+
+  private _handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'PageDown':
+        event.preventDefault()
+        this._moveFocus(1)
+        break
+      case 'ArrowUp':
+      case 'PageUp':
+        event.preventDefault()
+        this._moveFocus(-1)
+        break
+      case 'Home':
+        event.preventDefault()
+        this._setHighlight(this._enabledItemIds[0])
+        break
+      case 'End': {
+        event.preventDefault()
+        const ids = this._enabledItemIds
+        this._setHighlight(ids[ids.length - 1])
+        break
+      }
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (this._highlightedId) this._activateById(this._highlightedId)
+        break
+      case 'ArrowRight':
+        if (this._highlightedId && this._findFlyoutItem(this._highlightedId)) {
+          event.preventDefault()
+          this._openSubmenu(this._highlightedId)
+        }
+        break
+      case 'ArrowLeft':
+        // close this menu if it is itself a flyout submenu
+        if (this.onCloseRequest) {
+          event.preventDefault()
+          this.onCloseRequest()
+        }
+        break
+      default:
+        break
+    }
+  }
+
+  private _moveFocus(step: -1 | 1) {
+    // navigating away closes any open submenu (mirrors React hideActiveSubMenu)
+    this._closeActiveSubmenu()
+    const ids = this._enabledItemIds
+    const current = this._highlightedId ? ids.indexOf(this._highlightedId) : -1
+    const next = nextFocusIndex(current, ids.length, step)
+    if (next !== null) this._setHighlight(ids[next])
+  }
+
+  private _setHighlight(id: string | undefined) {
+    if (!id) return
+    this._highlightedId = id
+    void this.updateComplete.then(() => {
+      const el = this.renderRoot.querySelector(
+        `[data-item-id="${CSS.escape(id)}"]`
+      ) as HTMLElement | null
+      el?.focus()
+    })
+  }
+
+  // -------------------------------------------------------------------------
+  // Derived data + helpers
+  // -------------------------------------------------------------------------
+
+  private get _enabledItemIds(): string[] {
+    const ids: string[] = []
+    for (const node of this.items ?? []) {
+      if (isSeparator(node)) continue
+      const list = isGroup(node) ? node.items : [node]
+      for (const it of list) {
+        if (!it.disabled && !this.disabled) ids.push(it.id)
+      }
+    }
+    return ids
+  }
+
+  private _itemValue(item: MenuConfigItem, index: number): string | number {
+    return item.value ?? item.id ?? index
+  }
+
+  private _neutralGroupItems(group: MenuConfigGroup): NeutralMenuItem[] {
+    return group.items.map((it, i) => ({
+      id: it.id,
+      label: it.label,
+      value: this._itemValue(it, i),
+      defaultSelected: it.defaultSelected
+    }))
+  }
+
+  private _findGroup(groupId: string): MenuConfigGroup | undefined {
+    return (this.items ?? []).find(
+      (n): n is MenuConfigGroup => isGroup(n) && n.groupId === groupId
+    )
+  }
+
+  private _findItemById(
+    id: string
+  ):
+    | {
+        item: MenuConfigItem
+        meta:
+          | ReturnType<Menu['_standaloneMeta']>
+          | { role: string; selected: boolean; groupId?: string }
+      }
+    | undefined {
+    for (const node of this.items ?? []) {
+      if (isSeparator(node)) continue
+      if (isGroup(node)) {
+        const idx = node.items.findIndex((it) => it.id === id)
+        if (idx > -1) {
+          const it = node.items[idx]
+          const role = itemTypeForGroup(node.allowMultiple)
+          return {
+            item: it,
+            meta: {
+              role: role === 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio',
+              selected: !!this._groupSelected[node.groupId]?.includes(
+                this._itemValue(it, idx)
+              ),
+              groupId: node.groupId
+            }
+          }
+        }
+      } else if (node.id === id) {
+        return { item: node, meta: this._standaloneMeta(node) }
+      }
+    }
+    return undefined
+  }
+
+  private _activateById(id: string) {
+    const found = this._findItemById(id)
+    if (found) this._activate(found.item, found.meta)
+  }
+
+  // -------------------------------------------------------------------------
+  // Flyout submenus (nested <instui-popover> + <instui-menu>)
+  // -------------------------------------------------------------------------
+
+  private _hoverItem(id: string, isFlyout: boolean) {
+    this._highlightedId = id
+    if (isFlyout) this._openSubmenu(id)
+    else this._closeActiveSubmenu()
+  }
+
+  private _toggleSubmenu(id: string) {
+    if (this._activeSubmenuId === id) this._closeActiveSubmenu()
+    else this._openSubmenu(id)
+  }
+
+  private _flyoutPopover(id: string):
+    | (HTMLElement & {
+        show?: () => void
+        hide?: () => void
+        updateComplete?: Promise<unknown>
+      })
+    | null {
+    return this.renderRoot.querySelector(
+      `[data-flyout-for="${CSS.escape(id)}"]`
+    )
+  }
+
+  private _openSubmenu(id: string) {
+    if (this._activeSubmenuId === id) return
+    this._closeActiveSubmenu()
+
+    const pop = this._flyoutPopover(id)
+    if (!pop) return
+
+    // grab the child menu reference BEFORE show() relocates it to the body portal
+    const childMenu = pop.querySelector('instui-menu') as
+      | (HTMLElement & {
+          focusFirstItem?: () => void
+          onCloseRequest?: () => void
+        })
+      | null
+    if (childMenu) {
+      childMenu.onCloseRequest = () => pop.hide?.()
+    }
+
+    pop.show?.()
+    this._activeSubmenuId = id
+
+    // the popover's FocusRegion can't reach the child menu's shadow items, so
+    // the parent drives initial focus into the submenu after it has portaled
+    if (childMenu) {
+      pop.updateComplete?.then(() =>
+        requestAnimationFrame(() => childMenu.focusFirstItem?.())
+      )
+    }
+  }
+
+  private _closeActiveSubmenu() {
+    if (!this._activeSubmenuId) return
+    this._flyoutPopover(this._activeSubmenuId)?.hide?.()
+    this._activeSubmenuId = undefined
+  }
+
+  private _onFlyoutHide(id: string) {
+    // popover closed (outside click / Escape / programmatic)
+    if (this._activeSubmenuId === id) this._activeSubmenuId = undefined
+  }
+
+  private _onSubmenuSelect(event: Event) {
+    const detail = (event as CustomEvent<MenuSelectDetail>).detail
+    // re-dispatch from this (outer) menu so it reaches the consumer (the child
+    // menu lives in a body portal, so its own event won't bubble back here)
+    this._dispatchSelect(detail)
+    this._closeActiveSubmenu()
+  }
+
+  private _findFlyoutItem(id: string): MenuConfigItem | undefined {
+    for (const node of this.items ?? []) {
+      if (isSeparator(node) || isGroup(node)) continue
+      if (node.id === id && node.items) return node
+    }
+    return undefined
+  }
+
+  private _resolveTokens() {
+    const theme = themes[this.themeName] ?? themes.defaultTheme
+    const resolved = resolveTheme(theme.raw, {})
+    const components = resolved.components as Record<
+      string,
+      Record<string, string>
+    >
+    const menu = components.Menu ?? {}
+    const item = components.MenuItem ?? {}
+    const group = components.MenuGroup ?? {}
+    return {
+      menu: {
+        minWidth: menu.minWidth ?? '12rem',
+        maxWidth: menu.maxWidth ?? '24rem'
+      },
+      item: {
+        background: item.background ?? '#fff',
+        labelColor: item.labelColor ?? '#2d3b45',
+        activeBackground: item.activeBackground ?? '#0374b5',
+        activeLabelColor: item.activeLabelColor ?? '#fff',
+        highlightedBackground: item.highlightedBackground ?? '#f5f5f5',
+        highlightedLabelColor: item.highlightedLabelColor ?? '#2d3b45',
+        fontFamily: item.fontFamily ?? 'system-ui, sans-serif',
+        fontSize: item.fontSize ?? '1rem',
+        paddingVertical: item.paddingVertical ?? '0.5rem',
+        paddingHorizontal: item.paddingHorizontal ?? '0.75rem'
+      },
+      group: {
+        color: group.color ?? '#6b7780',
+        fontWeight: String(group.fontWeight ?? 700),
+        fontSize: group.fontSize ?? '0.875rem',
+        paddingVertical: group.paddingVertical ?? '0.375rem',
+        paddingHorizontal: group.paddingHorizontal ?? '0.75rem'
+      }
+    }
+  }
+
+  private _dispatchSelect(detail: MenuSelectDetail) {
+    this.dispatchEvent(
+      new CustomEvent<MenuSelectDetail>('instui-menu-select', {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get(MENU_TAG)) {
+  customElements.define(MENU_TAG, Menu)
+}
diff --git a/packages/ui-web-core/src/Menu/README.md b/packages/ui-web-core/src/Menu/README.md
new file mode 100644
index 0000000000..7b8d632a27
--- /dev/null
+++ b/packages/ui-web-core/src/Menu/README.md
@@ -0,0 +1,70 @@
+# `<instui-menu>`
+
+Framework-agnostic (Lit) port of the React `@instructure/ui-menu`, POC stage 4
+(after Alert → Drilldown → Popover). Menu's trigger/flyout mode uses
+`@instructure/ui-popover`, so this stage **composes** the already-extracted
+`<instui-popover>` for both its dropdown mode and its flyout submenus.
+
+## What is shared vs reused
+
+- **Single source of truth (extracted, React-free):** `@menu/Menu/v2/behavior` —
+  `updateGroupSelection` (radio/checkbox array reducer), `resolveItemSelected`,
+  `resolveGroupSelectedValues`, `itemTypeForGroup`, `nextFocusIndex` (roving-focus
+  math), `computeInitialGroupSelection`. Both the React Menu and this element
+  consume them. Menu's selection is **distributed** (a value array per group + a
+  boolean per item) — intentionally not a centralized map like Drilldown.
+- **Popover (reused):** dropdown + flyout submenus nest `<instui-popover>`.
+
+## Usage
+
+Content is a declarative `items` config property (groups / separators / items;
+an item with nested `items` is a flyout submenu):
+
+```ts
+import '@instructure/ui-web-core' // registers <instui-menu>
+
+const el = document.createElement('instui-menu')
+el.items = [
+  { id: 'new', label: 'New', value: 'new' },
+  { separator: true, id: 's1' },
+  {
+    groupId: 'view',
+    label: 'View',
+    allowMultiple: false,
+    defaultSelected: ['grid'],
+    items: [
+      { id: 'grid', label: 'Grid', value: 'grid' },
+      { id: 'list', label: 'List', value: 'list' }
+    ]
+  },
+  {
+    id: 'share',
+    label: 'Share',
+    items: [
+      /* nested submenu items */
+    ]
+  }
+]
+el.addEventListener('instui-menu-select', (e) => console.log(e.detail))
+```
+
+- Event: `instui-menu-select` — `{ value, selected, groupId? }`.
+- Keyboard: ↑/↓ (and PageUp/PageDown) roving focus, Home/End, Enter/Space activate,
+  → opens a flyout, ← closes a flyout (returns focus to the parent item).
+- **Dropdown mode:** compose with `<instui-popover>` (see the `Dropdown` story);
+  wire `shouldHideOnSelect` by calling `popover.hide()` from `instui-menu-select`.
+
+## Flyout submenus + the focus constraint
+
+Each flyout item renders a nested `<instui-popover>` whose content is a child
+`<instui-menu>` built from the item's nested `items`. Because `FocusRegion`'s
+`findTabbable` / screen-reader walk **do not cross shadow boundaries**, the nested
+popover cannot focus or arrow-navigate the child menu's items. So **the menu owns
+all roving focus**: after opening, the parent imperatively calls the child's
+`focusFirstItem()`; the popover provides only outside-click/Escape/return-focus.
+Active-submenu tracking closes the previous flyout when focus moves to a sibling.
+
+## POC scope
+
+`on='click'` dropdown + hover/Right-arrow flyouts. Theming via a sibling
+`<instui-theme-provider>` (tokens resolved from `resolved.components.{Menu,MenuItem,MenuGroup}`).
diff --git a/packages/ui-web-core/src/Menu/icons.ts b/packages/ui-web-core/src/Menu/icons.ts
new file mode 100644
index 0000000000..f860a52b32
--- /dev/null
+++ b/packages/ui-web-core/src/Menu/icons.ts
@@ -0,0 +1,53 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * POC icon set for the Lit Menu — `check` (selected indicator) and
+ * `chevron-right` (flyout submenu indicator). Path data hand-copied from Lucide
+ * (ISC), matching the React Menu v2 icons. Replace with `@instructure/ui-icons-svg`
+ * imports when that lands so the source-of-truth lives in one place.
+ */
+
+import { html, svg, type TemplateResult } from 'lit'
+
+const wrap = (children: TemplateResult): TemplateResult => html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${children}
+  </svg>
+`
+
+export const checkIcon = wrap(svg`<path d="M20 6 9 17l-5-5"></path>`)
+
+export const chevronRightIcon = wrap(svg`<path d="m9 18 6-6-6-6"></path>`)
diff --git a/packages/ui-web-core/src/Menu/index.ts b/packages/ui-web-core/src/Menu/index.ts
new file mode 100644
index 0000000000..a5343a1f3a
--- /dev/null
+++ b/packages/ui-web-core/src/Menu/index.ts
@@ -0,0 +1,32 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { Menu } from './Menu'
+export type {
+  MenuConfigItem,
+  MenuConfigGroup,
+  MenuConfigSeparator,
+  MenuConfigNode,
+  MenuSelectDetail
+} from './Menu'
diff --git a/packages/ui-web-core/src/Popover/Popover.stories.ts b/packages/ui-web-core/src/Popover/Popover.stories.ts
new file mode 100644
index 0000000000..7df731adf8
--- /dev/null
+++ b/packages/ui-web-core/src/Popover/Popover.stories.ts
@@ -0,0 +1,119 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+import './Popover'
+
+type Args = {
+  placement: string
+}
+
+const meta: Meta<Args> = {
+  title: 'ui-web-core/Popover',
+  component: 'instui-popover',
+  argTypes: {
+    placement: {
+      control: { type: 'select' },
+      options: [
+        'top center',
+        'bottom center',
+        'start center',
+        'end center',
+        'top start',
+        'bottom start'
+      ]
+    }
+  },
+  args: { placement: 'bottom center' }
+}
+
+export default meta
+
+type Story = StoryObj<Args>
+
+const onShow = () => {
+  // eslint-disable-next-line no-console
+  console.log('instui-popover-show')
+}
+
+const onHide = (event: Event) => {
+  // eslint-disable-next-line no-console
+  console.log('instui-popover-hide', (event as CustomEvent).detail)
+}
+
+// ---------------------------------------------------------------------------
+// Click-triggered popover with focusable content (contain + return focus)
+// ---------------------------------------------------------------------------
+
+export const Playground: Story = {
+  render: (args) => html`
+    <div style="padding: 6rem; font-family: system-ui;">
+      <instui-popover
+        placement=${args.placement}
+        should-contain-focus
+        should-return-focus
+        @instui-popover-show=${onShow}
+        @instui-popover-hide=${onHide}
+      >
+        <button slot="trigger">Open popover</button>
+        <div style="padding: 1rem; max-width: 16rem;">
+          <p style="margin: 0 0 0.5rem;">Focusable popover content.</p>
+          <button>An action</button>
+        </div>
+      </instui-popover>
+    </div>
+  `
+}
+
+// ---------------------------------------------------------------------------
+// Click-outside + Escape to dismiss (via the shared FocusRegion)
+// ---------------------------------------------------------------------------
+
+export const DismissBehavior: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => html`
+    <div style="padding: 6rem; font-family: system-ui;">
+      <p style="max-width: 28rem;">
+        Open the popover, then click anywhere outside it or press
+        <kbd>Escape</kbd> — both route through
+        <code>FocusRegion.onDismiss</code> to <code>hide()</code>, firing
+        <code>instui-popover-hide</code> (with <code>documentClick</code> set
+        for outside clicks).
+      </p>
+      <instui-popover
+        placement="bottom start"
+        should-contain-focus
+        should-return-focus
+        @instui-popover-hide=${onHide}
+      >
+        <button slot="trigger">Menu</button>
+        <div style="padding: 0.5rem;">
+          <button style="display:block; width:100%;">First</button>
+          <button style="display:block; width:100%;">Second</button>
+        </div>
+      </instui-popover>
+    </div>
+  `
+}
diff --git a/packages/ui-web-core/src/Popover/Popover.ts b/packages/ui-web-core/src/Popover/Popover.ts
new file mode 100644
index 0000000000..fdd4481579
--- /dev/null
+++ b/packages/ui-web-core/src/Popover/Popover.ts
@@ -0,0 +1,479 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { LitElement, html } from 'lit'
+
+import generateStyle from '@popover/Popover/v2/styles'
+import {
+  resolveShown,
+  resolveShowIntent,
+  resolveHideIntent,
+  resolveToggleIntent,
+  resolvePlacement
+} from '@popover/Popover/v2/behavior'
+import type { PopoverColor, PopoverPlacement } from '@popover/Popover/v2/types'
+import { calculateElementPosition } from '@position/calculateElementPosition'
+import { mirrorHorizontalPlacement } from '@position/mirrorHorizontalPlacement'
+import { FocusRegion } from '@a11y/FocusRegion'
+
+import {
+  resolveTheme,
+  themes,
+  styleObjectToCss,
+  type ThemeName
+} from '../theme'
+
+const POPOVER_TAG = 'instui-popover'
+
+export type PopoverHideDetail = { documentClick: boolean }
+
+/**
+ * Framework-agnostic (Lit) port of `@instructure/ui-popover`, POC stage 3.
+ *
+ * The controlled/uncontrolled show/hide state machine is the shared, React-free
+ * single source of truth (`@popover/Popover/v2/behavior`). Positioning reuses
+ * the already-React-free `calculateElementPosition` from `@instructure/ui-position`,
+ * and focus management reuses `FocusRegion` from `@instructure/ui-a11y-utils`.
+ *
+ * Trigger + content are expressed via slots (`slot="trigger"` + default slot).
+ * The positioned content is portaled to `document.body` so `calculateElementPosition`'s
+ * body-relative coordinates are valid (mirrors what the React `Position`/`Portal`
+ * does); scoped styles travel via an inlined `<style>` in the portal.
+ *
+ * POC scope: `on='click'` only. No hover/focus triggers, no tooltip mode, no arrow.
+ */
+export class Popover extends LitElement {
+  static properties = {
+    defaultIsShowingContent: {
+      type: Boolean,
+      attribute: 'default-is-showing-content'
+    },
+    placement: { type: String },
+    offsetX: { type: Number, attribute: 'offset-x' },
+    offsetY: { type: Number, attribute: 'offset-y' },
+    constrain: { type: String },
+    color: { type: String },
+    shouldContainFocus: { type: Boolean, attribute: 'should-contain-focus' },
+    shouldReturnFocus: { type: Boolean, attribute: 'should-return-focus' },
+    shouldCloseOnDocumentClick: {
+      type: Boolean,
+      attribute: 'should-close-on-document-click'
+    },
+    shouldCloseOnEscape: {
+      type: Boolean,
+      attribute: 'should-close-on-escape'
+    },
+    mountNodeSelector: { type: String, attribute: 'mount-node' },
+    themeName: { type: String, attribute: 'theme-name' },
+    _stateShown: { state: true }
+  }
+
+  // Public reactive props (defaults mirror the v2 React Popover).
+  defaultIsShowingContent = false
+  placement: PopoverPlacement = 'bottom center'
+  offsetX: string | number = 0
+  offsetY: string | number = 0
+  constrain = 'window'
+  color: PopoverColor = 'primary'
+  shouldContainFocus = false
+  shouldReturnFocus = true
+  shouldCloseOnDocumentClick = true
+  shouldCloseOnEscape = true
+  mountNodeSelector = ''
+  themeName: ThemeName = 'defaultTheme'
+
+  // Imperative nullable controlled prop — `null` means uncontrolled (so the
+  // `undefined`-means-uncontrolled contract survives; a Boolean attribute would
+  // default to `false` and break it). Set via `el.isShowingContent = true`.
+  isShowingContent: boolean | null = null
+
+  private _stateShown = false
+
+  private _portal: HTMLDivElement | null = null
+  private _portalStyle: HTMLStyleElement | null = null
+  private _targetProxy: HTMLDivElement | null = null
+  private _contentNodes: Node[] = []
+  private _triggerEl: HTMLElement | null = null
+  private _focusRegion: FocusRegion | null = null
+
+  private _onThemeChange = (event: Event) => {
+    const detail = (event as CustomEvent<{ themeName: ThemeName }>).detail
+    if (detail?.themeName && themes[detail.themeName]) {
+      this.themeName = detail.themeName
+      if (this.shown) this._reflectContentStyles()
+    }
+  }
+
+  private _onReposition = () => this._reposition()
+
+  // -------------------------------------------------------------------------
+  // Public API (mirrors the React Popover contract Drilldown depends on)
+  // -------------------------------------------------------------------------
+
+  get shown(): boolean {
+    return resolveShown(
+      this.isShowingContent === null ? undefined : this.isShowingContent,
+      this._stateShown
+    )
+  }
+
+  show = (event?: Event) => {
+    const intent = resolveShowIntent(this.isShowingContent !== null)
+    if (intent.setStateShown !== null) this._stateShown = intent.setStateShown
+    if (intent.fireShow) {
+      this.dispatchEvent(
+        new CustomEvent('instui-popover-show', {
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+    // open the portal regardless of controlled/uncontrolled (it reflects `shown`)
+    void this.updateComplete.then(() => this._openPortal())
+    void event
+  }
+
+  hide = (event?: Event, documentClick = false) => {
+    // read the pre-transition visibility synchronously — the parity move with
+    // React's functional-setState snapshot read
+    const wasShown = this.shown
+    const intent = resolveHideIntent({
+      isControlled: this.isShowingContent !== null,
+      currentShown: wasShown
+    })
+    if (intent.setStateShown !== null) this._stateShown = intent.setStateShown
+    if (intent.fireHide) {
+      this.dispatchEvent(
+        new CustomEvent<PopoverHideDetail>('instui-popover-hide', {
+          detail: { documentClick },
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+    this._closePortal()
+    void event
+  }
+
+  toggle = (event?: Event) => {
+    if (resolveToggleIntent(this.shown) === 'show') this.show(event)
+    else this.hide(event)
+  }
+
+  // -------------------------------------------------------------------------
+  // Lifecycle
+  // -------------------------------------------------------------------------
+
+  override connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+  }
+
+  override firstUpdated() {
+    this._triggerEl = this._resolveTriggerEl()
+    if (this.defaultIsShowingContent && this.isShowingContent === null) {
+      this._stateShown = true
+    }
+    if (this.shown) void this.updateComplete.then(() => this._openPortal())
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    window.removeEventListener(
+      'instui-theme-change',
+      this._onThemeChange as EventListener
+    )
+    this._teardownPortal()
+  }
+
+  override render() {
+    // Trigger lives in light DOM (slotted) so the consumer's click/ARIA work.
+    // The default slot holds the content, which is relocated into the body
+    // portal on show. It is hidden in-place so it never renders twice.
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+        ::slotted([slot='trigger']) {
+          cursor: pointer;
+        }
+        .content {
+          display: none;
+        }
+      </style>
+      <slot name="trigger" @click=${this._onTriggerClick}></slot>
+      <slot class="content"></slot>
+    `
+  }
+
+  // -------------------------------------------------------------------------
+  // Internals
+  // -------------------------------------------------------------------------
+
+  private _onTriggerClick = (event: Event) => {
+    this.toggle(event)
+  }
+
+  private _resolveTriggerEl(): HTMLElement | null {
+    // Query the light-DOM trigger child directly — deterministic regardless of
+    // slot-assignment timing or how deeply the popover is nested (a flyout
+    // popover lives inside the parent menu's shadow root, where
+    // `slot.assignedElements()` can come back empty at measure time).
+    const direct = this.querySelector(
+      ':scope > [slot="trigger"]'
+    ) as HTMLElement | null
+    if (direct) return direct
+
+    const slot = this.renderRoot.querySelector(
+      'slot[name="trigger"]'
+    ) as HTMLSlotElement | null
+    return (slot?.assignedElements()[0] as HTMLElement) ?? null
+  }
+
+  private _contentSlot(): HTMLSlotElement | null {
+    return this.renderRoot.querySelector(
+      'slot.content'
+    ) as HTMLSlotElement | null
+  }
+
+  private _ensurePortal() {
+    if (this._portal) return
+    const portal = document.createElement('div')
+    portal.setAttribute('data-instui-popover-portal', '')
+    portal.style.position = 'absolute'
+    portal.style.top = '0'
+    portal.style.left = '0'
+    portal.style.boxSizing = 'border-box'
+    portal.style.zIndex = '9999'
+    const style = document.createElement('style')
+    portal.appendChild(style)
+    this._portal = portal
+    this._portalStyle = style
+  }
+
+  // A hidden light-DOM stand-in for the trigger, kept in document.body so
+  // `calculateElementPosition` can measure it (it can't measure a shadow-DOM
+  // trigger). Mirrors the trigger's viewport rect on each reposition.
+  private _ensureTargetProxy(): HTMLDivElement {
+    if (!this._targetProxy) {
+      const proxy = document.createElement('div')
+      proxy.setAttribute('data-instui-popover-target', '')
+      proxy.style.position = 'fixed'
+      proxy.style.margin = '0'
+      proxy.style.padding = '0'
+      proxy.style.pointerEvents = 'none'
+      proxy.style.visibility = 'hidden'
+      this._targetProxy = proxy
+    }
+    if (!this._targetProxy.parentNode) {
+      document.body.appendChild(this._targetProxy)
+    }
+    return this._targetProxy
+  }
+
+  private _mountNode(): HTMLElement {
+    if (this.mountNodeSelector) {
+      const el = document.querySelector(this.mountNodeSelector)
+      if (el instanceof HTMLElement) return el
+    }
+    return document.body
+  }
+
+  private _openPortal() {
+    if (!this.shown) return
+    this._triggerEl = this._resolveTriggerEl()
+    this._ensurePortal()
+    const portal = this._portal!
+
+    // relocate the slotted content nodes into the portal
+    const slot = this._contentSlot()
+    this._contentNodes = (slot?.assignedNodes() ?? []).slice()
+    this._contentNodes.forEach((node) => portal.appendChild(node))
+
+    this._reflectContentStyles()
+    this._mountNode().appendChild(portal)
+    portal.style.display = 'block'
+
+    this._reposition()
+    // re-measure after layout settles (the portaled content's custom elements
+    // may not have a final size on the first synchronous pass)
+    requestAnimationFrame(() => this._reposition())
+    window.addEventListener('scroll', this._onReposition, true)
+    window.addEventListener('resize', this._onReposition)
+
+    // focus management via the shared FocusRegion
+    this._focusRegion = new FocusRegion(portal, {
+      shouldContainFocus: this.shouldContainFocus,
+      shouldReturnFocus: this.shouldReturnFocus,
+      shouldCloseOnEscape: this.shouldCloseOnEscape,
+      shouldCloseOnDocumentClick: this.shouldCloseOnDocumentClick,
+      onDismiss: (event, documentClick) => {
+        // ignore the document-click that is the trigger itself — its own click
+        // handler already toggled (avoids a redundant double-hide)
+        if (
+          documentClick &&
+          this._triggerEl &&
+          event.target instanceof Node &&
+          this._triggerEl.contains(event.target)
+        ) {
+          return
+        }
+        this.hide(event as unknown as Event, !!documentClick)
+      }
+    })
+    this._focusRegion.activate()
+    this._focusRegion.focus()
+  }
+
+  private _closePortal() {
+    if (!this._portal) return
+    window.removeEventListener('scroll', this._onReposition, true)
+    window.removeEventListener('resize', this._onReposition)
+
+    this._focusRegion?.deactivate()
+    this._focusRegion?.blur()
+    this._focusRegion = null
+
+    // move the content nodes back into the host light DOM
+    this._contentNodes.forEach((node) => this.appendChild(node))
+    this._contentNodes = []
+
+    this._portal.style.display = 'none'
+    if (this._portal.parentNode) {
+      this._portal.parentNode.removeChild(this._portal)
+    }
+  }
+
+  private _teardownPortal() {
+    this._focusRegion?.deactivate()
+    this._focusRegion?.blur()
+    this._focusRegion = null
+    window.removeEventListener('scroll', this._onReposition, true)
+    window.removeEventListener('resize', this._onReposition)
+    if (this._portal?.parentNode) {
+      this._portal.parentNode.removeChild(this._portal)
+    }
+    if (this._targetProxy?.parentNode) {
+      this._targetProxy.parentNode.removeChild(this._targetProxy)
+    }
+    this._portal = null
+    this._portalStyle = null
+    this._targetProxy = null
+  }
+
+  private _resolveTheme() {
+    const theme = themes[this.themeName] ?? themes.defaultTheme
+    const resolved = resolveTheme(theme.raw, {})
+    return resolved.components.Popover as Parameters<typeof generateStyle>[0]
+  }
+
+  // Writes the popover chrome + scoped CSS onto the body portal (which lives
+  // outside the shadow root, so scoped styles must be inlined here).
+  private _reflectContentStyles() {
+    if (!this._portal || !this._portalStyle) return
+    const componentTheme = this._resolveTheme()
+    const styleObj = generateStyle(componentTheme) as unknown as Record<
+      string,
+      unknown
+    >
+    const borderColor =
+      typeof styleObj.borderColor === 'string' ? styleObj.borderColor : '#ccc'
+    const borderRadius =
+      typeof styleObj.borderRadius === 'string' ? styleObj.borderRadius : '4px'
+
+    // top-level scalars are popover chrome; .scrollContainer (if used) comes
+    // through the shared converter
+    this._portal.style.border = `1px solid ${borderColor}`
+    this._portal.style.borderRadius = borderRadius
+    this._portal.style.background = '#fff'
+    this._portal.style.boxShadow = '0 2px 8px rgba(0,0,0,0.18)'
+
+    this._portalStyle.textContent = styleObjectToCss(styleObj)
+  }
+
+  private _reposition() {
+    if (!this._portal || !this._triggerEl) return
+    const placement = resolvePlacement(
+      {
+        placement: this.placement,
+        isRtl: false,
+        shown: true,
+        shouldRenderOffscreen: false
+      },
+      (p) => mirrorHorizontalPlacement(p, ' ')
+    )
+
+    // `@instructure/ui-position`'s getBoundingClientRect returns a ZERO rect for
+    // elements inside a shadow root (its `contains(documentElement, node)` guard
+    // fails across the shadow boundary), so a shadow-DOM trigger — e.g. a Menu
+    // flyout item — can't be measured directly. Native getBoundingClientRect
+    // works across shadow boundaries, so mirror the trigger's viewport rect onto
+    // a hidden light-DOM proxy in document.body and position against that.
+    const rect = this._triggerEl.getBoundingClientRect()
+    const target = this._ensureTargetProxy()
+    target.style.top = `${rect.top}px`
+    target.style.left = `${rect.left}px`
+    target.style.width = `${rect.width}px`
+    target.style.height = `${rect.height}px`
+
+    const { style, availableHeight, availableWidth } = calculateElementPosition(
+      this._portal,
+      target,
+      {
+        placement,
+        offsetX: this.offsetX,
+        offsetY: this.offsetY,
+        constrain: this.constrain as never
+      }
+    )
+
+    this._portal.style.position = style.position || 'absolute'
+    this._portal.style.top =
+      typeof style.top === 'number' ? `${style.top}px` : String(style.top)
+    this._portal.style.left =
+      typeof style.left === 'number' ? `${style.left}px` : String(style.left)
+    this._portal.style.transform = style.transform || ''
+
+    if (availableHeight != null) {
+      this._portal.style.setProperty(
+        '--ui-position-available-height',
+        `${availableHeight}px`
+      )
+    }
+    if (availableWidth != null) {
+      this._portal.style.setProperty(
+        '--ui-position-available-width',
+        `${availableWidth}px`
+      )
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get(POPOVER_TAG)) {
+  customElements.define(POPOVER_TAG, Popover)
+}
diff --git a/packages/ui-web-core/src/Popover/README.md b/packages/ui-web-core/src/Popover/README.md
new file mode 100644
index 0000000000..a31c4bb87a
--- /dev/null
+++ b/packages/ui-web-core/src/Popover/README.md
@@ -0,0 +1,61 @@
+# `<instui-popover>`
+
+Framework-agnostic (Lit) port of the React `@instructure/ui-popover`, POC stage 3
+(after `<instui-alert>` and `<instui-drilldown>`). Popover is the other major
+React-coupled dependency inside Drilldown's `trigger` mode, so this both adds a
+standalone component and lets the two extracted Lit components **compose** (see
+`<instui-drilldown>`'s trigger mode).
+
+## What is shared vs reused
+
+- **Single source of truth (extracted, React-free):** the controlled/uncontrolled
+  show/hide state machine + trigger/placement helpers in
+  `@popover/Popover/v2/behavior` (`resolveShown`, `resolveShowIntent`,
+  `resolveHideIntent`, `resolveToggleIntent`, `resolveActiveTriggers`, `isTooltip`,
+  `resolvePlacement`). Both the React Popover and this element consume them.
+- **Positioning (reused as-is):** `calculateElementPosition` from
+  `@instructure/ui-position` is already framework-free — imported directly via the
+  `@position/*` alias, no extraction needed.
+- **Focus (reused as-is):** `FocusRegion` from `@instructure/ui-a11y-utils`
+  (React-free at runtime) drives contain/return focus, Escape, and click-outside
+  dismissal via its `onDismiss` callback.
+
+## Usage
+
+Trigger and content are slots; the positioned content is portaled to
+`document.body` so `calculateElementPosition`'s body-relative coordinates are
+valid (scoped chrome styles are inlined into the portal).
+
+```html
+<instui-popover
+  placement="bottom center"
+  should-contain-focus
+  should-return-focus
+>
+  <button slot="trigger">Open</button>
+  <div>…focusable content…</div>
+</instui-popover>
+```
+
+- Controlled: set the `el.isShowingContent = true|false` **property** (not an
+  attribute — a Boolean attribute defaults to `false` and would break the
+  `undefined`-means-uncontrolled contract). Uncontrolled: `default-is-showing-content`.
+- Public methods/getter: `show()`, `hide()`, `toggle()`, `shown` — the contract
+  `<instui-drilldown>` depends on.
+- Events: `instui-popover-show`; `instui-popover-hide` (`detail: { documentClick }`).
+
+## POC scope & known gaps
+
+- `on='click'` only — no hover/focus triggers, no tooltip mode, no arrow.
+- Reposition on scroll/resize uses native window listeners (not ui-position's
+  `addPositionChangeListener`), sufficient for the common cases.
+- **`shouldContainFocus` into a nested custom element's shadow root is partial:**
+  `FocusRegion`'s `findTabbable` / screen-reader ancestor walk do not cross shadow
+  boundaries. When the content is itself a web component (e.g. `<instui-drilldown>`),
+  rely on that component's own keyboard handling for intra-panel focus; the popover's
+  FocusRegion still provides return-focus + close-on-outside/Escape.
+
+## Theming
+
+Tokens come from a sibling `<instui-theme-provider>`; `generateStyle` is resolved
+against `resolveTheme(...).components.Popover` and re-applied on `instui-theme-change`.
diff --git a/packages/ui-web-core/src/Popover/index.ts b/packages/ui-web-core/src/Popover/index.ts
new file mode 100644
index 0000000000..8895e9786a
--- /dev/null
+++ b/packages/ui-web-core/src/Popover/index.ts
@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { Popover } from './Popover'
+export type { PopoverHideDetail } from './Popover'
diff --git a/packages/ui-web-core/src/ThemeProvider/README.md b/packages/ui-web-core/src/ThemeProvider/README.md
new file mode 100644
index 0000000000..db232979fc
--- /dev/null
+++ b/packages/ui-web-core/src/ThemeProvider/README.md
@@ -0,0 +1,79 @@
+## ThemeProvider
+
+`<instui-theme-provider>` is a Lit Web Component that exposes InstUI design
+tokens as global CSS custom properties, with automatic system-preference
+switching for dark and high-contrast modes.
+
+The tokens come from `@instructure/ui-themes` (the modern
+`primitives` / `semantics` / `sharedTokens` / `components` shape). Token paths
+are flattened into CSS variables — for example,
+`semantics.semantic.color.background.base` becomes
+`var(--semantics-semantic-color-background-base)`.
+
+### Themes
+
+Mounted name → InstUI source theme:
+
+| Mounted name    | Source                                            |
+| --------------- | ------------------------------------------------- |
+| `defaultTheme`  | `legacyCanvas` (the standard InstUI Canvas theme) |
+| `contrastTheme` | `legacyCanvasHighContrast`                        |
+| `darkTheme`     | `dark`                                            |
+| `lightTheme`    | `light`                                           |
+
+### Notable attributes
+
+- `default-theme-name` — Fallback theme when no system preference applies and
+  no `user-theme` cookie is set. Defaults to `'defaultTheme'`.
+- `user-theme` — Per-user override (typically read from a cookie on SSR).
+- `custom-default-theme` / `custom-contrast-theme` / `custom-dark-theme` /
+  `custom-light-theme` — JSON attribute values deep-merged onto the base theme.
+  May include an `isEnabled` boolean to gate the automatic system-preference
+  switcher (e.g. set `customDarkTheme.isEnabled = true` to opt into dark-mode
+  switching).
+
+### System preferences and SSR
+
+On every theme application the provider writes two cookies, mirroring the
+tastysoft pattern so SSR coordination stays stack-portable:
+
+- `sec-ch-prefers-color-scheme` — `light` or `dark`
+- `sec-ch-prefers-contrast` — `normal` or `more`
+
+### Examples
+
+Plain HTML:
+
+```html
+<instui-theme-provider
+  default-theme-name="defaultTheme"
+  custom-dark-theme='{"isEnabled": true}'
+>
+  <!-- app content; tokens are now globally available as CSS vars -->
+</instui-theme-provider>
+```
+
+React (via `@lit/react` wrappers, landing in a follow-up):
+
+```tsx
+import { ThemeProvider } from '@instructure/ui-web-core/react'
+
+;<ThemeProvider
+  defaultThemeName="defaultTheme"
+  customDarkTheme={{ isEnabled: true }}
+>
+  <App />
+</ThemeProvider>
+```
+
+Angular:
+
+```html
+<instui-theme-provider
+  default-theme-name="lightTheme"
+  [attr.custom-contrast-theme]="customContrastTheme | json"
+  [attr.custom-dark-theme]="customDarkTheme | json"
+>
+  <router-outlet></router-outlet>
+</instui-theme-provider>
+```
diff --git a/packages/ui-web-core/src/ThemeProvider/ThemeProvider.stories.ts b/packages/ui-web-core/src/ThemeProvider/ThemeProvider.stories.ts
new file mode 100644
index 0000000000..d1627f5968
--- /dev/null
+++ b/packages/ui-web-core/src/ThemeProvider/ThemeProvider.stories.ts
@@ -0,0 +1,171 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+import './ThemeProvider'
+
+type Args = {
+  defaultThemeName:
+    | 'defaultTheme'
+    | 'contrastTheme'
+    | 'darkTheme'
+    | 'lightTheme'
+  userTheme: string
+  enableContrast: boolean
+  enableDark: boolean
+}
+
+const meta: Meta<Args> = {
+  title: 'ui-web-core/ThemeProvider',
+  component: 'instui-theme-provider',
+  argTypes: {
+    defaultThemeName: {
+      control: { type: 'select' },
+      options: ['defaultTheme', 'contrastTheme', 'darkTheme', 'lightTheme']
+    },
+    userTheme: { control: 'text' },
+    enableContrast: { control: 'boolean' },
+    enableDark: { control: 'boolean' }
+  },
+  args: {
+    defaultThemeName: 'defaultTheme',
+    userTheme: '',
+    enableContrast: false,
+    enableDark: false
+  }
+}
+
+export default meta
+
+type Story = StoryObj<Args>
+
+// The decorator in preview.ts wraps every story in a provider, so this story
+// renders a second nested provider configured via the controls. CSS variables
+// from the nearest provider that mounted last win — that's the one tied to
+// the controls panel.
+export const TokenInspector: Story = {
+  render: (args) => html`
+    <instui-theme-provider
+      default-theme-name=${args.defaultThemeName}
+      user-theme=${args.userTheme}
+      .customContrastTheme=${{ isEnabled: args.enableContrast }}
+      .customDarkTheme=${{ isEnabled: args.enableDark }}
+    >
+      <section
+        style="
+          font-family: var(--sharedTokens-typography-fontFamily, system-ui);
+          color: var(--semantics-semantic-color-text-primary, #273540);
+          background: var(--semantics-semantic-color-background-page, #fff);
+          padding: 1.5rem;
+        "
+      >
+        <h2 style="margin-top: 0;">InstUI tokens as CSS variables</h2>
+        <p>
+          Resize the window or change system preferences to see contrast / dark
+          auto-switching when the corresponding override is enabled below.
+        </p>
+
+        <h3>Surfaces</h3>
+        <div
+          style="
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 0.75rem;
+          "
+        >
+          <div
+            style="padding: 1rem; background: var(--semantics-semantic-color-background-page); border: 1px solid var(--semantics-semantic-color-divider-base, currentColor);"
+          >
+            background-page
+          </div>
+          <div
+            style="padding: 1rem; background: var(--semantics-semantic-color-background-container); border: 1px solid var(--semantics-semantic-color-divider-base, currentColor);"
+          >
+            background-container
+          </div>
+          <div
+            style="padding: 1rem; background: var(--semantics-semantic-color-background-muted); border: 1px solid var(--semantics-semantic-color-divider-base, currentColor);"
+          >
+            background-muted
+          </div>
+          <div
+            style="padding: 1rem; background: var(--semantics-semantic-color-background-brand); color: var(--semantics-semantic-color-background-onColor, white);"
+          >
+            background-brand
+          </div>
+        </div>
+
+        <h3 style="margin-top: 1.5rem;">Text colors</h3>
+        <ul style="list-style: none; padding: 0; display: grid; gap: 0.25rem;">
+          <li style="color: var(--semantics-semantic-color-text-primary);">
+            text-primary
+          </li>
+          <li style="color: var(--semantics-semantic-color-text-secondary);">
+            text-secondary
+          </li>
+          <li style="color: var(--semantics-semantic-color-text-brand);">
+            text-brand
+          </li>
+          <li style="color: var(--semantics-semantic-color-text-error);">
+            text-error
+          </li>
+          <li style="color: var(--semantics-semantic-color-text-success);">
+            text-success
+          </li>
+        </ul>
+
+        <h3 style="margin-top: 1.5rem;">Primitives sample</h3>
+        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+          ${[
+            'primitives-color-blue-blue40',
+            'primitives-color-blue-blue80',
+            'primitives-color-blue-blue120',
+            'primitives-color-grey-grey20',
+            'primitives-color-grey-grey80',
+            'primitives-color-grey-grey160'
+          ].map(
+            (name) => html`
+              <div
+                style="
+                  width: 5rem;
+                  height: 3rem;
+                  border-radius: var(--sharedTokens-borderRadius-md, 0.25rem);
+                  background: var(--${name});
+                  display: grid;
+                  place-items: center;
+                  font-size: 0.65rem;
+                  color: white;
+                  text-shadow: 0 0 2px black;
+                "
+              >
+                ${name.split('-').slice(-1)[0]}
+              </div>
+            `
+          )}
+        </div>
+      </section>
+    </instui-theme-provider>
+  `
+}
diff --git a/packages/ui-web-core/src/ThemeProvider/ThemeProvider.ts b/packages/ui-web-core/src/ThemeProvider/ThemeProvider.ts
new file mode 100644
index 0000000000..f80515dd71
--- /dev/null
+++ b/packages/ui-web-core/src/ThemeProvider/ThemeProvider.ts
@@ -0,0 +1,244 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { LitElement, html, css, type PropertyValues } from 'lit'
+
+import { resolveTheme, themes, type ThemeName } from '../theme/themes'
+import {
+  cssVarsToRootRule,
+  flattenToCssVars,
+  type TokenTree
+} from '../theme/toCssVariables'
+
+const STYLE_ELEMENT_ID = 'instui-theme-provider'
+
+// Attribute value shape for `custom-*-theme`. `isEnabled` is a metadata flag
+// (it controls whether the auto-switcher will pick this theme); everything
+// else is a token-tree override deep-merged into the resolved theme.
+type CustomThemeAttr = {
+  isEnabled?: boolean
+  primitives?: TokenTree
+  semantics?: TokenTree
+  sharedTokens?: TokenTree
+  components?: Record<string, TokenTree>
+}
+
+const jsonConverter = {
+  fromAttribute: (value: string | null) => {
+    if (!value) return {}
+    try {
+      return JSON.parse(value)
+    } catch {
+      return {}
+    }
+  },
+  toAttribute: (value: CustomThemeAttr) => JSON.stringify(value)
+}
+
+const writeCookie = (name: string, value: string, days = 365) => {
+  if (typeof document === 'undefined') return
+  const expires = new Date(
+    Date.now() + days * 24 * 60 * 60 * 1000
+  ).toUTCString()
+  document.cookie = `${name}=${value}; expires=${expires}; path=/`
+}
+
+const matchMediaSafe = (query: string): MediaQueryList | null => {
+  if (
+    typeof window === 'undefined' ||
+    typeof window.matchMedia !== 'function'
+  ) {
+    return null
+  }
+  return window.matchMedia(query)
+}
+
+export class ThemeProvider extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `
+
+  static properties = {
+    defaultThemeName: { type: String, attribute: 'default-theme-name' },
+    userTheme: { type: String, attribute: 'user-theme' },
+    customDefaultTheme: {
+      attribute: 'custom-default-theme',
+      converter: jsonConverter
+    },
+    customContrastTheme: {
+      attribute: 'custom-contrast-theme',
+      converter: jsonConverter
+    },
+    customDarkTheme: {
+      attribute: 'custom-dark-theme',
+      converter: jsonConverter
+    },
+    customLightTheme: {
+      attribute: 'custom-light-theme',
+      converter: jsonConverter
+    }
+  }
+
+  defaultThemeName: ThemeName = 'defaultTheme'
+  userTheme: string = ''
+  customDefaultTheme: CustomThemeAttr = {}
+  customContrastTheme: CustomThemeAttr = {}
+  customDarkTheme: CustomThemeAttr = {}
+  customLightTheme: CustomThemeAttr = {}
+
+  private _styleElement: HTMLStyleElement | null = null
+  private _mediaQueries: MediaQueryList[] = []
+  private _onSystemPrefChange = () => this._applyResolvedTheme()
+
+  override connectedCallback() {
+    super.connectedCallback()
+    const darkMq = matchMediaSafe('(prefers-color-scheme: dark)')
+    const contrastMq = matchMediaSafe('(prefers-contrast: more)')
+    this._mediaQueries = [darkMq, contrastMq].filter(
+      (mq): mq is MediaQueryList => mq !== null
+    )
+    for (const mq of this._mediaQueries) {
+      mq.addEventListener('change', this._onSystemPrefChange)
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+    for (const mq of this._mediaQueries) {
+      mq.removeEventListener('change', this._onSystemPrefChange)
+    }
+    this._mediaQueries = []
+    if (this._styleElement && this._styleElement.parentNode) {
+      this._styleElement.parentNode.removeChild(this._styleElement)
+      this._styleElement = null
+    }
+  }
+
+  override firstUpdated() {
+    this._applyResolvedTheme()
+  }
+
+  override updated(changed: PropertyValues<this>) {
+    if (
+      changed.has('defaultThemeName') ||
+      changed.has('userTheme') ||
+      changed.has('customDefaultTheme') ||
+      changed.has('customContrastTheme') ||
+      changed.has('customDarkTheme') ||
+      changed.has('customLightTheme')
+    ) {
+      this._applyResolvedTheme()
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`
+  }
+
+  private _customFor(name: ThemeName): CustomThemeAttr {
+    switch (name) {
+      case 'defaultTheme':
+        return this.customDefaultTheme
+      case 'contrastTheme':
+        return this.customContrastTheme
+      case 'darkTheme':
+        return this.customDarkTheme
+      case 'lightTheme':
+        return this.customLightTheme
+      default:
+        return this.customDefaultTheme
+    }
+  }
+
+  private _isEnabled(name: ThemeName): boolean {
+    const custom = this._customFor(name)
+    return custom.isEnabled ?? themes[name].isEnabled
+  }
+
+  // Mirrors tastysoft's SSR `getSystemPreferredTheme`: contrast wins over dark,
+  // user-theme/default fallback otherwise. Also writes the same cookie names
+  // tastysoft does so SSR layers shared across stacks don't need to special-
+  // case InstUI.
+  private _resolvePreferredTheme(): ThemeName {
+    const prefersContrast =
+      matchMediaSafe('(prefers-contrast: more)')?.matches ?? false
+    const prefersDark =
+      matchMediaSafe('(prefers-color-scheme: dark)')?.matches ?? false
+
+    if (prefersContrast && this._isEnabled('contrastTheme')) {
+      writeCookie('sec-ch-prefers-contrast', 'more')
+      return 'contrastTheme'
+    }
+    writeCookie('sec-ch-prefers-contrast', 'normal')
+
+    if (prefersDark && this._isEnabled('darkTheme')) {
+      writeCookie('sec-ch-prefers-color-scheme', 'dark')
+      return 'darkTheme'
+    }
+    writeCookie('sec-ch-prefers-color-scheme', 'light')
+
+    const fallback = (this.userTheme as ThemeName) || this.defaultThemeName
+    return themes[fallback] ? fallback : 'defaultTheme'
+  }
+
+  private _applyResolvedTheme() {
+    const name = this._resolvePreferredTheme()
+    const custom = this._customFor(name)
+    // `isEnabled` is metadata, not a token — strip before passing through.
+    const { isEnabled: _isEnabled, ...overrides } = custom
+    const resolved = resolveTheme(themes[name].raw, overrides)
+    const cssVars = flattenToCssVars({
+      primitives: resolved.primitives,
+      semantics: resolved.semantics,
+      sharedTokens: resolved.sharedTokens,
+      components: resolved.components
+    })
+    const cssText = cssVarsToRootRule(cssVars)
+
+    if (typeof document === 'undefined') return
+    if (!this._styleElement) {
+      this._styleElement = document.createElement('style')
+      this._styleElement.id = STYLE_ELEMENT_ID
+      document.head.appendChild(this._styleElement)
+    }
+    this._styleElement.textContent = cssText
+
+    this.dispatchEvent(
+      new CustomEvent('instui-theme-change', {
+        bubbles: true,
+        composed: true,
+        detail: { themeName: name }
+      })
+    )
+  }
+}
+
+if (
+  typeof customElements !== 'undefined' &&
+  !customElements.get('instui-theme-provider')
+) {
+  customElements.define('instui-theme-provider', ThemeProvider)
+}
diff --git a/packages/ui-web-core/src/ThemeProvider/index.ts b/packages/ui-web-core/src/ThemeProvider/index.ts
new file mode 100644
index 0000000000..5a0a479b44
--- /dev/null
+++ b/packages/ui-web-core/src/ThemeProvider/index.ts
@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { ThemeProvider } from './ThemeProvider'
diff --git a/packages/ui-web-core/src/Welcome.stories.ts b/packages/ui-web-core/src/Welcome.stories.ts
new file mode 100644
index 0000000000..6420bf566e
--- /dev/null
+++ b/packages/ui-web-core/src/Welcome.stories.ts
@@ -0,0 +1,73 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/web-components-vite'
+import { html } from 'lit'
+
+const meta: Meta = {
+  title: 'Welcome',
+  render: () => html`
+    <section
+      style="
+        padding: var(--sharedTokens-spacing-large, 2rem);
+        max-width: 64rem;
+        font-family: var(--sharedTokens-typography-fontFamily, system-ui);
+        color: var(--semantics-color-text-primary, #273540);
+      "
+    >
+      <h1 style="margin-top: 0;">@instructure/ui-web-core</h1>
+      <p>
+        InstUI primitives delivered as Lit-based Web Components, plus the SSR
+        and theming utilities needed to run them in the Parchment stack.
+      </p>
+      <p>
+        This Storybook is a placeholder &mdash; real component stories will land
+        alongside the first primitives. The
+        <strong>ThemeProvider</strong> story already demonstrates how InstUI
+        design tokens are exposed as CSS custom properties for consumption from
+        any framework.
+      </p>
+      <ul>
+        <li>
+          <strong>Source:</strong>
+          <code>packages/ui-web-core</code>
+        </li>
+        <li>
+          <strong>Local dev:</strong>
+          <code>pnpm --filter @instructure/ui-web-core storybook</code>
+        </li>
+        <li>
+          <strong>Hosted:</strong>
+          <a href="https://instructure.design/parchment">
+            instructure.design/parchment
+          </a>
+        </li>
+      </ul>
+    </section>
+  `
+}
+
+export default meta
+
+export const Welcome: StoryObj = {}
diff --git a/packages/ui-web-core/src/angular/index.ts b/packages/ui-web-core/src/angular/index.ts
new file mode 100644
index 0000000000..985d6033c5
--- /dev/null
+++ b/packages/ui-web-core/src/angular/index.ts
@@ -0,0 +1,28 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+// Placeholder for Angular wrappers (CUSTOM_ELEMENTS_SCHEMA bindings, control-
+// value-accessors, etc.). Real wrappers will land alongside the first Lit
+// component that needs an Angular-specific surface.
+export {}
diff --git a/packages/ui-web-core/src/index.ts b/packages/ui-web-core/src/index.ts
new file mode 100644
index 0000000000..c6d4ef4e45
--- /dev/null
+++ b/packages/ui-web-core/src/index.ts
@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { ThemeProvider } from './ThemeProvider'
+export { Alert } from './Alert'
+export { Popover } from './Popover'
+export type { PopoverHideDetail } from './Popover'
+export { Menu } from './Menu'
+export type {
+  MenuConfigItem,
+  MenuConfigGroup,
+  MenuConfigSeparator,
+  MenuConfigNode,
+  MenuSelectDetail
+} from './Menu'
+export { Drilldown } from './Drilldown'
+export type {
+  DrilldownConfigOption,
+  DrilldownConfigGroup,
+  DrilldownConfigPage,
+  DrilldownSelectDetail,
+  DrilldownPageChangeDetail
+} from './Drilldown'
+export type { ThemeName, InstUIWebTheme } from './theme/themes'
diff --git a/packages/ui-web-core/src/react/index.ts b/packages/ui-web-core/src/react/index.ts
new file mode 100644
index 0000000000..79df384e15
--- /dev/null
+++ b/packages/ui-web-core/src/react/index.ts
@@ -0,0 +1,95 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * React wrappers for the Lit Web Components, via @lit/react `createComponent`.
+ * Each wrapper maps the element's bubbling CustomEvents to React-style `on*`
+ * props and forwards complex props (e.g. `items`, `pages`) as element
+ * properties. Importing this entry also registers the custom elements (the
+ * element classes run `customElements.define` on import). React is a peer.
+ */
+
+import * as React from 'react'
+import { createComponent } from '@lit/react'
+
+import { Alert, Drilldown, Menu, Popover, ThemeProvider } from '../index'
+
+export const InstuiThemeProvider = createComponent({
+  react: React,
+  tagName: 'instui-theme-provider',
+  elementClass: ThemeProvider,
+  events: { onThemeChange: 'instui-theme-change' }
+})
+
+export const InstuiAlert = createComponent({
+  react: React,
+  tagName: 'instui-alert',
+  elementClass: Alert,
+  events: { onDismiss: 'instui-alert-dismiss' }
+})
+
+export const InstuiPopover = createComponent({
+  react: React,
+  tagName: 'instui-popover',
+  elementClass: Popover,
+  events: {
+    onShow: 'instui-popover-show',
+    onHide: 'instui-popover-hide'
+  }
+})
+
+export const InstuiMenu = createComponent({
+  react: React,
+  tagName: 'instui-menu',
+  elementClass: Menu,
+  events: { onSelect: 'instui-menu-select' }
+})
+
+export const InstuiDrilldown = createComponent({
+  react: React,
+  tagName: 'instui-drilldown',
+  elementClass: Drilldown,
+  events: {
+    onSelect: 'instui-drilldown-select',
+    onPageChange: 'instui-drilldown-page-change'
+  }
+})
+
+// Re-export the plain-data config/detail types so React consumers can type the
+// `items`/`pages` props and event details.
+export type {
+  MenuConfigItem,
+  MenuConfigGroup,
+  MenuConfigSeparator,
+  MenuConfigNode,
+  MenuSelectDetail,
+  DrilldownConfigOption,
+  DrilldownConfigGroup,
+  DrilldownConfigPage,
+  DrilldownSelectDetail,
+  DrilldownPageChangeDetail,
+  PopoverHideDetail,
+  ThemeName,
+  InstUIWebTheme
+} from '../index'
diff --git a/packages/ui-web-core/src/ssr/index.ts b/packages/ui-web-core/src/ssr/index.ts
new file mode 100644
index 0000000000..0c2ac1f298
--- /dev/null
+++ b/packages/ui-web-core/src/ssr/index.ts
@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * SSR + progressive-enhancement utilities. No DOM imports at module scope, so
+ * this entry is safe to import in a server (RSC / Node) context. It pulls only
+ * a type from the main entry (erased), not the client element classes.
+ */
+
+import type { ThemeName } from '../index'
+
+/*
+ * Resolves the initial theme name from the same preference cookies the
+ * <instui-theme-provider> writes (`sec-ch-prefers-color-scheme`,
+ * `sec-ch-prefers-contrast`), with the same precedence (contrast > dark >
+ * default). Pass a reader bound to your framework's cookie store (e.g.
+ * Next.js `(name) => cookies().get(name)?.value`). Lets the server set
+ * `<instui-theme-provider theme-name>` for a flash-free first paint.
+ */
+export const getInitialThemeName = (
+  read: (name: string) => string | undefined
+): ThemeName => {
+  if (read('sec-ch-prefers-contrast') === 'more') return 'contrastTheme'
+  if (read('sec-ch-prefers-color-scheme') === 'dark') return 'darkTheme'
+  return 'defaultTheme'
+}
+
+/*
+ * Skeleton styles for the interactive elements. Before the client bundle
+ * registers the custom elements (`customElements.define`), `:not(:defined)`
+ * matches and renders a fixed-size shimmer block in their place; once the
+ * element upgrades, the rule stops applying and the real component shows.
+ * `:not(:defined)` elements have no intrinsic size, so explicit min dimensions
+ * are required or the skeleton would collapse.
+ */
+export const skeletonCss = `
+instui-menu:not(:defined),
+instui-drilldown:not(:defined),
+[data-instui-skeleton]:not(:defined) {
+  display: block;
+  box-sizing: border-box;
+  min-width: 16rem;
+  min-height: 2.75rem;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.06);
+  background-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0,
+    rgba(0, 0, 0, 0.06) 40%,
+    rgba(0, 0, 0, 0.06) 60%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: instui-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes instui-skeleton-shimmer {
+  0% { background-position: 150% 0; }
+  100% { background-position: -50% 0; }
+}
+`
+
+let _injected = false
+
+/*
+ * Appends the skeleton stylesheet once. No-op on the server (no document).
+ */
+export const injectSkeletonStyles = (doc?: Document): void => {
+  const target = doc ?? (typeof document !== 'undefined' ? document : undefined)
+  if (!target || _injected) return
+  const style = target.createElement('style')
+  style.setAttribute('data-instui-skeleton-styles', '')
+  style.textContent = skeletonCss
+  target.head.appendChild(style)
+  _injected = true
+}
diff --git a/packages/ui-web-core/src/theme/index.ts b/packages/ui-web-core/src/theme/index.ts
new file mode 100644
index 0000000000..5af37a70c6
--- /dev/null
+++ b/packages/ui-web-core/src/theme/index.ts
@@ -0,0 +1,38 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { themes, resolveTheme } from './themes'
+export type {
+  ThemeName,
+  InstUIWebTheme,
+  ThemeOverrides,
+  ResolvedTheme
+} from './themes'
+export {
+  mergeDeep,
+  flattenToCssVars,
+  cssVarsToRootRule
+} from './toCssVariables'
+export type { TokenTree } from './toCssVariables'
+export { styleObjectToCss, camelToKebab, toCssValue } from './styleObjectToCss'
diff --git a/packages/ui-web-core/src/theme/styleObjectToCss.ts b/packages/ui-web-core/src/theme/styleObjectToCss.ts
new file mode 100644
index 0000000000..91e4113ce4
--- /dev/null
+++ b/packages/ui-web-core/src/theme/styleObjectToCss.ts
@@ -0,0 +1,137 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/*
+ * Shared bridge from InstUI's emotion-style objects to a CSS string for the Lit
+ * web components. Lit ships no runtime CSS-in-JS, so each component's
+ * `generateStyle` (which returns the same nested-object shape emotion consumes
+ * in React) is serialized to a `<style>` string scoped to the shadow root.
+ *
+ * Promoted out of the POC Alert so multiple components (Alert, Drilldown, ...)
+ * share one converter — the source of truth for the "emotion object -> CSS"
+ * step. The converter is a superset of the original Alert-only version: it also
+ * (a) skips scalar section values (e.g. Drilldown's `headerActionColor`, which
+ * the component reads directly rather than emitting as a rule), and (b) expands
+ * nested `&`-selectors (e.g. `'&:focus::before'`) into their own rules.
+ */
+
+// CSS properties that take unitless numeric values; matches the subset emotion
+// considers unitless. `margin: -1` becomes `-1px`; `order: 1` stays `1`.
+const UNITLESS = new Set([
+  'animationIterationCount',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowSpan',
+  'gridRowStart',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnSpan',
+  'gridColumnStart',
+  'fontWeight',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom'
+])
+
+export const camelToKebab = (s: string): string =>
+  s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+
+export const toCssValue = (key: string, value: unknown): string => {
+  if (typeof value === 'number' && !UNITLESS.has(key) && value !== 0) {
+    return `${value}px`
+  }
+  return String(value)
+}
+
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null && !Array.isArray(v)
+
+// Returns the flat declarations of a block plus any nested selector blocks
+// (keys whose value is itself an object, e.g. `'&:focus::before'`).
+const splitBlock = (
+  block: Record<string, unknown>
+): { declarations: string; nested: [string, Record<string, unknown>][] } => {
+  const declarations: string[] = []
+  const nested: [string, Record<string, unknown>][] = []
+
+  for (const [key, value] of Object.entries(block)) {
+    // emotion's `label` is a debug marker, not a real declaration
+    if (key === 'label' || value === undefined || value === null) continue
+
+    if (isPlainObject(value)) {
+      nested.push([key, value])
+    } else {
+      declarations.push(`  ${camelToKebab(key)}: ${toCssValue(key, value)};`)
+    }
+  }
+
+  return { declarations: declarations.join('\n'), nested }
+}
+
+/**
+ * Takes the section→declarations map returned by a `generateStyle` function and
+ * emits a CSS string scoped to the shadow root. Section names become class
+ * selectors on the rendered elements. Scalar sections (a section whose value is
+ * a plain string/number rather than a declarations object) are skipped — the
+ * component reads those directly. Nested `&`-selectors are expanded against the
+ * section's class selector.
+ */
+export const styleObjectToCss = (sections: Record<string, unknown>): string => {
+  const rules: string[] = []
+
+  for (const [section, block] of Object.entries(sections)) {
+    if (!isPlainObject(block)) continue
+
+    const { declarations, nested } = splitBlock(block)
+    rules.push(`.${section} {\n${declarations}\n}`)
+
+    for (const [selector, nestedBlock] of nested) {
+      // `&` refers to the section's own class selector
+      const resolvedSelector = selector.replace(/&/g, `.${section}`)
+      const { declarations: nestedDeclarations } = splitBlock(nestedBlock)
+      rules.push(`${resolvedSelector} {\n${nestedDeclarations}\n}`)
+    }
+  }
+
+  return rules.join('\n')
+}
diff --git a/packages/ui-web-core/src/theme/themes.ts b/packages/ui-web-core/src/theme/themes.ts
new file mode 100644
index 0000000000..c555e4448f
--- /dev/null
+++ b/packages/ui-web-core/src/theme/themes.ts
@@ -0,0 +1,135 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { canvas, canvasHighContrast, dark, light } from '@instructure/ui-themes'
+
+import { mergeDeep, type TokenTree } from './toCssVariables'
+
+// The four InstUI themes ship as composed objects from `@instructure/ui-themes`
+// — `{ newTheme: { primitives, semantics, sharedTokens, components }, ...legacy }`.
+// We only consume the newTheme branch; everything else (legacy color object,
+// brand variables, etc.) is for React-side compatibility.
+const rawOf = (theme: { newTheme: unknown }) => theme.newTheme
+
+export type ThemeName =
+  | 'defaultTheme'
+  | 'contrastTheme'
+  | 'darkTheme'
+  | 'lightTheme'
+
+// The shape we expect from `@instructure/ui-themes/themes/newThemeTokens`.
+// `semantics`, `sharedTokens`, and each entry under `components` are functions
+// in the source — they must be evaluated in dependency order before the
+// resulting tree can be flattened into CSS variables.
+type RawTheme = {
+  primitives: TokenTree
+  semantics: (primitives: TokenTree) => TokenTree
+  sharedTokens: (semantics: TokenTree) => TokenTree
+  components: Record<string, (semantics: TokenTree) => TokenTree>
+}
+
+export type InstUIWebTheme = {
+  isEnabled: boolean
+  raw: RawTheme
+}
+
+// Token overrides arrive from custom-*-theme attributes as parsed JSON. They
+// can shadow any branch of the resolved token tree. `isEnabled` is consumed
+// upstream (see ThemeProvider), so it's stripped before being passed here.
+export type ThemeOverrides = {
+  primitives?: Partial<TokenTree>
+  semantics?: Partial<TokenTree>
+  sharedTokens?: Partial<TokenTree>
+  components?: Record<string, Partial<TokenTree>>
+}
+
+// The flat result that gets handed to the CSS-var flattener. `components` is
+// kept namespaced so a `components.Button.background` token becomes
+// `--components-Button-background` rather than colliding with semantics.
+export type ResolvedTheme = {
+  primitives: TokenTree
+  semantics: TokenTree
+  sharedTokens: TokenTree
+  components: TokenTree
+}
+
+const evaluateComponents = (
+  components: RawTheme['components'],
+  semantics: TokenTree
+): TokenTree => {
+  const out: TokenTree = {}
+  for (const [name, fn] of Object.entries(components)) {
+    if (typeof fn !== 'function') continue
+    try {
+      out[name] = fn(semantics) as TokenTree
+    } catch {
+      // Some components throw when called with mismatched semantics shape
+      // (e.g. dark/contrast themes that don't override every component); we
+      // skip those rather than refuse to render the whole theme.
+      continue
+    }
+  }
+  return out
+}
+
+// Resolves a raw theme (with derivation functions) plus optional overrides
+// into the flat `{primitives, semantics, sharedTokens, components}` tree the
+// flattener consumes. Mirrors the order InstUI's emotion runtime uses in
+// `useStyleNew.ts`.
+export const resolveTheme = (
+  raw: RawTheme,
+  overrides?: ThemeOverrides
+): ResolvedTheme => {
+  const primitives = mergeDeep(raw.primitives, overrides?.primitives)
+
+  const semantics = mergeDeep(
+    raw.semantics?.(primitives) ?? {},
+    overrides?.semantics
+  )
+
+  const sharedTokens = mergeDeep(
+    raw.sharedTokens?.(semantics) ?? {},
+    overrides?.sharedTokens
+  )
+
+  const components = mergeDeep(
+    evaluateComponents(raw.components ?? {}, semantics),
+    overrides?.components as TokenTree | undefined
+  )
+
+  return { primitives, semantics, sharedTokens, components }
+}
+
+// `isEnabled` defaults mirror tastysoft's pattern: default and light are
+// always on; contrast and dark opt in based on system preference cookies set
+// by the provider on first paint.
+export const themes: Record<ThemeName, InstUIWebTheme> = {
+  defaultTheme: { isEnabled: true, raw: rawOf(canvas) as RawTheme },
+  contrastTheme: {
+    isEnabled: false,
+    raw: rawOf(canvasHighContrast) as RawTheme
+  },
+  darkTheme: { isEnabled: false, raw: rawOf(dark) as RawTheme },
+  lightTheme: { isEnabled: true, raw: rawOf(light) as RawTheme }
+}
diff --git a/packages/ui-web-core/src/theme/toCssVariables.ts b/packages/ui-web-core/src/theme/toCssVariables.ts
new file mode 100644
index 0000000000..e7d731b531
--- /dev/null
+++ b/packages/ui-web-core/src/theme/toCssVariables.ts
@@ -0,0 +1,86 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export type TokenTree = { [key: string]: TokenTree | string | number | boolean }
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' &&
+  value !== null &&
+  !Array.isArray(value) &&
+  Object.getPrototypeOf(value) === Object.prototype
+
+// Recursive deep merge. `source` wins. Neither input is mutated.
+// Matches the behavior the InstUI emotion runtime relies on for overrides,
+// per [[Semantic-token merge bug]] — shallow merge here would silently drop
+// whole branches of the token tree.
+export const mergeDeep = <T extends Record<string, unknown>>(
+  target: T,
+  source?: Partial<T>
+): T => {
+  if (!source) return { ...target }
+  const out: Record<string, unknown> = { ...target }
+  for (const key of Object.keys(source)) {
+    const srcVal = (source as Record<string, unknown>)[key]
+    const tgtVal = out[key]
+    if (isPlainObject(srcVal) && isPlainObject(tgtVal)) {
+      out[key] = mergeDeep(
+        tgtVal as Record<string, unknown>,
+        srcVal as Record<string, unknown>
+      )
+    } else if (srcVal !== undefined) {
+      out[key] = srcVal
+    }
+  }
+  return out as T
+}
+
+// Flattens a nested token tree to `{ '--prefix-key-subkey': value }`.
+// Skips `undefined` and function values; CSS doesn't accept them and themes
+// in `@instructure/ui-themes/themes/newThemeTokens` store derivation logic as
+// functions that callers must evaluate before passing in here.
+export const flattenToCssVars = (
+  tree: TokenTree,
+  prefix = ''
+): Record<string, string | number> => {
+  const out: Record<string, string | number> = {}
+  for (const [key, value] of Object.entries(tree)) {
+    const path = prefix ? `${prefix}-${key}` : `--${key}`
+    if (value === undefined || typeof value === 'function') continue
+    if (isPlainObject(value)) {
+      Object.assign(out, flattenToCssVars(value as TokenTree, path))
+    } else {
+      out[path] = value as string | number
+    }
+  }
+  return out
+}
+
+// Wraps a flat CSS-var map into a `:root { ... }` rule string ready to be
+// dropped into a <style> tag.
+export const cssVarsToRootRule = (
+  vars: Record<string, string | number>
+): string => {
+  const lines = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`)
+  return `:root {\n${lines.join('\n')}\n}`
+}
diff --git a/packages/ui-web-core/tsconfig.build.json b/packages/ui-web-core/tsconfig.build.json
new file mode 100644
index 0000000000..1faa0ad874
--- /dev/null
+++ b/packages/ui-web-core/tsconfig.build.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-scripts/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" }
+  ]
+}
diff --git a/packages/ui-web-core/tsconfig.json b/packages/ui-web-core/tsconfig.json
new file mode 100644
index 0000000000..cbde4f2bf6
--- /dev/null
+++ b/packages/ui-web-core/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@alerts/*": ["../ui-alerts/src/*"],
+      "@drilldown/*": ["../ui-drilldown/src/*"],
+      "@popover/*": ["../ui-popover/src/*"],
+      "@position/*": ["../ui-position/src/*"],
+      "@a11y/*": ["../ui-a11y-utils/src/*"],
+      "@menu/*": ["../ui-menu/src/*"]
+    }
+  },
+  "include": ["src", ".storybook"],
+  "exclude": ["node_modules", "storybook-static", "es", "lib", "types"]
+}
diff --git a/packages/ui-web-core/vite.config.ts b/packages/ui-web-core/vite.config.ts
new file mode 100644
index 0000000000..16705edf1b
--- /dev/null
+++ b/packages/ui-web-core/vite.config.ts
@@ -0,0 +1,92 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { defineConfig } from 'vite'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+import { aliases } from './aliases.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// Only framework peers stay external; EVERYTHING else (the aliased neutral
+// modules AND the @instructure/* utility packages + keycode they import) is
+// bundled, so the published package is a self-contained artifact consumable
+// cross-repo via a `file:` link with no unresolvable `workspace:*` deps.
+const EXTERNAL = [
+  'lit',
+  'lit-html',
+  'lit/decorators.js',
+  '@lit/react',
+  'react',
+  'react-dom',
+  'react/jsx-runtime'
+]
+const isExternal = (id: string) =>
+  EXTERNAL.includes(id) ||
+  id.startsWith('lit/') ||
+  id.startsWith('lit-html/') ||
+  id.startsWith('react/') ||
+  id.startsWith('@angular/')
+
+/*
+ * Library build for the framework-agnostic Web Components. The React-free
+ * neutral modules reached via the source aliases (@alerts, @drilldown, …) AND
+ * the @instructure/* utility packages they import are INLINED into a
+ * self-contained bundle; only lit/@lit/react and the react/angular peers stay
+ * external. A bundler resolving the aliases is what makes the alias approach
+ * production-ready — neither tsc nor babel rewrite aliases in emitted output.
+ */
+export default defineConfig({
+  resolve: { alias: aliases },
+  build: {
+    outDir: 'es',
+    emptyOutDir: true,
+    target: 'es2019',
+    minify: false,
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        'react/index': resolve(__dirname, 'src/react/index.ts'),
+        'ssr/index': resolve(__dirname, 'src/ssr/index.ts')
+      },
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: (id: string) => isExternal(id),
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: 'chunks/[name]-[hash].js'
+      }
+    }
+  }
+  // NOTE: declaration (.d.ts) emission is not wired into this multi-entry build.
+  // Single-entry `vite-plugin-dts` `bundleTypes` produces a clean self-contained
+  // es/index.d.ts, but multi-entry bundleTypes cross-wires the per-entry outputs
+  // (an api-extractor + widened-rootDir interaction). Tracked follow-up: emit a
+  // self-contained types tree via `tsc` (rootDir=packages) + `tsc-alias`, or run
+  // api-extractor per entry. See README. The runtime bundle is fully typed at
+  // the source; consumers currently get untyped (any) imports.
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8429b3949..a92eb35928 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3703,7 +3703,7 @@ importers:
         version: link:../command-utils
       '@instructure/instructure-design-tokens':
         specifier: github:instructure/instructure-design-tokens
-        version: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08
+        version: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/130e505740c855f4f7afde61733d59b41abaf041
       '@instructure/pkg-utils':
         specifier: workspace:*
         version: link:../pkg-utils
@@ -5090,6 +5090,43 @@ importers:
         specifier: ^3.2.2
         version: 3.2.4(@types/node@22.19.15)(jiti@2.6.1)(jsdom@26.1.0)(terser@5.48.0)(yaml@2.8.3)
 
+  packages/ui-web-core:
+    dependencies:
+      '@lit/react':
+        specifier: ^1.0.8
+        version: 1.0.8(@types/react@18.3.26)
+      lit:
+        specifier: ^3.3.3
+        version: 3.3.3
+    devDependencies:
+      '@instructure/ui-babel-preset':
+        specifier: workspace:*
+        version: link:../ui-babel-preset
+      '@instructure/ui-scripts':
+        specifier: workspace:*
+        version: link:../ui-scripts
+      '@microsoft/api-extractor':
+        specifier: ^7.58.8
+        version: 7.58.8(@types/node@22.19.15)
+      '@storybook/addon-a11y':
+        specifier: ^10.4.1
+        version: 10.4.1(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      '@storybook/addon-docs':
+        specifier: ^10.4.1
+        version: 10.4.1(@types/react-dom@18.3.1)(@types/react@18.3.26)(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+      '@storybook/web-components-vite':
+        specifier: ^10.4.1
+        version: 10.4.1(esbuild@0.28.0)(lit@3.3.3)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+      storybook:
+        specifier: ^10.4.1
+        version: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vite:
+        specifier: ^7.0.0
+        version: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+      vite-plugin-dts:
+        specifier: ^5.0.2
+        version: 5.0.2(@microsoft/api-extractor@7.58.8(@types/node@22.19.15))(esbuild@0.28.0)(rollup@4.60.1)(typescript@6.0.3)(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+
   packages/ui-webpack-config:
     dependencies:
       buffer:
@@ -6711,8 +6748,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08':
-    resolution: {tarball: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08}
+  '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/130e505740c855f4f7afde61733d59b41abaf041':
+    resolution: {tarball: https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/130e505740c855f4f7afde61733d59b41abaf041}
     version: 1.0.0
 
   '@isaacs/cliui@8.0.2':
@@ -6935,6 +6972,17 @@ packages:
   '@lezer/markdown@1.6.3':
     resolution: {integrity: sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==}
 
+  '@lit-labs/ssr-dom-shim@1.6.0':
+    resolution: {integrity: sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==}
+
+  '@lit/react@1.0.8':
+    resolution: {integrity: sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==}
+    peerDependencies:
+      '@types/react': 18.3.26
+
+  '@lit/reactive-element@2.1.2':
+    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
+
   '@ltd/j-toml@1.38.0':
     resolution: {integrity: sha512-lYtBcmvHustHQtg4X7TXUu1Xa/tbLC3p2wLvgQI+fWVySguVZJF60Snxijw5EiohumxZbR10kWYFFebh1zotiw==}
 
@@ -6947,9 +6995,34 @@ packages:
   '@mdn/browser-compat-data@6.1.5':
     resolution: {integrity: sha512-PzdZZzRhcXvKB0begee28n5lvwAcinGKYuLZOVxHAZm+n7y01ddEGfdS1ZXRuVcV+ndG6mSEAE8vgudom5UjYg==}
 
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': 18.3.26
+      react: 18.3.1
+
+  '@microsoft/api-extractor-model@7.33.8':
+    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
+
+  '@microsoft/api-extractor@7.58.8':
+    resolution: {integrity: sha512-Y45rdEvZodD1WBAK9w8Wvqj7k/6z21YOEP8aVNWv1vemEzanjThvCowc3Eyt/bmJJyqI4gj0BQr9nLC51fsDiQ==}
+    hasBin: true
+
+  '@microsoft/tsdoc-config@0.18.1':
+    resolution: {integrity: sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==}
+
+  '@microsoft/tsdoc@0.16.0':
+    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
 
@@ -7175,6 +7248,228 @@ packages:
   '@octokit/types@13.10.0':
     resolution: {integrity: sha512-ifLaO34EbbPj0Xgro4G5lP5asESjwHracYJvVaPIyXMuiuXLlhic3S47cBdTb+jfODkTE5YtGCLt3Ay3+J97sA==}
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
+    resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.19.1':
+    resolution: {integrity: sha512-oolbkRX+m7Pq2LNjr/kKgYeC7bRDMVTWPgxBGMjSpZi/+UskVo4jsMU3MLheZV55jL6c3rNelPl4oD60ggYmqA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.19.1':
+    resolution: {integrity: sha512-nUC6d2i3R5B12sUW4O646qD5cnMXf2oBGPLIIeaRfU9doJRORAbE2SGv4eW6rMqhD+G7nf2Y8TTJTLiiO3Q/dQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.19.1':
+    resolution: {integrity: sha512-cV50vE5+uAgNcFa3QY1JOeKDSkM/9ReIcc/9wn4TavhW/itkDGrXhw9jaKnkQnGbjJ198Yh5nbX/Gr2mr4Z5jQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.19.1':
+    resolution: {integrity: sha512-xZOQiYGFxtk48PBKff+Zwoym7ScPAIVp4c14lfLxizO2LTTTJe5sx9vQNGrBymrf/vatSPNMD4FgsaaRigPkqw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
+    resolution: {integrity: sha512-lXZYWAC6kaGe/ky2su94e9jN9t6M0/6c+GrSlCqL//XO1cxi5lpAhnJYdyrKfm0ZEr/c7RNyAx3P7FSBcBd5+A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
+    resolution: {integrity: sha512-veG1kKsuK5+t2IsO9q0DErYVSw2azvCVvWHnfTOS73WE0STdLLB7Q1bB9WR+yHPQM76ASkFyRbogWo1GR1+WbQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
+    resolution: {integrity: sha512-heV2+jmXyYnUrpUXSPugqWDRpnsQcDm2AX4wzTuvgdlZfoNYO0O3W2AVpJYaDn9AG4JdM6Kxom8+foE7/BcSig==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
+    resolution: {integrity: sha512-jvo2Pjs1c9KPxMuMPIeQsgu0mOJF9rEb3y3TdpsrqwxRM+AN6/nDDwv45n5ZrUnQMsdBy5gIabioMKnQfWo9ew==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
+    resolution: {integrity: sha512-vLmdNxWCdN7Uo5suays6A/+ywBby2PWBBPXctWPg5V0+eVuzsJxgAn6MMB4mPlshskYbppjpN2Zg83ArHze9gQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
+    resolution: {integrity: sha512-/b+WgR+VTSBxzgOhDO7TlMXC1ufPIMR6Vj1zN+/x+MnyXGW7prTLzU9eW85Aj7Th7CCEG9ArCbTeqxCzFWdg2w==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
+    resolution: {integrity: sha512-YlRdeWb9j42p29ROh+h4eg/OQ3dTJlpHSa+84pUM9+p6i3djtPz1q55yLJhgW9XfDch7FN1pQ/Vd6YP+xfRIuw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
+    resolution: {integrity: sha512-EDpafVOQWF8/MJynsjOGFThcqhRHy417sRyLfQmeiamJ8qVhSKAn2Dn2VVKUGCjVB9C46VGjhNo7nOPUi1x6uA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
+    resolution: {integrity: sha512-NxjZe+rqWhr+RT8/Ik+5ptA3oz7tUw361Wa5RWQXKnfqwSSHdHyrw6IdcTfYuml9dM856AlKWZIUXDmA9kkiBQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
+    resolution: {integrity: sha512-cM/hQwsO3ReJg5kR+SpI69DMfvNCp+A/eVR4b4YClE5bVZwz8rh2Nh05InhwI5HR/9cArbEkzMjcKgTHS6UaNw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
+    resolution: {integrity: sha512-QF080IowFB0+9Rh6RcD19bdgh49BpQHUW5TajG1qvWHvmrQznTZZjYlgE2ltLXyKY+qs4F/v5xuX1XS7Is+3qA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.19.1':
+    resolution: {integrity: sha512-w8UCKhX826cP/ZLokXDS6+milN8y4X7zidsAttEdWlVoamTNf6lhBJldaWr3ukTDiye7s4HRcuPEPOXNC432Vg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
+    resolution: {integrity: sha512-nJ4AsUVZrVKwnU/QRdzPCCrO0TrabBqgJ8pJhXITdZGYOV28TIYystV1VFLbQ7DtAcaBHpocT5/ZJnF78YJPtQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
+    resolution: {integrity: sha512-EW+ND5q2Tl+a3pH81l1QbfgbF3HmqgwLfDfVithRFheac8OTcnbXt/JxqD2GbDkb7xYEqy1zNaVFRr3oeG8npA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
+    resolution: {integrity: sha512-6hIU3RQu45B+VNTY4Ru8ppFwjVS/S5qwYyGhBotmjxfEKk41I2DlGtRfGJndZ5+6lneE2pwloqunlOyZuX/XAw==}
+    cpu: [x64]
+    os: [win32]
+
   '@peculiar/asn1-cms@2.6.1':
     resolution: {integrity: sha512-vdG4fBF6Lkirkcl53q6eOdn3XYKt+kJTG59edgRZORlg/3atWWEReRCx5rYE1ZzTTX6vLK5zDMjHh7vbrcXGtw==}
 
@@ -7219,6 +7514,15 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.60.1':
     resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
     cpu: [arm]
@@ -7344,6 +7648,36 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rushstack/node-core-library@5.23.1':
+    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/problem-matcher@0.2.1':
+    resolution: {integrity: sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/rig-package@0.7.3':
+    resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
+
+  '@rushstack/terminal@0.24.0':
+    resolution: {integrity: sha512-8ZQS4MMaGsv27EXCBiH7WMPkRZrffeDoIevs6z9TM5dzqiY6+Hn4evfK/G+gvgBTjfvfkHIZPQQmalmI2sM4TQ==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/ts-command-line@5.3.9':
+    resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==}
+
   '@sigstore/bundle@4.0.0':
     resolution: {integrity: sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -7386,6 +7720,79 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@storybook/addon-a11y@10.4.1':
+    resolution: {integrity: sha512-MGft/IXjJ20a9KbaSVG9bHTAAoanbucKrgEiJJRNqpim8DsXA01+XTdSk17LmiOCB203Rrq9mWgdQ6+79cc8iA==}
+    peerDependencies:
+      storybook: ^10.4.1
+
+  '@storybook/addon-docs@10.4.1':
+    resolution: {integrity: sha512-IYqUdjoZe4VO2LFZlKL/gwy7DsQSWCq6hX+zc1MBmZo04yycDASk1tte57n9pdlW3ajw9yYMF/+lVBi+xQjyvw==}
+    peerDependencies:
+      '@types/react': 18.3.26
+      storybook: ^10.4.1
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@storybook/builder-vite@10.4.1':
+    resolution: {integrity: sha512-/oyQrXoNOqN8SW5hNnYP+I1uvgFxKxWXj/EP6NXYzc5SQwImofgru+D2+6gDhL0+Q//+Hx05DJoQO2omvUJ8bQ==}
+    peerDependencies:
+      storybook: ^10.4.1
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/csf-plugin@10.4.1':
+    resolution: {integrity: sha512-WdPepGBxDGOUDjYd8KxMtcf+us/2PAcnBczl77XtrnxxHNs0jWesxKkiJ9yiuGrge4BPhDeAj6rxjbBoaHxLBA==}
+    peerDependencies:
+      esbuild: '*'
+      rollup: '*'
+      storybook: ^10.4.1
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/icons@2.0.2':
+    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+    peerDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1
+
+  '@storybook/react-dom-shim@10.4.1':
+    resolution: {integrity: sha512-6QFqfDNH4DMrt7yHKRfpqRopsVUc/Az+sXIdJ39IetYnHUxL3nW4NVaPc6uy/8Qi8urzUyEXL/nn7cpSIP2aPQ==}
+    peerDependencies:
+      '@types/react': 18.3.26
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: 18.3.1
+      react-dom: 18.3.1
+      storybook: ^10.4.1
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/web-components-vite@10.4.1':
+    resolution: {integrity: sha512-i66ublYmQNK9zvSgiT7w9zSHCcXh+g7lHWFoxO+QX7riRLMmtk5uOlWna9P7Ny41fkoQ7POKWJAuZ9PLBPl/Ug==}
+    peerDependencies:
+      storybook: ^10.4.1
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/web-components@10.4.1':
+    resolution: {integrity: sha512-bvvIQZK7vdxoVrBmQtbvtNU5ugFF8dETc0l2j58nPUerDHUook8dFNXUiKfK1KmnLsBZ/7KEjPPmk7sEHygvlQ==}
+    peerDependencies:
+      lit: ^2.0.0 || ^3.0.0
+      storybook: ^10.4.1
+
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -7426,9 +7833,15 @@ packages:
     resolution: {integrity: sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  '@tybys/wasm-util@0.10.2':
+    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
+
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/argparse@1.0.38':
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -7521,6 +7934,9 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
   '@types/mime@1.3.5':
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
 
@@ -7602,6 +8018,9 @@ packages:
   '@types/tmp@0.2.6':
     resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/ua-parser-js@0.7.39':
     resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==}
 
@@ -7764,6 +8183,15 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -7809,10 +8237,13 @@ packages:
   '@webassemblyjs/wast-printer@1.14.1':
     resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
     engines: {node: '>=10.0.0'}
-    deprecated: this version is no longer supported, please update to at least 0.8.*
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -7901,9 +8332,20 @@ packages:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
 
+  ajv-draft-04@1.0.0:
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
 
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+
   ajv-keywords@5.1.0:
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
@@ -8628,6 +9070,9 @@ packages:
   compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
 
+  compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+
   component-emitter@2.0.0:
     resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==}
     engines: {node: '>=18'}
@@ -8656,6 +9101,12 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
   configstore@3.1.5:
     resolution: {integrity: sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==}
     engines: {node: '>=4'}
@@ -9072,6 +9523,10 @@ packages:
     resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
     engines: {node: '>=0.3.1'}
 
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -9470,6 +9925,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -9536,6 +9994,9 @@ packages:
     resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
     engines: {node: '>= 0.10.0'}
 
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
   ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
 
@@ -10265,6 +10726,10 @@ packages:
     resolution: {integrity: sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==}
     engines: {node: '>=4'}
 
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+
   import-local@3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
     engines: {node: '>=8'}
@@ -10718,6 +11183,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -10855,6 +11323,9 @@ packages:
   klaw-sync@6.0.0:
     resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -10915,6 +11386,15 @@ packages:
     resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
     engines: {node: '>=20.0.0'}
 
+  lit-element@4.2.2:
+    resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}
+
+  lit-html@3.3.3:
+    resolution: {integrity: sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==}
+
+  lit@3.3.3:
+    resolution: {integrity: sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==}
+
   load-json-file@4.0.0:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
@@ -10931,6 +11411,10 @@ packages:
     resolution: {integrity: sha512-DFEqQ3ihfS9blba08cLfYf1NRAIEm+dDjic073DRDc3/JspI/8wYmtDsHwd3+4hwvdxSK7PGaElfTmm0awWJ4w==}
     engines: {node: '>=6.11.5'}
 
+  local-pkg@1.2.1:
+    resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
+    engines: {node: '>=14'}
+
   locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -11200,6 +11684,10 @@ packages:
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
+  minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@10.2.4:
     resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
     engines: {node: 18 || 20 || >=22}
@@ -11309,6 +11797,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
   mocha@10.8.2:
     resolution: {integrity: sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==}
     engines: {node: '>= 14.0.0'}
@@ -11360,6 +11851,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -11641,6 +12137,13 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.19.1:
+    resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==}
+
   p-finally@1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
@@ -11795,6 +12298,9 @@ packages:
     engines: {node: '>=14', npm: '>5'}
     hasBin: true
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -11901,6 +12407,12 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
   pkijs@3.4.0:
     resolution: {integrity: sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==}
     engines: {node: '>=16.0.0'}
@@ -11948,6 +12460,10 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.5.8:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -12090,6 +12606,9 @@ packages:
     resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
     engines: {node: '>=0.6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -12694,6 +13213,21 @@ packages:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
+  storybook@10.4.1:
+    resolution: {integrity: sha512-V1Zd2e+gBFufqAQVZ1JR8KLqALsEZ3JYSBnWwQbKa6zCfWWanR6AFMyuOkLt2gZOgGp3h2Riuz88pGNVTQSG0A==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': 18.3.26
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
   stream-each@1.2.3:
     resolution: {integrity: sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==}
 
@@ -13039,6 +13573,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@1.1.1:
     resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -13114,6 +13652,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -13229,6 +13771,9 @@ packages:
     resolution: {integrity: sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==}
     hasBin: true
 
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
   uglify-js@3.19.3:
     resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
     engines: {node: '>=0.8.0'}
@@ -13298,6 +13843,40 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-dts@1.0.2:
+    resolution: {integrity: sha512-VbNiMD0LMl/t6nJueGtrCp79N7ZO1nquxj/FUybJDnKwZGsnW2wjdwBSzA3QEHujoxmxZIptsG43hL7LzXE96w==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      '@rspack/core': ^1
+      '@vue/language-core': ~3.1.5
+      esbuild: '*'
+      rolldown: '*'
+      rollup: '>=3'
+      typescript: '>=4'
+      vite: '>=3'
+      webpack: ^4 || ^5
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@rspack/core':
+        optional: true
+      '@vue/language-core':
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
@@ -13334,6 +13913,11 @@ packages:
     resolution: {integrity: sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==}
     engines: {node: '>= 0.4'}
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: 18.3.1
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -13382,6 +13966,20 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
+  vite-plugin-dts@5.0.2:
+    resolution: {integrity: sha512-lNeHS+dwGju6eRmNvZQt8Shwv9j3m98hbHse/lIbLq9q3yE2DcIOBBYQEVUF6tS0kOmv+VA9Z5FqmzFnGe4U8g==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      rollup: '>=3'
+      vite: '>=3'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+
   vite@7.3.1:
     resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -13450,6 +14048,9 @@ packages:
       jsdom:
         optional: true
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -13528,6 +14129,9 @@ packages:
     resolution: {integrity: sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==}
     engines: {node: '>=10.13.0'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   webpack@5.106.2:
     resolution: {integrity: sha512-wGN3qcrBQIFmQ/c0AiOAQBvrZ5lmY8vbbMv4Mxfgzqd/B6+9pXtLo73WuS1dSGXM5QYY3hZnIbvx+K1xxe6FyA==}
     engines: {node: '>=10.13.0'}
@@ -15459,7 +16063,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.15
 
-  '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/9916a91be6b27a8c2d15136d2865e6f69a2d1c08':
+  '@instructure/instructure-design-tokens@https://codeload.github.com/instructure/instructure-design-tokens/tar.gz/130e505740c855f4f7afde61733d59b41abaf041':
     dependencies:
       glob: 13.0.6
 
@@ -15723,6 +16327,16 @@ snapshots:
       '@lezer/common': 1.5.1
       '@lezer/highlight': 1.2.1
 
+  '@lit-labs/ssr-dom-shim@1.6.0': {}
+
+  '@lit/react@1.0.8(@types/react@18.3.26)':
+    dependencies:
+      '@types/react': 18.3.26
+
+  '@lit/reactive-element@2.1.2':
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.6.0
+
   '@ltd/j-toml@1.38.0': {}
 
   '@marijn/find-cluster-break@1.0.2': {}
@@ -15731,12 +16345,60 @@ snapshots:
 
   '@mdn/browser-compat-data@6.1.5': {}
 
+  '@mdx-js/react@3.1.1(@types/react@18.3.26)(react@18.3.1)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 18.3.26
+      react: 18.3.1
+
+  '@microsoft/api-extractor-model@7.33.8(@types/node@22.19.15)':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.15)
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/api-extractor@7.58.8(@types/node@22.19.15)':
+    dependencies:
+      '@microsoft/api-extractor-model': 7.33.8(@types/node@22.19.15)
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.15)
+      '@rushstack/rig-package': 0.7.3
+      '@rushstack/terminal': 0.24.0(@types/node@22.19.15)
+      '@rushstack/ts-command-line': 5.3.9(@types/node@22.19.15)
+      diff: 8.0.4
+      minimatch: 10.2.3
+      resolve: 1.22.11
+      semver: 7.7.4
+      source-map: 0.6.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/tsdoc-config@0.18.1':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      ajv: 8.18.0
+      jju: 1.4.0
+      resolve: 1.22.11
+
+  '@microsoft/tsdoc@0.16.0': {}
+
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
       '@emnapi/core': 1.9.2
       '@emnapi/runtime': 1.9.2
       '@tybys/wasm-util': 0.9.0
 
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     optional: true
 
@@ -15952,73 +16614,204 @@ snapshots:
   '@nx/nx-win32-arm64-msvc@22.6.4':
     optional: true
 
-  '@nx/nx-win32-x64-msvc@22.6.4':
+  '@nx/nx-win32-x64-msvc@22.6.4':
+    optional: true
+
+  '@octokit/auth-token@4.0.0': {}
+
+  '@octokit/core@5.2.2':
+    dependencies:
+      '@octokit/auth-token': 4.0.0
+      '@octokit/graphql': 7.1.1
+      '@octokit/request': 8.4.1
+      '@octokit/request-error': 5.1.1
+      '@octokit/types': 13.10.0
+      before-after-hook: 2.2.3
+      universal-user-agent: 6.0.1
+
+  '@octokit/endpoint@9.0.6':
+    dependencies:
+      '@octokit/types': 13.10.0
+      universal-user-agent: 6.0.1
+
+  '@octokit/graphql@7.1.1':
+    dependencies:
+      '@octokit/request': 8.4.1
+      '@octokit/types': 13.10.0
+      universal-user-agent: 6.0.1
+
+  '@octokit/openapi-types@24.2.0': {}
+
+  '@octokit/plugin-enterprise-rest@6.0.1': {}
+
+  '@octokit/plugin-paginate-rest@11.4.4-cjs.2(@octokit/core@5.2.2)':
+    dependencies:
+      '@octokit/core': 5.2.2
+      '@octokit/types': 13.10.0
+
+  '@octokit/plugin-request-log@4.0.1(@octokit/core@5.2.2)':
+    dependencies:
+      '@octokit/core': 5.2.2
+
+  '@octokit/plugin-rest-endpoint-methods@13.3.2-cjs.1(@octokit/core@5.2.2)':
+    dependencies:
+      '@octokit/core': 5.2.2
+      '@octokit/types': 13.10.0
+
+  '@octokit/request-error@5.1.1':
+    dependencies:
+      '@octokit/types': 13.10.0
+      deprecation: 2.3.1
+      once: 1.4.0
+
+  '@octokit/request@8.4.1':
+    dependencies:
+      '@octokit/endpoint': 9.0.6
+      '@octokit/request-error': 5.1.1
+      '@octokit/types': 13.10.0
+      universal-user-agent: 6.0.1
+
+  '@octokit/rest@20.1.2':
+    dependencies:
+      '@octokit/core': 5.2.2
+      '@octokit/plugin-paginate-rest': 11.4.4-cjs.2(@octokit/core@5.2.2)
+      '@octokit/plugin-request-log': 4.0.1(@octokit/core@5.2.2)
+      '@octokit/plugin-rest-endpoint-methods': 13.3.2-cjs.1(@octokit/core@5.2.2)
+
+  '@octokit/types@13.10.0':
+    dependencies:
+      '@octokit/openapi-types': 24.2.0
+
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-project/types@0.127.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
     optional: true
 
-  '@octokit/auth-token@4.0.0': {}
+  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
+    optional: true
 
-  '@octokit/core@5.2.2':
-    dependencies:
-      '@octokit/auth-token': 4.0.0
-      '@octokit/graphql': 7.1.1
-      '@octokit/request': 8.4.1
-      '@octokit/request-error': 5.1.1
-      '@octokit/types': 13.10.0
-      before-after-hook: 2.2.3
-      universal-user-agent: 6.0.1
+  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
+    optional: true
 
-  '@octokit/endpoint@9.0.6':
-    dependencies:
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
+    optional: true
 
-  '@octokit/graphql@7.1.1':
-    dependencies:
-      '@octokit/request': 8.4.1
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
+    optional: true
 
-  '@octokit/openapi-types@24.2.0': {}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
+    optional: true
 
-  '@octokit/plugin-enterprise-rest@6.0.1': {}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
+    optional: true
 
-  '@octokit/plugin-paginate-rest@11.4.4-cjs.2(@octokit/core@5.2.2)':
-    dependencies:
-      '@octokit/core': 5.2.2
-      '@octokit/types': 13.10.0
+  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
+    optional: true
 
-  '@octokit/plugin-request-log@4.0.1(@octokit/core@5.2.2)':
-    dependencies:
-      '@octokit/core': 5.2.2
+  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
+    optional: true
 
-  '@octokit/plugin-rest-endpoint-methods@13.3.2-cjs.1(@octokit/core@5.2.2)':
-    dependencies:
-      '@octokit/core': 5.2.2
-      '@octokit/types': 13.10.0
+  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
+    optional: true
 
-  '@octokit/request-error@5.1.1':
+  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
-      '@octokit/types': 13.10.0
-      deprecation: 2.3.1
-      once: 1.4.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
 
-  '@octokit/request@8.4.1':
-    dependencies:
-      '@octokit/endpoint': 9.0.6
-      '@octokit/request-error': 5.1.1
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
+  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
+    optional: true
 
-  '@octokit/rest@20.1.2':
-    dependencies:
-      '@octokit/core': 5.2.2
-      '@octokit/plugin-paginate-rest': 11.4.4-cjs.2(@octokit/core@5.2.2)
-      '@octokit/plugin-request-log': 4.0.1(@octokit/core@5.2.2)
-      '@octokit/plugin-rest-endpoint-methods': 13.3.2-cjs.1(@octokit/core@5.2.2)
+  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
+    optional: true
 
-  '@octokit/types@13.10.0':
-    dependencies:
-      '@octokit/openapi-types': 24.2.0
+  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
+    optional: true
 
   '@peculiar/asn1-cms@2.6.1':
     dependencies:
@@ -16117,6 +16910,14 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
+  '@rollup/pluginutils@5.4.0(rollup@4.60.1)':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+    optionalDependencies:
+      rollup: 4.60.1
+
   '@rollup/rollup-android-arm-eabi@4.60.1':
     optional: true
 
@@ -16192,6 +16993,45 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.60.1':
     optional: true
 
+  '@rushstack/node-core-library@5.23.1(@types/node@22.19.15)':
+    dependencies:
+      ajv: 8.18.0
+      ajv-draft-04: 1.0.0(ajv@8.18.0)
+      ajv-formats: 3.0.1
+      fs-extra: 11.3.4
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.11
+      semver: 7.7.4
+    optionalDependencies:
+      '@types/node': 22.19.15
+
+  '@rushstack/problem-matcher@0.2.1(@types/node@22.19.15)':
+    optionalDependencies:
+      '@types/node': 22.19.15
+
+  '@rushstack/rig-package@0.7.3':
+    dependencies:
+      jju: 1.4.0
+      resolve: 1.22.11
+
+  '@rushstack/terminal@0.24.0(@types/node@22.19.15)':
+    dependencies:
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.15)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@22.19.15)
+      supports-color: 8.1.1
+    optionalDependencies:
+      '@types/node': 22.19.15
+
+  '@rushstack/ts-command-line@5.3.9(@types/node@22.19.15)':
+    dependencies:
+      '@rushstack/terminal': 0.24.0(@types/node@22.19.15)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+
   '@sigstore/bundle@4.0.0':
     dependencies:
       '@sigstore/protobuf-specs': 0.5.0
@@ -16236,6 +17076,88 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@storybook/addon-a11y@10.4.1(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      axe-core: 4.11.2
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  '@storybook/addon-docs@10.4.1(@types/react-dom@18.3.1)(@types/react@18.3.26)(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@18.3.26)(react@18.3.1)
+      '@storybook/csf-plugin': 10.4.1(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+      '@storybook/icons': 2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/react-dom-shim': 10.4.1(@types/react-dom@18.3.1)(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      '@types/react': 18.3.26
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
+  '@storybook/builder-vite@10.4.1(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))':
+    dependencies:
+      '@storybook/csf-plugin': 10.4.1(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      ts-dedent: 2.2.0
+      vite: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/csf-plugin@10.4.1(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))':
+    dependencies:
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.28.0
+      rollup: 4.60.1
+      vite: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+      webpack: 5.107.2(esbuild@0.28.0)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@storybook/react-dom-shim@10.4.1(@types/react-dom@18.3.1)(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.26
+      '@types/react-dom': 18.3.1
+
+  '@storybook/web-components-vite@10.4.1(esbuild@0.28.0)(lit@3.3.3)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))':
+    dependencies:
+      '@storybook/builder-vite': 10.4.1(esbuild@0.28.0)(rollup@4.60.1)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+      '@storybook/web-components': 10.4.1(lit@3.3.3)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vite: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - esbuild
+      - lit
+      - rollup
+      - webpack
+
+  '@storybook/web-components@10.4.1(lit@3.3.3)(storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      lit: 3.3.3
+      storybook: 10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -16281,10 +17203,17 @@ snapshots:
       '@tufjs/canonical-json': 2.0.0
       minimatch: 10.2.5
 
+  '@tybys/wasm-util@0.10.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@tybys/wasm-util@0.9.0':
     dependencies:
       tslib: 2.8.1
 
+  '@types/argparse@1.0.38': {}
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -16404,6 +17333,8 @@ snapshots:
     dependencies:
       '@types/node': 22.19.15
 
+  '@types/mdx@2.0.13': {}
+
   '@types/mime@1.3.5': {}
 
   '@types/minimist@1.2.5': {}
@@ -16484,6 +17415,8 @@ snapshots:
 
   '@types/tmp@0.2.6': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/ua-parser-js@0.7.39': {}
 
   '@types/ws@8.18.1':
@@ -16590,7 +17523,7 @@ snapshots:
       debug: 4.4.3(supports-color@8.1.1)
       minimatch: 10.2.5
       semver: 7.7.4
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
       ts-api-utils: 2.5.0(typescript@6.0.3)
       typescript: 6.0.3
     transitivePeerDependencies:
@@ -16709,6 +17642,18 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -16785,6 +17730,8 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
+  '@webcontainer/env@1.1.1': {}
+
   '@xmldom/xmldom@0.7.13': {}
 
   '@xtuc/ieee754@1.2.0': {}
@@ -16861,10 +17808,18 @@ snapshots:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
+  ajv-draft-04@1.0.0(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
   ajv-formats@2.1.1:
     dependencies:
       ajv: 8.18.0
 
+  ajv-formats@3.0.1:
+    dependencies:
+      ajv: 8.18.0
+
   ajv-keywords@5.1.0(ajv@8.18.0):
     dependencies:
       ajv: 8.18.0
@@ -17676,6 +18631,8 @@ snapshots:
       array-ify: 1.0.0
       dot-prop: 5.3.0
 
+  compare-versions@6.1.1: {}
+
   component-emitter@2.0.0: {}
 
   compressible@2.0.18:
@@ -17719,6 +18676,10 @@ snapshots:
       tree-kill: 1.2.2
       yargs: 17.7.2
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
   configstore@3.1.5:
     dependencies:
       dot-prop: 4.2.1
@@ -18175,6 +19136,8 @@ snapshots:
 
   diff@5.2.2: {}
 
+  diff@8.0.4: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -18769,6 +19732,8 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@2.0.2: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -18884,6 +19849,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  exsolve@1.0.8: {}
+
   ext@1.7.0:
     dependencies:
       type: 2.7.3
@@ -19731,6 +20698,8 @@ snapshots:
 
   import-lazy@2.1.0: {}
 
+  import-lazy@4.0.0: {}
+
   import-local@3.1.0:
     dependencies:
       pkg-dir: 4.2.0
@@ -20172,6 +21141,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jju@1.4.0: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -20345,6 +21316,8 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
 
+  kolorist@1.8.0: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
@@ -20498,6 +21471,22 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.2
 
+  lit-element@4.2.2:
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.6.0
+      '@lit/reactive-element': 2.1.2
+      lit-html: 3.3.3
+
+  lit-html@3.3.3:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  lit@3.3.3:
+    dependencies:
+      '@lit/reactive-element': 2.1.2
+      lit-element: 4.2.2
+      lit-html: 3.3.3
+
   load-json-file@4.0.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -20516,6 +21505,12 @@ snapshots:
 
   loader-runner@4.3.2: {}
 
+  local-pkg@1.2.1:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
   locate-path@2.0.0:
     dependencies:
       p-locate: 2.0.0
@@ -20825,6 +21820,10 @@ snapshots:
 
   minimalistic-assert@1.0.1: {}
 
+  minimatch@10.2.3:
+    dependencies:
+      brace-expansion: 5.0.5
+
   minimatch@10.2.4:
     dependencies:
       brace-expansion: 5.0.5
@@ -20958,6 +21957,13 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
+
   mocha@10.8.2:
     dependencies:
       ansi-colors: 4.1.3
@@ -21019,6 +22025,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.12: {}
+
   natural-compare@1.4.0: {}
 
   negotiator@0.6.3: {}
@@ -21065,7 +22073,7 @@ snapshots:
       proc-log: 6.1.0
       semver: 7.7.4
       tar: 7.5.11
-      tinyglobby: 0.2.12
+      tinyglobby: 0.2.16
       which: 6.0.1
     transitivePeerDependencies:
       - supports-color
@@ -21419,6 +22427,57 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-resolver@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.19.1
+      '@oxc-resolver/binding-android-arm64': 11.19.1
+      '@oxc-resolver/binding-darwin-arm64': 11.19.1
+      '@oxc-resolver/binding-darwin-x64': 11.19.1
+      '@oxc-resolver/binding-freebsd-x64': 11.19.1
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.19.1
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.19.1
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.19.1
+      '@oxc-resolver/binding-linux-arm64-musl': 11.19.1
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.19.1
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.19.1
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.19.1
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.19.1
+      '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
+      '@oxc-resolver/binding-linux-x64-musl': 11.19.1
+      '@oxc-resolver/binding-openharmony-arm64': 11.19.1
+      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
+      '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
+      '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
   p-finally@1.0.0: {}
 
   p-limit@1.3.0:
@@ -21647,6 +22706,8 @@ snapshots:
       tmp: 0.2.5
       yaml: 2.8.3
 
+  path-browserify@1.0.1: {}
+
   path-exists@3.0.0: {}
 
   path-exists@4.0.0: {}
@@ -21722,6 +22783,18 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
   pkijs@3.4.0:
     dependencies:
       '@noble/hashes': 1.4.0
@@ -21770,6 +22843,12 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postcss@8.5.8:
     dependencies:
       nanoid: 3.3.11
@@ -21903,6 +22982,8 @@ snapshots:
     dependencies:
       side-channel: 1.1.0
 
+  quansync@0.2.11: {}
+
   queue-microtask@1.2.3: {}
 
   queue@6.0.1:
@@ -22634,6 +23715,35 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
+  storybook@10.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@testing-library/dom@10.4.1)(@types/react@18.3.26)(prettier@3.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.25.12
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      recast: 0.23.11
+      semver: 7.7.4
+      use-sync-external-store: 1.6.0(react@18.3.1)
+      ws: 8.20.0
+    optionalDependencies:
+      '@types/react': 18.3.26
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@testing-library/dom'
+      - bufferutil
+      - react
+      - react-dom
+      - utf-8-validate
+
   stream-each@1.2.3:
     dependencies:
       end-of-stream: 1.4.5
@@ -23000,6 +24110,11 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
   tinypool@1.1.1: {}
 
   tinyrainbow@2.0.0: {}
@@ -23054,6 +24169,8 @@ snapshots:
     dependencies:
       typescript: 6.0.3
 
+  ts-dedent@2.2.0: {}
+
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
@@ -23180,6 +24297,8 @@ snapshots:
 
   ua-parser-js@1.0.41: {}
 
+  ufo@1.6.4: {}
+
   uglify-js@3.19.3:
     optional: true
 
@@ -23237,6 +24356,33 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-dts@1.0.2(@microsoft/api-extractor@7.58.8(@types/node@22.19.15))(esbuild@0.28.0)(rollup@4.60.1)(typescript@6.0.3)(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0)):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@volar/typescript': 2.4.28
+      compare-versions: 6.1.1
+      debug: 4.4.3(supports-color@8.1.1)
+      kolorist: 1.8.0
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      typescript: 6.0.3
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@microsoft/api-extractor': 7.58.8(@types/node@22.19.15)
+      esbuild: 0.28.0
+      rollup: 4.60.1
+      vite: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+      webpack: 5.107.2(esbuild@0.28.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
   untildify@4.0.0: {}
 
   unzip-response@2.0.1: {}
@@ -23277,6 +24423,10 @@ snapshots:
       punycode: 1.4.1
       qs: 6.15.0
 
+  use-sync-external-store@1.6.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   util-deprecate@1.0.2: {}
 
   util@0.10.4:
@@ -23339,14 +24489,30 @@ snapshots:
       - tsx
       - yaml
 
+  vite-plugin-dts@5.0.2(@microsoft/api-extractor@7.58.8(@types/node@22.19.15))(esbuild@0.28.0)(rollup@4.60.1)(typescript@6.0.3)(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0)):
+    dependencies:
+      unplugin-dts: 1.0.2(@microsoft/api-extractor@7.58.8(@types/node@22.19.15))(esbuild@0.28.0)(rollup@4.60.1)(typescript@6.0.3)(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3))(webpack@5.107.2(esbuild@0.28.0))
+    optionalDependencies:
+      '@microsoft/api-extractor': 7.58.8(@types/node@22.19.15)
+      rollup: 4.60.1
+      vite: 7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@vue/language-core'
+      - esbuild
+      - rolldown
+      - supports-color
+      - typescript
+      - webpack
+
   vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(terser@5.48.0)(yaml@2.8.3):
     dependencies:
       esbuild: 0.27.7
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
-      postcss: 8.5.8
+      postcss: 8.5.15
       rollup: 4.60.1
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
     optionalDependencies:
       '@types/node': 22.19.15
       fsevents: 2.3.3
@@ -23396,6 +24562,8 @@ snapshots:
       - tsx
       - yaml
 
+  vscode-uri@3.1.0: {}
+
   w3c-keyname@2.2.8: {}
 
   w3c-xmlserializer@5.0.0:
@@ -23511,6 +24679,8 @@ snapshots:
 
   webpack-sources@3.5.0: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   webpack@5.106.2(esbuild@0.28.0):
     dependencies:
       '@types/eslint-scope': 3.7.7