tosijs-ui 1.15.4 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # Changelog
 
+## 1.16.0
+
+### `<tosi-md>` sanitizes by default (#179)
+
+**Breaking, as announced by 1.15.3's console warning.** A `<tosi-md>` with no `sanitize`
+attribute now strips executable content, where it used to render raw HTML from the markdown.
+Markdown from anyone other than you (issue bodies, comments, API data) could otherwise run
+script in your page: tosijs-virta's review read a login token out of `localStorage` that way.
+
+If your markdown deliberately embeds HTML that sanitizing removes (`script`, `style`, `iframe`,
+`form`, event-handler attributes, `javascript:` or `data:` links, and a few more), set
+`sanitize="off"` on that element, and only for markdown you control. Ordinary markdown, links
+and inputs render exactly as before; custom elements do not (see the next paragraph). Only the exact value `off`
+opts out; anything else, a typo included, sanitizes. The once-per-page warning is gone.
+
+**Custom elements are unwrapped when sanitizing** (their sanitized content is kept, the element
+is not): a component is code, and some render raw HTML or run code of their own, so untrusted
+markdown must not be able to instantiate them. The pre-release review showed a nested
+`<tosi-md sanitize="off">` escaping the sanitizer. Allow trusted display components by name
+with the new `allowed-elements` attribute (space- or comma-separated), e.g.
+`<tosi-md allowed-elements="tosi-icon tosi-tag">`, or the `allowedElements` property; changing it
+re-renders. `tosi-md`, `tosi-example` and `tosi-doc-system` are never allowed, because they render
+raw HTML or run code.
+
+### ESM doc sites no longer load their entry bundle twice (#191)
+
+A doc site built with `bundleEntry` loaded its entry as `hydrate.js?v=<hash>`, while its
+code-split chunks import the entry back as `../hydrate.js`. Those are different URLs, so the
+browser created **two module instances of the entry** on every page: everything in it ran twice,
+and a module that patches a prototype in a shared chunk threw on the second pass (Babylon's
+`Cannot redefine property: onBeforeViewRenderObservable`, which also broke its shaders). Reported
+with a clean before/after measurement by tosijs-3d-ensemble.
+
+The entry is now built as **`hydrate-<hash>.js`** and loaded with no query string, so the page
+and every chunk name one URL, and a rebuild still busts caches. **Rebuild your site to pick it
+up.** Anything that refers to `hydrate.js` by name must follow the rename: CSP or SRI entries,
+`<link rel="modulepreload">`, host cache rules, service workers, smoke checks.
+
+### Prettier never touches markdown, and `tosijs-format` (#187)
+
+Markdown is authored prose, and in this stack the product: all Prettier did to it was escape
+literal characters, pad tables and rewrite bullets and emphasis (`*n*` → `_n_`). tosijs-ui has
+ignored it since 1.14.0, but the rule never reached the other repos. **The fix belongs in your
+Prettier config**, where every entry point reads it (editors' format-on-save, lint-staged, a bare
+`prettier --write`):
+
+```json
+"overrides": [
+  { "files": ["*.md", "*.markdown", "*.mdx"], "options": { "requirePragma": true } }
+]
+```
+
+**New `tosijs-format` bin**, a convenience on top: `eslint --fix` (when the project has an
+`eslint.config.*`; its `ignores` decide the scope) then `prettier --write .`, excluding markdown on
+the command line too. `tosijs-format --check` checks instead and exits 1 on anything unformatted or
+any lint error, for CI. It uses your project's own Prettier and ESLint.
+
+tosijs-ui's own CI now lints through it, which found 32 unused `Component` / `WebComponent`
+imports left by this release's tosijs 1.10 migration (fixed before release; the migration had
+passed every lane because nothing ran ESLint).
+
+### `tosijs-release-notes --check` reads only the section being released
+
+It matched annotations against the whole CHANGELOG, so wording from OLDER releases could count a
+new bullet as written up: this release's #191 fix had no entry and the gate still said "all
+accounted for". It now reads only the section for the version being released and fails when that
+section is missing. **Heading formats it recognises:** `## 1.16.0`, `## v1.16.0`, and Keep a
+Changelog's `## [1.16.0]` / `## [v1.16.0]`, each with any suffix (a date, "(unreleased)"). The
+section lookup is exported as `changelogSection`. If your gate goes red after upgrading, check
+that the section heading names the exact version. When `package.json` still names the version that
+is already tagged, it now says so ("bump the version before running --check") instead of
+reporting every new bullet as unwritten.
+
+### tosijs 1.10: components are typed from their attributes
+
+**Breaking, type-level only: the tosijs peer floor is now `^1.10.3`.** 1.10.0 removed
+`Component`'s `[key: string]: any` index signature (tosijs#36), and 1.10.1 fixed the declaration
+emit (TS2742, tosijs#38) that had blocked this adoption since 2026-09-04. Every component declares its
+attributes with tosijs's `withAttributes()`, so a component instance is typed from its attribute
+values: `tosiRating().max` is a `number`, a misspelt property is a type error, and so is
+assigning the wrong type. On tosijs 1.9 TypeScript did not know `max` existed at all, because
+`Component` carried an any-index signature that tosijs 1.10 removed (tosijs#36). Nothing changes
+at runtime. Element-creator *arguments* are not typed by this. See
+[Migrating](/migrating/) for your own components.
+
+### The CDN bundle updates tosijs-schema and grows 2.8kB
+
+`dist/iife.js` (the single-`<script>` bundle) inlines tosijs-schema as the `<tosi-schema-form>`
+validator; it moves from 1.8.0 to 1.10.2. It also carries tosijs 1.10 and the CodeMirror updates:
+**+2.8kB gzip (+0.6%, 466,942 → 469,753 bytes)**. The ESM build is unaffected (tosijs-schema is an
+optional peer there). `NOTICE` now attributes tosijs-schema and tosijs-kilpi, both bundled.
+
+## 1.15.5
+
+### `<tosi-select>` options can have keyboard shortcuts (#188)
+
+`SelectOption` accepts `shortcut` (menu syntax, e.g. `'ctrl-1'`). It is shown in the popup, and
+picks the option from the keyboard even while the popup is closed. A pick by shortcut sets
+`value` and dispatches `change` exactly as a click does, so there is one code path. A disabled
+select ignores its shortcuts.
+
+### Removed `<tosi-menu>`s no longer fire their shortcuts
+
+`<tosi-menu>` added its document keydown listener with `capture: true` and removed it without,
+which in a real browser removes nothing. Every menu ever taken off the page kept its listener,
+and its keyboard shortcuts kept working. Only a real browser shows this (happy-dom removes the
+listener anyway), so it is covered by a Playwright test in all three engines.
+
+### `tosijs-ui/test-setup`: the happy-dom preload, published (#170)
+
+```toml
+[test]
+preload = ["tosijs-ui/test-setup"]
+```
+
+gives `bun test` a DOM that runs tosijs and tosijs-ui components. It needs `happy-dom` (an
+optional peer). Use it instead of copying a `test-setup.ts` from another repo; the copies had
+drifted three ways. It is also tosijs-ui's own preload, so every unit test here exercises it.
+
 ## 1.15.4
 
 ### `libraryBundle`: a library build Node can actually load (#169)

package/NOTICE

@@ -71,6 +71,34 @@ Feather. The full permission notice is reproduced in `src/icons.ts` and on
 the icons documentation page.
 --------------------------------------------------------------------------
 
+--------------------------------------------------------------------------
+tosijs-kilpi — https://www.npmjs.com/package/tosijs-kilpi
+Apache License 2.0. Bundled into `dist/iife.js` (the sanitizer behind
+<tosi-md>). Reproduced from the tosijs-kilpi package's own NOTICE:
+
+kilpi
+Copyright 2026 Tonio Loewald
+
+This product includes software developed as part of DOMPurify.
+
+  test/dompurify-fixtures.mjs is vendored verbatim from DOMPurify
+  (https://github.com/cure53/DOMPurify), test/fixtures/expect.mjs
+  Copyright (c) 2015 Mario Heiderich
+  Licensed under (MPL-2.0 OR Apache-2.0); used here under Apache-2.0.
+
+That file is DOMPurify's published XSS payload corpus, used as kilpi's
+verification gate. No DOMPurify source code is included or distributed in the
+published package — the corpus is a test fixture only, and is not part of the
+npm tarball.
+--------------------------------------------------------------------------
+
+--------------------------------------------------------------------------
+tosijs-schema — https://github.com/tonioloewald/tosijs-schema
+MIT. Bundled into `dist/iife.js`, which wires it in as the <tosi-schema-form>
+validator for CDN users. The ESM build does not bundle it (it is an optional
+peer there).
+--------------------------------------------------------------------------
+
 --------------------------------------------------------------------------
 CodeMirror — https://codemirror.net/
 Copyright (c) by Marijn Haverbeke and others. MIT.

package/bin/caddy-install.ts

@@ -121,9 +121,9 @@ set -a; . /etc/caddy/preview.env; set +a
 : "\${ACME_EMAIL:?set ACME_EMAIL in /etc/caddy/preview.env}"
 : "\${PREVIEW_DOMAIN:?set PREVIEW_DOMAIN in /etc/caddy/preview.env}"
 
-sed -e "s|__PREVIEW_TOKEN__|\$PREVIEW_TOKEN|g" \\
-    -e "s|{{ACME_EMAIL}}|\$ACME_EMAIL|g" \\
-    -e "s|{{PREVIEW_DOMAIN}}|\$PREVIEW_DOMAIN|g" \\
+sed -e "s|__PREVIEW_TOKEN__|$PREVIEW_TOKEN|g" \\
+    -e "s|{{ACME_EMAIL}}|$ACME_EMAIL|g" \\
+    -e "s|{{PREVIEW_DOMAIN}}|$PREVIEW_DOMAIN|g" \\
     /etc/caddy/Caddyfile.tpl > /etc/caddy/Caddyfile.new
 
 if grep -qE '\\{\\{|__PREVIEW_TOKEN__' /etc/caddy/Caddyfile.new; then
@@ -150,7 +150,7 @@ else
   echo "--- would change /etc/caddy/Caddyfile (token redacted) ---"
   if [ -f /etc/caddy/Caddyfile ]; then
     diff -u /etc/caddy/Caddyfile /etc/caddy/Caddyfile.new \\
-      | sed "s|\$PREVIEW_TOKEN|***REDACTED***|g" || true
+      | sed "s|$PREVIEW_TOKEN|***REDACTED***|g" || true
   else
     echo "(no existing /etc/caddy/Caddyfile — this would create it)"
   fi

package/bin/format.ts

@@ -0,0 +1,96 @@
+#!/usr/bin/env bun
+/*
+tosijs-format — the house format step, shipped as a command (#187).
+
+    tosijs-format           eslint --fix, then prettier --write (markdown excluded)
+    tosijs-format --check   eslint, then prettier --check (markdown excluded); exit 1 on any finding
+
+**Prettier never touches markdown** in this stack. The rule itself lives in the Prettier
+CONFIG, where every entry point reads it (editors, lint-staged, a bare `prettier --write`):
+
+    "overrides": [{ "files": ["*.md", "*.markdown", "*.mdx"], "options": { "requirePragma": true } }]
+
+This command is a convenience on top: the house sequence in one step, excluding markdown on the
+command line as well, so it holds even in a repo whose config hasn't got the override yet.
+(1.16.0 first shipped this believing a v2 config could not exclude markdown; the pre-release
+review showed `requirePragma` does, verified on 2.8.8 including editors' `--stdin-filepath`.)
+
+Why markdown is excluded: markdown here is the PRODUCT (docs, a book, llms.txt). With
+`proseWrap: preserve`, all Prettier did to it was escape literal characters, pad tables and
+rewrite bullets and emphasis in authored prose.
+
+ESLint runs only when the project has a flat config (`eslint.config.*`), over `.`, so the
+project's own `ignores` decide the scope. Both tools come from the PROJECT's node_modules: this
+is a formatting step, not a formatter, and the project pins the versions. Any step that fails
+fails the command.
+*/
+
+import { existsSync, readdirSync } from 'fs'
+import { join } from 'path'
+import { parseArgv } from './resolve-site-config.ts'
+
+const { has } = parseArgv(process.argv.slice(2), {
+  bin: 'tosijs-format',
+  summary: 'the house format step: eslint, then prettier (never markdown)',
+  flags: ['check'],
+  usage:
+    `  tosijs-format            eslint --fix ., then prettier --write . (markdown excluded)\n` +
+    `  tosijs-format --check    check only: exit 1 on anything unformatted or any lint error\n\n` +
+    `Uses the project's own prettier and eslint (node_modules/.bin). ESLint runs only when the\n` +
+    `project has an eslint.config.* file.`,
+})
+
+const check = has('check')
+const root = process.cwd()
+const bin = (name: string) => join(root, 'node_modules', '.bin', name)
+
+function run(argv: string[]): number {
+  const r = Bun.spawnSync(argv, {
+    cwd: root,
+    stdout: 'inherit',
+    stderr: 'inherit',
+  })
+  return r.exitCode ?? 1
+}
+
+if (!existsSync(bin('prettier'))) {
+  console.error(
+    '🛑 tosijs-format: prettier is not installed in this project (bun add -d prettier)'
+  )
+  process.exit(1)
+}
+
+let failed = false
+
+/*
+ESLint FIRST, then Prettier: `eslint --fix` rewrites code, and its output is not always what
+Prettier would write, so running it second left files that `--check` then flagged (seen on the
+first run of this command in tosijs-ui).
+*/
+const hasEslintConfig = readdirSync(root).some((f) =>
+  /^eslint\.config\.[cm]?[jt]s$/.test(f)
+)
+if (hasEslintConfig) {
+  if (!existsSync(bin('eslint'))) {
+    console.error(
+      '🛑 tosijs-format: eslint.config found but eslint is not installed (bun add -d eslint)'
+    )
+    failed = true
+  } else if (run([bin('eslint'), '.', ...(check ? [] : ['--fix'])]) !== 0) {
+    failed = true
+  }
+}
+
+// The exclusion is the point of this command: prettier never touches markdown.
+if (
+  run([
+    bin('prettier'),
+    check ? '--check' : '--write',
+    '.',
+    '!**/*.{md,markdown,mdx}',
+  ]) !== 0
+) {
+  failed = true
+}
+
+process.exit(failed ? 1 : 0)

package/bin/release-notes.ts

@@ -67,6 +67,8 @@ import {
   collect,
   renderSection,
   uncovered,
+  changelogSection,
+  alreadyTagged,
   classifyBump,
   bumpConcerns,
   unsupportedClaims,
@@ -102,9 +104,25 @@ const total = records.flatMap((r) => r.bullets)
 const publishable = total.filter((b) => b.tag !== 'note')
 
 if (has('check')) {
-  const changelog = await Bun.file('CHANGELOG.md')
+  const fullChangelog = await Bun.file('CHANGELOG.md')
     .text()
     .catch(() => '')
+  // Only the section being released counts: older prose must not cover a new bullet (B2).
+  const changelog = changelogSection(fullChangelog, version)
+  // An un-bumped version checks the section that was already RELEASED, and every new bullet
+  // then looks unwritten. Say that, instead of asking for prose that already exists.
+  if (alreadyTagged(since, version)) {
+    console.error(
+      `\n🛑 package.json is ${version}, which is already tagged ${since}. Bump the version ` +
+        `before running --check (or pass --version=X.Y.Z).`
+    )
+    process.exit(1)
+  }
+  if (!changelog && publishable.length) {
+    console.error(
+      `\n🛑 CHANGELOG.md has no \`## ${version}\` section to check against.`
+    )
+  }
   const missed = uncovered(records, changelog)
   const unsupported = unsupportedClaims(records)
   let bad = 0
@@ -114,7 +132,7 @@ if (has('check')) {
     console.error(
       `\n🛑 ${missed.length} annotation(s) since ${
         since || 'the start'
-      } are not mentioned in CHANGELOG.md:\n`
+      } are not mentioned in the \`## ${version}\` section of CHANGELOG.md:\n`
     )
     for (const b of missed)
       console.error(`   [${b.tag}] ${b.text}  (${b.sha.slice(0, 8)})`)
@@ -146,7 +164,9 @@ if (has('check')) {
 
   So this keys on the diff and the annotations rather than on what the release was called.
   */
-  const version = (await Bun.file('package.json').json()).version as string
+  // Named apart from the outer `version` (the --version flag): shadowing it put the CHANGELOG
+  // section lookup above in the temporal dead zone.
+  const pkgVersion = (await Bun.file('package.json').json()).version as string
   const changedPaths = since
     ? (await $`git diff --name-only ${since}...HEAD`.nothrow().quiet().text())
         .split('\n')
@@ -154,7 +174,7 @@ if (has('check')) {
     : []
   const concerns = since
     ? bumpConcerns({
-        bump: classifyBump(since, version),
+        bump: classifyBump(since, pkgVersion),
         bullets: total,
         changedPaths,
       })

package/dist/ab-test.d.ts

@@ -1,16 +1,16 @@
-import { Component } from 'tosijs';
-export declare class AbTest extends Component {
+declare const AbTest_base: import("tosijs").WithAttributes<{
+    condition: string;
+    not: boolean;
+}>;
+export declare class AbTest extends AbTest_base {
     static preferredTagName: string;
     static set conditions(context: {
         [key: string]: any;
     });
-    static initAttributes: {
-        condition: string;
-        not: boolean;
-    };
     static instances: Set<AbTest>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): void;
 }
 export declare const abTest: import("tosijs").ElementCreator<AbTest>;
+export {};

package/dist/ab-test.js

@@ -76,9 +76,12 @@ randomize()
 - `not` reverses the condition (so `<tosi-ab not condition="foo">` will be visible if `conditions.foo` is `false`)
 */
 /*{ "parent": "Helper Libraries" }*/
-import { Component } from 'tosijs';
+import { withAttributes } from 'tosijs';
 const abTestConditions = {};
-export class AbTest extends Component {
+export class AbTest extends withAttributes({
+    condition: '',
+    not: false,
+}) {
     static preferredTagName = 'tosi-ab';
     static set conditions(context) {
         Object.assign(abTestConditions, context);
@@ -86,10 +89,6 @@ export class AbTest extends Component {
             abTest.queueRender();
         }
     }
-    static initAttributes = {
-        condition: '',
-        not: false,
-    };
     static instances = new Set();
     connectedCallback() {
         super.connectedCallback();

package/dist/babylon-3d.d.ts

@@ -1,4 +1,4 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
+import { ElementCreator } from 'tosijs';
 type B3dCallback = ((element: B3d, BABYLON: any) => void) | ((element: B3d, BABYLON: any) => Promise<void>);
 interface B3dUIOptions {
     snippetId?: string;
@@ -7,6 +7,12 @@ interface B3dUIOptions {
     size?: number;
 }
 type MeshProcessCallback = (meshes: any[]) => void;
+declare const B3d_base: import("tosijs").WithAttributes<{
+    src: string;
+    clearColor: string;
+    fov: number;
+    heroLight: boolean;
+}>;
 /**
  * @deprecated Use [`tosijs-3d`](https://www.npmjs.com/package/tosijs-3d) instead.
  *
@@ -17,14 +23,8 @@ type MeshProcessCallback = (meshes: any[]) => void;
  *
  * Still exported and still works. It will be removed in a future major.
  */
-export declare class B3d extends WebComponent {
+export declare class B3d extends B3d_base {
     static preferredTagName: string;
-    static initAttributes: {
-        src: string;
-        clearColor: string;
-        fov: number;
-        heroLight: boolean;
-    };
     babylonReady: Promise<any>;
     BABYLON?: any;
     static shadowStyleSpec: {

package/dist/babylon-3d.js

@@ -221,7 +221,7 @@ be used to load `.glb` files. Setting `src` calls this for you on connect.
 `<tosi-3d>.loadUI(options: B3dUIOptions)` loads babylonjs guis, which you can create programmatically or using the [babylonjs gui tool](https://gui.babylonjs.com/).
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent, elements } from 'tosijs';
+import { elements, withAttributes } from 'tosijs';
 import { scriptTag } from './via-tag.js';
 import { icons, svg2DataUrl } from './icons.js';
 const noop = () => {
@@ -277,24 +277,23 @@ const warnDeprecated = () => {
  *
  * Still exported and still works. It will be removed in a future major.
  */
-export class B3d extends WebComponent {
+export class B3d extends withAttributes({
+    // `src` (a .glb URL) makes <tosi-3d> work like <img>: the scene loads on connect.
+    src: '',
+    // scene background: a css hex color, or `transparent` to composite the 3D
+    // over the page (e.g. themed narrative pages). Empty = Babylon default.
+    clearColor: '',
+    // field-of-view MULTIPLIER on the camera's natural lens. 1 = unchanged,
+    // <1 = longer lens / less perspective distortion, >1 = wider. Author-friendly:
+    // no need to know Babylon's default fov in radians.
+    fov: 1,
+    // add a directional key light (front-upper-left) for a product-photography
+    // look, on top of the soft hemispheric fill.
+    heroLight: false,
+}) {
     static preferredTagName = 'tosi-3d';
     // Declarative config so a scene can be assembled purely in HTML (no JS):
     //   <tosi-3d src="/model.glb" hero-light fov="0.5" clear-color="transparent">
-    static initAttributes = {
-        // `src` (a .glb URL) makes <tosi-3d> work like <img>: the scene loads on connect.
-        src: '',
-        // scene background: a css hex color, or `transparent` to composite the 3D
-        // over the page (e.g. themed narrative pages). Empty = Babylon default.
-        clearColor: '',
-        // field-of-view MULTIPLIER on the camera's natural lens. 1 = unchanged,
-        // <1 = longer lens / less perspective distortion, >1 = wider. Author-friendly:
-        // no need to know Babylon's default fov in radians.
-        fov: 1,
-        // add a directional key light (front-upper-left) for a product-photography
-        // look, on top of the soft hemispheric fill.
-        heroLight: false,
-    };
     babylonReady;
     BABYLON;
     static shadowStyleSpec = {

package/dist/bodymovin-player.d.ts

@@ -1,4 +1,4 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
+import { ElementCreator } from 'tosijs';
 export interface LottieConfig {
     container?: HTMLElement | ShadowRoot;
     renderer: 'svg' | 'canvas' | 'html';
@@ -8,12 +8,12 @@ export interface LottieConfig {
     path?: string;
     [key: string]: any;
 }
-export declare class BodymovinPlayer extends WebComponent {
+declare const BodymovinPlayer_base: import("tosijs").WithAttributes<{
+    src: string;
+    json: string;
+}>;
+export declare class BodymovinPlayer extends BodymovinPlayer_base {
     static preferredTagName: string;
-    static initAttributes: {
-        src: string;
-        json: string;
-    };
     content: null;
     config: LottieConfig;
     static bodymovinAvailable?: Promise<any>;
@@ -33,3 +33,4 @@ export declare class BodymovinPlayer extends WebComponent {
     render(): void;
 }
 export declare const bodymovinPlayer: ElementCreator<BodymovinPlayer>;
+export {};

package/dist/bodymovin-player.js

@@ -102,14 +102,13 @@ And of course just access the element's `animation` property to [use the bodymov
 Also see the [documentation for advanced interactions](https://lottiefiles.github.io/lottie-docs/advanced_interactions/)
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent } from 'tosijs';
+import { withAttributes } from 'tosijs';
 import { scriptTag } from './via-tag.js';
-export class BodymovinPlayer extends WebComponent {
+export class BodymovinPlayer extends withAttributes({
+    src: '',
+    json: '',
+}) {
     static preferredTagName = 'tosi-lottie';
-    static initAttributes = {
-        src: '',
-        json: '',
-    };
     content = null;
     config = {
         renderer: 'svg',

package/dist/carousel.d.ts

@@ -1,15 +1,15 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
-export declare class TosiCarousel extends WebComponent {
+import { ElementCreator } from 'tosijs';
+declare const TosiCarousel_base: import("tosijs").WithAttributes<{
+    dots: boolean;
+    arrows: boolean;
+    maxVisibleItems: number;
+    snapDuration: number;
+    snapDelay: number;
+    loop: boolean;
+    auto: number;
+}>;
+export declare class TosiCarousel extends TosiCarousel_base {
     static preferredTagName: string;
-    static initAttributes: {
-        dots: boolean;
-        arrows: boolean;
-        maxVisibleItems: number;
-        snapDuration: number;
-        snapDelay: number;
-        loop: boolean;
-        auto: number;
-    };
     private lastAutoAdvance;
     private interval?;
     private autoAdvance;
@@ -133,3 +133,4 @@ export declare const XinCarousel: typeof TosiCarousel;
 export declare const tosiCarousel: ElementCreator<TosiCarousel>;
 /** @deprecated Use tosiCarousel instead */
 export declare const xinCarousel: ElementCreator<TosiCarousel>;
+export {};

package/dist/carousel.js

@@ -56,20 +56,19 @@ This is a minimalist carousel component that supports the usual stuff.
 <tosi-css-var-editor element-selector="tosi-carousel"></tosi-css-var-editor>
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent, elements, vars, } from 'tosijs';
+import { elements, vars, withAttributes } from 'tosijs';
 import { icons } from './icons.js';
 const { button, slot, div } = elements;
-export class TosiCarousel extends WebComponent {
+export class TosiCarousel extends withAttributes({
+    dots: false,
+    arrows: false,
+    maxVisibleItems: 1,
+    snapDuration: 0.25,
+    snapDelay: 0.1,
+    loop: false,
+    auto: 0,
+}) {
     static preferredTagName = 'tosi-carousel';
-    static initAttributes = {
-        dots: false,
-        arrows: false,
-        maxVisibleItems: 1,
-        snapDuration: 0.25,
-        snapDelay: 0.1,
-        loop: false,
-        auto: 0,
-    };
     lastAutoAdvance = Date.now();
     interval;
     autoAdvance = () => {

package/dist/code-editor.d.ts

@@ -1,11 +1,15 @@
-import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
+import { ElementCreator, PartsMap } from 'tosijs';
 import type { CmHandle, TjsAutocompleteConfig } from './code-editor-cm.js';
 export type { TjsAutocompleteConfig } from './code-editor-cm.js';
 interface CodeEditorParts extends PartsMap {
     host: HTMLDivElement;
     diffHost: HTMLDivElement;
 }
-export declare class CodeEditor extends WebComponent<CodeEditorParts> {
+declare const CodeEditor_base: import("tosijs").WithAttributes<{
+    mode: string;
+    disabled: boolean;
+}>;
+export declare class CodeEditor extends CodeEditor_base<CodeEditorParts> {
     static preferredTagName: string;
     private source;
     private _handle;
@@ -34,10 +38,6 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     diffOriginalLabel: string;
     diffModifiedLabel: string;
     showDiff(on: boolean): void;
-    static initAttributes: {
-        mode: string;
-        disabled: boolean;
-    };
     role: string;
     /**
      * The underlying CodeMirror `EditorView` (undefined until loaded).

package/dist/code-editor.js

@@ -113,7 +113,7 @@ view. The language, lint and search packages are internal composition details; a
 one exposed.
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent, elements, varDefault, } from 'tosijs';
+import { elements, varDefault, withAttributes, } from 'tosijs';
 import { tosiDiff } from './diff.js';
 const { div } = elements;
 // Warn once per removed member, not once per access — a live-example page holds
@@ -128,7 +128,10 @@ const warnRemoved = (member, advice) => {
 // One warning per page, not per element — see the `editor` getter.
 let warnedEditor = false;
 let warnedTjs = false;
-export class CodeEditor extends WebComponent {
+export class CodeEditor extends withAttributes({
+    mode: 'javascript',
+    disabled: false,
+}) {
     static preferredTagName = 'tosi-code';
     source = '';
     _handle;
@@ -253,10 +256,6 @@ export class CodeEditor extends WebComponent {
         }
         diffHost.hidden = !on;
     }
-    static initAttributes = {
-        mode: 'javascript',
-        disabled: false,
-    };
     role = 'code editor';
     /**
      * The underlying CodeMirror `EditorView` (undefined until loaded).