Merge branch '2.1'

All components started from scratch, 2026.

Author: jeff-zucker

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: test
+
+on:
+  push:
+    branches: [main, '2.0']
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - run: npm ci
+      - run: npm run test:ci

.gitignore

@@ -0,0 +1,151 @@
+*~
+#*
+*#
+.#*
+notes.md
+drafts
+node_modules
+coverage
+test
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+.claude
+*~
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite logs files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

CSS_PLAN.md

@@ -0,0 +1,71 @@
+# CSS Customization Plan — sol-menu, sol-query, sol-include
+
+Goal: every "magic value" in these three stylesheets resolves to `var(--token, fallback)` so a host page can theme without forking CSS.
+
+## 0. Fonts (DONE)
+
+- `--small-font: 16px; --medium-font: 20px; --large-font: 24px;`
+- `--font-size: var(--medium-font, 20px)` is the default base.
+- `:host` of each component declares `font-size` so the chain works in shadow scope.
+- No size resolves below 16px (the lone offender, `th::after` at .75em → 15px, now uses `--small-font`).
+
+## 1. Spacing, sizing, radius tokens
+
+Add to `root.css`:
+```css
+--space-xs: 2px;
+--space-sm: 4px;
+--space-md: 8px;
+--space-lg: 12px;
+--space-xl: 16px;
+--space-2xl: 24px;
+--radius-sm: 4px;
+--radius-md: 6px;
+```
+
+Component-specific size knobs:
+- sol-menu: `--menu-nav-min-width: 140px; --menu-nav-max-width: 260px; --menu-popup-min-width: 160px;`
+- sol-query: `--bnode-modal-max-width: min(90vw, 700px); --bnode-modal-max-height: 80vh;`
+
+Sweep raw `px` paddings/gaps/radii in the three component stylesheets and route them through these vars.
+
+## 2. Colors / shadows / scrim
+
+`root.css` already declares `--shadow`. Sweep remaining hex / rgba:
+- sol-menu popup `box-shadow: 0 4px 12px rgba(0,0,0,0.12)` → `var(--shadow-popup, 0 4px 12px rgba(0,0,0,0.12))`.
+- sol-query bnode modal `0 8px 24px var(--shadow, rgba(0,0,0,0.25))` → `var(--shadow-modal, 0 8px 24px rgba(0,0,0,0.25))`.
+- sol-query backdrop `rgba(0,0,0,0.4)` → `var(--scrim, rgba(0,0,0,0.4))`.
+- Audit anchor / link colors — already use `--accent`; nothing to change unless we want a `--link` alias.
+
+## 3. Font-weight & line-height tokens
+
+```css
+--font-weight-normal: 400;
+--font-weight-bold: 600;
+--line-height-tight: 1.25;
+--line-height-base: 1.5;
+```
+
+Replace literal `600` (sol-menu group/active, sol-query th/dt/.subject-heading/.dl-field) and the `1.25` line-height in sol-include headings.
+
+## 4. Per-component theming knobs
+
+Prefix-scoped vars so a page can target one component without leaking to others.
+
+sol-menu:
+- `--menu-button-padding`, `--menu-button-radius`, `--menu-active-bg`, `--menu-active-color`, `--menu-hover-bg`, `--menu-hover-color`.
+
+sol-query:
+- `--query-th-bg` (alias of existing `--th-color`), `--query-th-color` (alias of `--th-text-color`), `--query-row-alt-bg` (alias of `--even-color`), `--query-link-color`, `--query-bnode-link-color`, `--query-cell-padding`.
+
+sol-include:
+- `--include-code-bg`, `--include-code-padding`, `--include-blockquote-border`, `--include-blockquote-color`.
+
+These layer on top of the global tokens — global vars stay the source of truth, prefix vars allow narrow overrides.
+
+## 5. Cleanup / audit
+
+- `root.css` declares `--text-muted` twice (lines 6 & 7); drop the first.
+- Decide whether `[data-theme="dark"]` should redefine the new font / spacing scales (probably not, but document).
+- Verify nothing else in the three stylesheets resolves below 16px after the spacing pass.
+- After each step: `npm run bundle` and spot-check in browser.

README.md

@@ -0,0 +1,32 @@
+# Solid Components
+
+**This is a Work In Progress - More Help Coming Soon!**
+
+This is a single npm package, **`solid-web-components`**, that ships both a set of browser web-components for Solid and a Node.js version of the same components for use in scripts or CLI tools. The same import path resolves to the right build for the runtime — for example, `import { SolQuery } from 'solid-web-components/query'` gives you the web component in a browser/bundler and the Node API in Node. You only pay for what you use.
+
+```
+npm install solid-web-components
+```
+
+Heavy environment-specific dependencies (`jsdom`, `@comunica/query-sparql`, `@inrupt/solid-client-authn-browser`, `@inrupt/solid-client-authn-node`, `openid-client`, `solid-ui`) are declared as optional peer dependencies — install only the ones you need.
+
+Curent components: 
+```
+  + = done but not documented
+  - = in progress
+  x = not applicable
+
+                 web  node 
+   sol-login      +    +    login to Solid
+   sol-form       +    -    create solid-ui forms
+   sol-solidos    +    x    display resources in SolidOS
+   sol-modal      +    x    GUI modal
+   sol-pod        +    ?    expandable pod folder/file tree
+   sol-pod-ops    +    ?    complete file & folder management
+   sol-wac        +    ?    manage .acl files
+   sol-live-edit  +    x    RDF & other editors with graphic display of graphs
+   sol-accordion  +    x    GUI accordion
+   sol-rolodex    +    ?    GUI rolodex
+```
+
+(c) 2023-2026, Jeff Zucker, may be freely distributed under an MIT or Apache license.

babel.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' }, modules: false }],
+  ],
+};

core/adopt.js

@@ -0,0 +1,71 @@
+/**
+ * Style helpers for Constructable Stylesheets + adoptedStyleSheets.
+ *
+ * `sheetFrom(css)` returns a `CSSStyleSheet` on evergreen browsers, or
+ * `null` when the constructor is unavailable (e.g. Jest/node env). Callers
+ * should keep the raw `CSS` string export alongside the sheet so they can
+ * fall back to a `<style>` tag when `sheet` is null.
+ *
+ * `adopt(root, { sheet, css, extra })` wires a shadow root (or document)
+ * with the baseline module sheet (+ any extras). If no sheet is available
+ * it appends `<style>${css}</style>` into the root instead.
+ */
+
+let _supports = null;
+function supports() {
+  if (_supports !== null) return _supports;
+  try {
+    const s = new CSSStyleSheet();
+    _supports = typeof s.replaceSync === 'function';
+  } catch {
+    _supports = false;
+  }
+  return _supports;
+}
+
+export function sheetFrom(css) {
+  if (!supports()) return null;
+  const s = new CSSStyleSheet();
+  s.replaceSync(css);
+  return s;
+}
+
+// Adopt a CSSStyleSheet into `root` (ShadowRoot or Document). When sheets
+// aren't supported, falls back to inserting a <style> with the given css.
+export function adopt(root, { sheet, css, extra = [] } = {}) {
+  const host = root.adoptedStyleSheets !== undefined ? root : null;
+  if (host && sheet) {
+    const sheets = [sheet];
+    const strings = [];
+    for (const e of extra) {
+      if (e instanceof CSSStyleSheet) sheets.push(e);
+      else if (typeof e === 'string') strings.push(e);
+    }
+    host.adoptedStyleSheets = [...host.adoptedStyleSheets, ...sheets];
+    for (const s of strings) appendStyle(root, s);
+    return;
+  }
+  // Fallback path: inline <style> for baseline + extras.
+  if (css) appendStyle(root, css);
+  for (const e of extra) {
+    if (typeof e === 'string') appendStyle(root, e);
+  }
+}
+
+function appendStyle(root, css) {
+  const el = document.createElement('style');
+  el.textContent = css;
+  root.appendChild(el);
+}
+
+// Ensure a named stylesheet exists in the given document/shadow-root head
+// exactly once. Useful for light-DOM components.
+export function ensureDocStyle(root, id, css) {
+  const target = root.nodeType === 11 ? root : (root.ownerDocument || document);
+  if (!target) return;
+  if (target.getElementById?.(id)) return;
+  const el = document.createElement('style');
+  el.id = id;
+  el.textContent = css;
+  (target.head || target).appendChild(el);
+}