diff --git a/demos/iconset/package.json b/demos/iconset/package.json
index e1183da82..988bf4def 100644
--- a/demos/iconset/package.json
+++ b/demos/iconset/package.json
@@ -31,23 +31,23 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "postcss": "^8.5.8",
+ "postcss": "^8.5.9",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/jsx/package.json b/demos/jsx/package.json
index d7e0e0e92..50ca78035 100644
--- a/demos/jsx/package.json
+++ b/demos/jsx/package.json
@@ -31,23 +31,23 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "postcss": "^8.5.8",
+ "postcss": "^8.5.9",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/leaflet-map/package.json b/demos/leaflet-map/package.json
index b27d942ee..d47d8c00f 100644
--- a/demos/leaflet-map/package.json
+++ b/demos/leaflet-map/package.json
@@ -32,22 +32,22 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/core": "workspace:^",
diff --git a/demos/lottie/package.json b/demos/lottie/package.json
index 50e224d04..49201d63c 100644
--- a/demos/lottie/package.json
+++ b/demos/lottie/package.json
@@ -30,23 +30,23 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "postcss": "^8.5.8",
+ "postcss": "^8.5.9",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/core": "workspace:^",
diff --git a/demos/luxon/package.json b/demos/luxon/package.json
index 5e8344538..3abc7fce9 100644
--- a/demos/luxon/package.json
+++ b/demos/luxon/package.json
@@ -33,22 +33,22 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/moment/package.json b/demos/moment/package.json
index aaf4bf4cc..f70db4876 100644
--- a/demos/moment/package.json
+++ b/demos/moment/package.json
@@ -33,22 +33,22 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/core": "workspace:^",
diff --git a/demos/monaco-editor/package.json b/demos/monaco-editor/package.json
index 36b314d59..134739bc0 100644
--- a/demos/monaco-editor/package.json
+++ b/demos/monaco-editor/package.json
@@ -32,17 +32,17 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/core": "workspace:^",
diff --git a/demos/monaco-editor/src/index.html b/demos/monaco-editor/src/index.html
index 32c335f8c..75cd8a935 100644
--- a/demos/monaco-editor/src/index.html
+++ b/demos/monaco-editor/src/index.html
@@ -2,7 +2,7 @@
diff --git a/demos/podcast-fixed-player/package.json b/demos/podcast-fixed-player/package.json
index ee7655ba9..e2eb8f79f 100644
--- a/demos/podcast-fixed-player/package.json
+++ b/demos/podcast-fixed-player/package.json
@@ -30,23 +30,23 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "postcss": "^8.5.8",
+ "postcss": "^8.5.9",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/podcast/package.json b/demos/podcast/package.json
index 68d1a53df..e4691b86e 100644
--- a/demos/podcast/package.json
+++ b/demos/podcast/package.json
@@ -30,23 +30,23 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "postcss": "^8.5.8",
+ "postcss": "^8.5.9",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/router-slide-transition/package.json b/demos/router-slide-transition/package.json
index 00e0f7c3f..08622c81c 100644
--- a/demos/router-slide-transition/package.json
+++ b/demos/router-slide-transition/package.json
@@ -34,19 +34,19 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/core": "workspace:^",
diff --git a/demos/router-view/package.json b/demos/router-view/package.json
index 9bd14e636..811df567e 100644
--- a/demos/router-view/package.json
+++ b/demos/router-view/package.json
@@ -32,22 +32,22 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/rv-video/package.json b/demos/rv-video/package.json
index aa490ab08..9a350f500 100644
--- a/demos/rv-video/package.json
+++ b/demos/rv-video/package.json
@@ -32,22 +32,22 @@
"@ribajs/types": "workspace:^",
"@ribajs/vite-config": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"postcss-modules": "^6.0.1",
- "postcss-preset-env": "^11.2.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "postcss-preset-env": "^11.2.1",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"serve": "^14.2.6",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
},
"dependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/demos/tw-accordion/package.json b/demos/tw-accordion/package.json
new file mode 100644
index 000000000..b696a19d8
--- /dev/null
+++ b/demos/tw-accordion/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-accordion",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-accordion/src/css/main.css b/demos/tw-accordion/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-accordion/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-accordion/src/index.html b/demos/tw-accordion/src/index.html
new file mode 100644
index 000000000..9388f8261
--- /dev/null
+++ b/demos/tw-accordion/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Accordion Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-accordion/src/ts/accordion.module.ts b/demos/tw-accordion/src/ts/accordion.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-accordion/src/ts/accordion.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.html b/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.html
new file mode 100644
index 000000000..8f04898b3
--- /dev/null
+++ b/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.html
@@ -0,0 +1,60 @@
+
TW Accordion & Collapse Demo
+
+
+
+ Accordion
+ An accordion with three items. Only one item can be open at a time.
+
+
+ Riba.js is a TypeScript declarative data-binding and Web Components framework. It evolved from Rivets.js and tinybind, offering a modern approach to building reactive user interfaces with custom elements and template binding.
+
+
+ Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. Instead of pre-designed components, it gives you building blocks to create any design directly in your markup.
+
+
+ The @ribajs/tw module brings Tailwind-styled UI components into the Riba.js ecosystem. It provides ready-to-use Web Components like accordions, dropdowns, forms, and more — all styled with Tailwind CSS utility classes and powered by Riba.js data binding.
+
+
+
+
+
+
+ Accordion (Multiple Open)
+ An accordion that allows multiple items to be open simultaneously.
+
+
+ This section is open by default. You can open other sections without closing this one.
+
+
+ Open this alongside the first section to see multiple panels expanded at once.
+
+
+ All three sections can be open at the same time when show-only-one is set to false.
+
+
+
+
+
+
+ Standalone Collapse
+ A standalone collapsible section, independent of any accordion group.
+
+
+
+
+
+
+ Collapse with Rich Content
+ A collapse component can contain any HTML content.
+
+
+ Smooth animated transitions
+ Keyboard accessible
+ ARIA attributes for screen readers
+ Works standalone or inside an accordion
+ Customizable via Tailwind classes
+
+
+
diff --git a/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.ts b/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.ts
new file mode 100644
index 000000000..f3916b342
--- /dev/null
+++ b/demos/tw-accordion/src/ts/components/demo-accordion/demo-accordion.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoAccordionComponent extends Component {
+ public static tagName = "demo-accordion";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoAccordionComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-accordion.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-accordion/src/ts/components/index.ts b/demos/tw-accordion/src/ts/components/index.ts
new file mode 100644
index 000000000..86df93226
--- /dev/null
+++ b/demos/tw-accordion/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoAccordionComponent } from "./demo-accordion/demo-accordion.component.js";
diff --git a/demos/tw-accordion/src/ts/main.ts b/demos/tw-accordion/src/ts/main.ts
new file mode 100644
index 000000000..a953941c5
--- /dev/null
+++ b/demos/tw-accordion/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./accordion.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-accordion/tsconfig.json b/demos/tw-accordion/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-accordion/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-accordion/vite.config.js b/demos/tw-accordion/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-accordion/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-basics/package.json b/demos/tw-basics/package.json
new file mode 100644
index 000000000..dd5c01975
--- /dev/null
+++ b/demos/tw-basics/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-basics",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-basics/src/css/main.css b/demos/tw-basics/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-basics/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-basics/src/index.html b/demos/tw-basics/src/index.html
new file mode 100644
index 000000000..d57d5ca64
--- /dev/null
+++ b/demos/tw-basics/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
Tailwind Basics Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-basics/src/ts/basics.module.ts b/demos/tw-basics/src/ts/basics.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-basics/src/ts/basics.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.html b/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.html
new file mode 100644
index 000000000..4fc26b545
--- /dev/null
+++ b/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.html
@@ -0,0 +1,328 @@
+
Tailwind Basics Demo
+
+
+
+
+
+
+ Badges
+
+ Default
+ Info
+ Success
+ Warning
+ Error
+
+ Outline Badges
+
+ Default
+ Info
+ Success
+ Warning
+ Error
+
+ Badge Sizes
+
+ Small
+ Medium
+ Large
+
+
+
+
+
+ Avatars
+ Sizes
+
+
+ With Status
+
+
+ With Image
+
+
+
+
+
+
+ Cards
+
+
+ This is a basic card with an image and some body text content.
+
+
+ A compact card without an image. Useful for dense layouts.
+
+
+ Cards can contain any content, including other components.
+
+
+
+
+
+ Keyboard Keys
+
+
+ Press Ctrl + C to copy.
+
+
+ Press Ctrl + Shift + I to open DevTools.
+
+
+ Press Enter to submit the form.
+
+
+
+
+
+ Skeleton Loading
+
+
+
Text Lines
+
+
+
Circle
+
+
+
Rectangle
+
+
+
Card Skeleton
+
+
+
+
+ Progress Bars
+
+
+
+
+
+
Sizes
+
+
+
+
+
+
+
+
+ Rating
+
+
+
Interactive (click to rate)
+
+
+
+
Read-only (4.5 out of 5)
+
+
+
+
+
Extra large rating (out of 10)
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
Default separator
+
+
+
+
+
Custom separator
+
+
+
+
+
+
+
+ Animated Buttons
+ Click a button to see the animation.
+
+
+
+ Pulse on Click
+
+
+
+
+ Bounce on Click
+
+
+
+
+ Spin on Click
+
+
+
+
+
+
+
+ Tooltips
+
+
+ Top
+
+
+ Bottom
+
+
+ Left
+
+
+ Right
+
+
+
+
+
+
+ Swap Animations
+ Click to toggle between two states with different animations.
+
+
+
+
+
+ Pagination
+
+
+
10 pages, max 5 visible
+
+
+
+
20 pages, starting on page 8
+
+
+
+
+
+
+ Color Picker
+
+
+
+
+
+
+ Collapse
+ Standalone collapsible sections (independent from Accordion).
+
+
+
+ Click to expand details
+
+
+ This content is collapsible. It can contain any HTML including other components, images, or forms.
+
+
+
+
+ Another collapsible section
+
+
+ Each collapse section operates independently. Opening one does not close the others (unlike an accordion).
+
+
+
diff --git a/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.ts b/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.ts
new file mode 100644
index 000000000..d7d4f0eed
--- /dev/null
+++ b/demos/tw-basics/src/ts/components/demo-basics/demo-basics.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoBasicsComponent extends Component {
+ public static tagName = "demo-basics";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoBasicsComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-basics.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-basics/src/ts/components/index.ts b/demos/tw-basics/src/ts/components/index.ts
new file mode 100644
index 000000000..12d9b2cef
--- /dev/null
+++ b/demos/tw-basics/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoBasicsComponent } from "./demo-basics/demo-basics.component.js";
diff --git a/demos/tw-basics/src/ts/main.ts b/demos/tw-basics/src/ts/main.ts
new file mode 100644
index 000000000..30eb87dc3
--- /dev/null
+++ b/demos/tw-basics/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./basics.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-basics/tsconfig.json b/demos/tw-basics/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-basics/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-basics/vite.config.js b/demos/tw-basics/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-basics/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-dropdown/package.json b/demos/tw-dropdown/package.json
new file mode 100644
index 000000000..97e2a2c2b
--- /dev/null
+++ b/demos/tw-dropdown/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-dropdown",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-dropdown/src/css/main.css b/demos/tw-dropdown/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-dropdown/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-dropdown/src/index.html b/demos/tw-dropdown/src/index.html
new file mode 100644
index 000000000..8eb5d45e1
--- /dev/null
+++ b/demos/tw-dropdown/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Dropdown Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.html b/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.html
new file mode 100644
index 000000000..e3fc2b5b7
--- /dev/null
+++ b/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.html
@@ -0,0 +1,201 @@
+
TW Dropdown & Navbar Demo
+
+
+
+ Navbar
+ A responsive navbar with collapsible mobile menu.
+
+
+
+
+
+
+
+
+
+
+ Basic Dropdown
+ A simple dropdown menu with default bottom-start placement.
+
+
+ Options
+
+
+
+
+
+
+
+
+
+ Dropdown Placements
+ Dropdowns can be positioned in different directions using the placement attribute.
+
+
+
+ Bottom Start
+
+
+
+
+
+
+ Bottom End
+
+
+
+
+
+
+ Top Start
+
+
+
+
+
+
+ Right Start
+
+
+
+
+
+
+
+ Dropdown with Keyboard Navigation
+ This dropdown supports keyboard navigation. Click the button then use Arrow Down / Arrow Up to navigate, Enter to select, and Escape to close.
+
+
+ Account Menu
+
+
+
+
+
+
+
+
+
+ Styled Dropdown with Icons
+ A dropdown with icon-decorated menu items.
+
+
+ Actions
+
+
+
+
+
+
diff --git a/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.ts b/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.ts
new file mode 100644
index 000000000..1318618c9
--- /dev/null
+++ b/demos/tw-dropdown/src/ts/components/demo-dropdown/demo-dropdown.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoDropdownComponent extends Component {
+ public static tagName = "demo-dropdown";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoDropdownComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-dropdown.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-dropdown/src/ts/components/index.ts b/demos/tw-dropdown/src/ts/components/index.ts
new file mode 100644
index 000000000..d1606563a
--- /dev/null
+++ b/demos/tw-dropdown/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoDropdownComponent } from "./demo-dropdown/demo-dropdown.component.js";
diff --git a/demos/tw-dropdown/src/ts/dropdown.module.ts b/demos/tw-dropdown/src/ts/dropdown.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-dropdown/src/ts/dropdown.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-dropdown/src/ts/main.ts b/demos/tw-dropdown/src/ts/main.ts
new file mode 100644
index 000000000..ac2ba9b00
--- /dev/null
+++ b/demos/tw-dropdown/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./dropdown.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-dropdown/tsconfig.json b/demos/tw-dropdown/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-dropdown/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-dropdown/vite.config.js b/demos/tw-dropdown/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-dropdown/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-form/package.json b/demos/tw-form/package.json
new file mode 100644
index 000000000..5e83beb39
--- /dev/null
+++ b/demos/tw-form/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-form",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-form/src/css/main.css b/demos/tw-form/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-form/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-form/src/index.html b/demos/tw-form/src/index.html
new file mode 100644
index 000000000..3fb1747af
--- /dev/null
+++ b/demos/tw-form/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Form Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-form/src/ts/components/demo-form/demo-form.component.html b/demos/tw-form/src/ts/components/demo-form/demo-form.component.html
new file mode 100644
index 000000000..b8716f0a9
--- /dev/null
+++ b/demos/tw-form/src/ts/components/demo-form/demo-form.component.html
@@ -0,0 +1,349 @@
+
TW Form Demo
+
+
+
+ Registration Form
+ A form with various input types and HTML5 validation. Fields marked with * are required.
+
+
+
+
+
+ Contact Form
+ A simpler contact form demonstrating required fields and email validation.
+
+
+
+
+
+ Validation States
+ Examples of form fields showing different validation requirements. Try submitting the form to see validation in action.
+
+
diff --git a/demos/tw-form/src/ts/components/demo-form/demo-form.component.ts b/demos/tw-form/src/ts/components/demo-form/demo-form.component.ts
new file mode 100644
index 000000000..a34b0568a
--- /dev/null
+++ b/demos/tw-form/src/ts/components/demo-form/demo-form.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoFormComponent extends Component {
+ public static tagName = "demo-form";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoFormComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-form.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-form/src/ts/components/index.ts b/demos/tw-form/src/ts/components/index.ts
new file mode 100644
index 000000000..10f448d21
--- /dev/null
+++ b/demos/tw-form/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoFormComponent } from "./demo-form/demo-form.component.js";
diff --git a/demos/tw-form/src/ts/form.module.ts b/demos/tw-form/src/ts/form.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-form/src/ts/form.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-form/src/ts/main.ts b/demos/tw-form/src/ts/main.ts
new file mode 100644
index 000000000..871124d6f
--- /dev/null
+++ b/demos/tw-form/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./form.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-form/tsconfig.json b/demos/tw-form/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-form/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-form/vite.config.js b/demos/tw-form/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-form/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-interactive/package.json b/demos/tw-interactive/package.json
new file mode 100644
index 000000000..f43eca7d7
--- /dev/null
+++ b/demos/tw-interactive/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-interactive",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "Interactive components demo for @ribajs/tw",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-interactive/src/css/main.css b/demos/tw-interactive/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-interactive/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-interactive/src/index.html b/demos/tw-interactive/src/index.html
new file mode 100644
index 000000000..6cafe6f96
--- /dev/null
+++ b/demos/tw-interactive/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
Tailwind Interactive Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.html b/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.html
new file mode 100644
index 000000000..92c562073
--- /dev/null
+++ b/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.html
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+ Tailwind Interactive Demo
+
+
+
+ Tagged Image
+
+ Click on the numbered pins to reveal details about different areas of the image.
+
+
+
+ A historic clock tower rising above the surrounding buildings, dating back to the 19th century.
+ The bustling main street with shops, cafes, and pedestrians. A hub of daily activity.
+ Golden hour lighting creating a warm atmospheric glow across the cityscape.
+ Local vendors selling fresh produce, flowers, and artisanal goods every weekend.
+
+
+
+
+
+
+ Share Button
+
+ Uses the native Web Share API on supported devices, with a dropdown fallback for desktop browsers.
+ Try clicking the button to see available sharing options.
+
+
+
+
Share this page
+
Spread the word about Riba.js and help other developers discover it.
+
+
+
+
+
+
+ Content Slider
+
+ A multi-column content slider with drag support and navigation controls. Drag to scroll or use the arrow buttons.
+
+
+
+
+
+
+
+
+ Collapse / FAQ
+
+ Standalone collapsible sections. Each operates independently unlike an accordion.
+
+
+
+
+ What is Riba.js?
+
+
+ Riba.js is a TypeScript declarative data-binding and Web Components framework. It evolved from Rivets.js and tinybind into a modern, ESM-only library with full TypeScript support.
+
+
+
+
+ How does data binding work?
+
+
+ Riba uses rv-* attributes on HTML elements to bind data from your model to the DOM. The Observer pattern with Object.defineProperty ensures changes propagate automatically in both directions.
+
+
+
+
+ Can I use it with Tailwind CSS?
+
+
+ Absolutely! The @ribajs/tw package provides a complete set of Tailwind-styled components including alerts, cards, tabs, sidebars, slideshows, and many more.
+
+
+
+
+
+
+ Usage Example
+
+ Getting started with Riba.js is straightforward. Install the core package and any modules you need,
+ then bind your model to the DOM.
+
+ import { Riba, coreModule } from "@ribajs/core";
+import { twModule } from "@ribajs/tw";
+
+const riba = new Riba();
+riba.module.register(coreModule.init());
+riba.module.register(twModule.init());
+riba.bind(document.body, { greeting: "Hello!" });
+
+
diff --git a/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.ts b/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.ts
new file mode 100644
index 000000000..0493b8311
--- /dev/null
+++ b/demos/tw-interactive/src/ts/components/demo-interactive/demo-interactive.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoInteractiveComponent extends Component {
+ public static tagName = "demo-interactive";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoInteractiveComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-interactive.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-interactive/src/ts/components/index.ts b/demos/tw-interactive/src/ts/components/index.ts
new file mode 100644
index 000000000..b98ff0c6c
--- /dev/null
+++ b/demos/tw-interactive/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoInteractiveComponent } from "./demo-interactive/demo-interactive.component.js";
diff --git a/demos/tw-interactive/src/ts/interactive.module.ts b/demos/tw-interactive/src/ts/interactive.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-interactive/src/ts/interactive.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-interactive/src/ts/main.ts b/demos/tw-interactive/src/ts/main.ts
new file mode 100644
index 000000000..f3ba299fe
--- /dev/null
+++ b/demos/tw-interactive/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./interactive.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-interactive/tsconfig.json b/demos/tw-interactive/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-interactive/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-interactive/vite.config.js b/demos/tw-interactive/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-interactive/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-notifications/package.json b/demos/tw-notifications/package.json
new file mode 100644
index 000000000..4f9d91901
--- /dev/null
+++ b/demos/tw-notifications/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@ribajs/demo-tw-notifications",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/events": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-notifications/src/css/main.css b/demos/tw-notifications/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-notifications/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-notifications/src/index.html b/demos/tw-notifications/src/index.html
new file mode 100644
index 000000000..b46bc84e4
--- /dev/null
+++ b/demos/tw-notifications/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Notifications Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.html b/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.html
new file mode 100644
index 000000000..1c6175bc4
--- /dev/null
+++ b/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.html
@@ -0,0 +1,66 @@
+
TW Notifications Demo
+
+
+
+
+
+
+ Toast Notifications
+
+ Click the buttons below to trigger toast notifications. They appear in the bottom-right corner and auto-dismiss after a timeout.
+
+
+
+ Show Info Toast
+
+
+ Show Success Toast
+
+
+ Show Warning Toast
+
+
+ Show Error Toast (no auto-dismiss)
+
+
+
+
+
+
+ Modal Notification
+
+ Click the button below to open a modal dialog notification.
+
+
+ Show Modal
+
+
+
+
+
+ Inline Alerts
+
+ Static alert components embedded directly in the page.
+
+
+
+
diff --git a/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.ts b/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.ts
new file mode 100644
index 000000000..8221482ff
--- /dev/null
+++ b/demos/tw-notifications/src/ts/components/demo-notifications/demo-notifications.component.ts
@@ -0,0 +1,95 @@
+import { Component } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoNotificationsComponent extends Component {
+ public static tagName = "demo-notifications";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ protected toastChannel = new EventDispatcher("toast");
+
+ public scope = {
+ showInfoToast: this.showInfoToast.bind(this),
+ showSuccessToast: this.showSuccessToast.bind(this),
+ showWarningToast: this.showWarningToast.bind(this),
+ showErrorToast: this.showErrorToast.bind(this),
+ showModal: this.showModal.bind(this),
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoNotificationsComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ public showInfoToast() {
+ this.toastChannel.trigger("show-notification", {
+ kind: "toast",
+ type: "info",
+ title: "Info",
+ message: "This is an informational toast notification.",
+ timeout: 5000,
+ });
+ }
+
+ public showSuccessToast() {
+ this.toastChannel.trigger("show-notification", {
+ kind: "toast",
+ type: "success",
+ title: "Success",
+ message: "The operation completed successfully!",
+ timeout: 5000,
+ });
+ }
+
+ public showWarningToast() {
+ this.toastChannel.trigger("show-notification", {
+ kind: "toast",
+ type: "warning",
+ title: "Warning",
+ message: "Please review your input before proceeding.",
+ timeout: 7000,
+ });
+ }
+
+ public showErrorToast() {
+ this.toastChannel.trigger("show-notification", {
+ kind: "toast",
+ type: "error",
+ title: "Error",
+ message: "Something went wrong. Please try again later.",
+ timeout: 0,
+ });
+ }
+
+ public showModal() {
+ this.toastChannel.trigger("show-notification", {
+ kind: "modal",
+ title: "Confirm Action",
+ message:
+ "Are you sure you want to proceed? This action cannot be undone.",
+ closable: true,
+ });
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-notifications.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-notifications/src/ts/components/index.ts b/demos/tw-notifications/src/ts/components/index.ts
new file mode 100644
index 000000000..2a85c0268
--- /dev/null
+++ b/demos/tw-notifications/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoNotificationsComponent } from "./demo-notifications/demo-notifications.component.js";
diff --git a/demos/tw-notifications/src/ts/main.ts b/demos/tw-notifications/src/ts/main.ts
new file mode 100644
index 000000000..40f30594b
--- /dev/null
+++ b/demos/tw-notifications/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./notifications.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-notifications/src/ts/notifications.module.ts b/demos/tw-notifications/src/ts/notifications.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-notifications/src/ts/notifications.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-notifications/tsconfig.json b/demos/tw-notifications/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-notifications/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-notifications/vite.config.js b/demos/tw-notifications/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-notifications/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-sidebar/package.json b/demos/tw-sidebar/package.json
new file mode 100644
index 000000000..f86d13768
--- /dev/null
+++ b/demos/tw-sidebar/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-sidebar",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-sidebar/src/css/main.css b/demos/tw-sidebar/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-sidebar/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-sidebar/src/index.html b/demos/tw-sidebar/src/index.html
new file mode 100644
index 000000000..a742c9c84
--- /dev/null
+++ b/demos/tw-sidebar/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
TW Sidebar Demo
+
+
+
+
+
+
+
diff --git a/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.html b/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.html
new file mode 100644
index 000000000..0608b6219
--- /dev/null
+++ b/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.html
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
TW Sidebar Demo
+
+
+
+ Overlap Mode
+
+ The sidebar floats over the content with a dark backdrop. Click the backdrop or the close button to dismiss.
+
+
+
+
+
+
+ Left Overlay
+
+
+
+
+
+ Right Overlay
+
+
+
+
+
+
+
+
+ Side Mode
+
+ The sidebar pushes the main content aside. No backdrop is shown and the content reflows.
+
+
+
+
+
+
+ Toggle Side Mode
+
+
+
+
+
+
+ Main Content
+
+
+ Welcome to the dashboard. Use the sidebar to navigate between different sections.
+
+
+ View and manage your active projects. Click on a project to see its details in the right sidebar.
+
+
+ Track your performance metrics. Open the details panel for more information.
+
+
+
+
diff --git a/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.ts b/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.ts
new file mode 100644
index 000000000..eef051808
--- /dev/null
+++ b/demos/tw-sidebar/src/ts/components/demo-sidebar/demo-sidebar.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoSidebarComponent extends Component {
+ public static tagName = "demo-sidebar";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoSidebarComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-sidebar.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-sidebar/src/ts/components/index.ts b/demos/tw-sidebar/src/ts/components/index.ts
new file mode 100644
index 000000000..93d1d080a
--- /dev/null
+++ b/demos/tw-sidebar/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoSidebarComponent } from "./demo-sidebar/demo-sidebar.component.js";
diff --git a/demos/tw-sidebar/src/ts/main.ts b/demos/tw-sidebar/src/ts/main.ts
new file mode 100644
index 000000000..4002dd9f0
--- /dev/null
+++ b/demos/tw-sidebar/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./sidebar.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-sidebar/src/ts/sidebar.module.ts b/demos/tw-sidebar/src/ts/sidebar.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-sidebar/src/ts/sidebar.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-sidebar/tsconfig.json b/demos/tw-sidebar/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-sidebar/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-sidebar/vite.config.js b/demos/tw-sidebar/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-sidebar/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-slideshow/package.json b/demos/tw-slideshow/package.json
new file mode 100644
index 000000000..e9d54a130
--- /dev/null
+++ b/demos/tw-slideshow/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "@ribajs/demo-tw-slideshow",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "main": "./src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "start": "vite",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "tailwindcss": "^4.2.2"
+ },
+ "devDependencies": {
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ }
+}
diff --git a/demos/tw-slideshow/src/css/main.css b/demos/tw-slideshow/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-slideshow/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-slideshow/src/index.html b/demos/tw-slideshow/src/index.html
new file mode 100644
index 000000000..4833e2a1a
--- /dev/null
+++ b/demos/tw-slideshow/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
Tailwind Slideshow Demo
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.html b/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.html
new file mode 100644
index 000000000..f1a8c65fd
--- /dev/null
+++ b/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.html
@@ -0,0 +1,116 @@
+
+
Tailwind Slideshow Demo
+
+
+
+ Basic Slideshow
+ A slideshow with 4 images, prev/next controls, indicator dots, and desktop drag-scroll enabled.
+
+
+
+
+
+
+
+ Carousel with Autoplay
+ A multi-column carousel that auto-advances every 3 seconds.
+
+
+
+
+
+
+
+ Slideshow with Video Slide
+ A slideshow containing a video that auto-plays when its slide is active.
+
+
+
+
+
+
+
+ Content Slider
+ A multi-column slider for cards or content blocks. Supports drag-scroll and keyboard navigation.
+
+
+
+
+
diff --git a/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.ts b/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.ts
new file mode 100644
index 000000000..cebe47279
--- /dev/null
+++ b/demos/tw-slideshow/src/ts/components/demo-slideshow/demo-slideshow.component.ts
@@ -0,0 +1,37 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoSlideshowComponent extends Component {
+ public static tagName = "rv-demo-slideshow";
+
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(DemoSlideshowComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-slideshow.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-slideshow/src/ts/components/index.ts b/demos/tw-slideshow/src/ts/components/index.ts
new file mode 100644
index 000000000..1c333530a
--- /dev/null
+++ b/demos/tw-slideshow/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoSlideshowComponent } from "./demo-slideshow/demo-slideshow.component.js";
diff --git a/demos/tw-slideshow/src/ts/main.ts b/demos/tw-slideshow/src/ts/main.ts
new file mode 100644
index 000000000..cba784a97
--- /dev/null
+++ b/demos/tw-slideshow/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { SlideshowDemoModule } from "./slideshow.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(SlideshowDemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-slideshow/src/ts/slideshow.module.ts b/demos/tw-slideshow/src/ts/slideshow.module.ts
new file mode 100644
index 000000000..08aec5d2d
--- /dev/null
+++ b/demos/tw-slideshow/src/ts/slideshow.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const SlideshowDemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-slideshow/tsconfig.json b/demos/tw-slideshow/tsconfig.json
new file mode 100644
index 000000000..7e47a757d
--- /dev/null
+++ b/demos/tw-slideshow/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src"
+ },
+ "exclude": ["node_modules", "dist/**/*.d.ts"]
+}
diff --git a/demos/tw-slideshow/vite.config.js b/demos/tw-slideshow/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-slideshow/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-tabs/package.json b/demos/tw-tabs/package.json
new file mode 100644
index 000000000..9107f4fc0
--- /dev/null
+++ b/demos/tw-tabs/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@ribajs/demo-tw-tabs",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-tabs/src/css/main.css b/demos/tw-tabs/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-tabs/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-tabs/src/index.html b/demos/tw-tabs/src/index.html
new file mode 100644
index 000000000..1ef6466d4
--- /dev/null
+++ b/demos/tw-tabs/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Tabs Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.html b/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.html
new file mode 100644
index 000000000..41ba30ab7
--- /dev/null
+++ b/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.html
@@ -0,0 +1,109 @@
+
TW Tabs + Steps Demo
+
+
+
+ Tabs
+
+ Click on the tab headers to switch between content panels. Tabs are defined using <template> children.
+
+
+
+
+
Overview
+
+ Riba.js is a TypeScript declarative data-binding and Web Components framework.
+ It evolved from Rivets.js and tinybind into a modern, ESM-only library.
+
+
+ Declarative data binding with rv-* attributes
+ Web Components v1 support
+ TypeScript-first design
+ ESM-only, modern build pipeline
+
+
+
+
+
Features
+
+
+
Binders
+
+ Bind DOM attributes and properties to your model using rv-text, rv-html, rv-value, rv-on-*, rv-each-*, and many more.
+
+
+
+
Formatters
+
+ Transform values using pipe syntax: string manipulation, comparison, math, type conversion, and more.
+
+
+
+
Components
+
+ Custom elements with lifecycle hooks, template loading, and automatic data binding through the scope object.
+
+
+
+
Router
+
+ PJAX-based SPA navigation with transition animations, prefetching, and history management.
+
+
+
+
+
+
+
Getting Started
+
+
+ Install the packages
+ yarn add @ribajs/core @ribajs/tw
+
+ Create your Riba instance
+ import { Riba, coreModule } from "@ribajs/core";
+import { twModule } from "@ribajs/tw";
+
+const riba = new Riba();
+riba.module.register(coreModule.init());
+riba.module.register(twModule.init());
+
+ Bind to the DOM
+ riba.bind(document.body, { message: "Hello!" });
+
+
+
+
+
+
+
+ Steps Wizard
+
+ Click on any step circle to navigate to that step. Completed steps show a checkmark.
+
+
+ Horizontal Steps
+
+
+
+
+
+ Vertical Steps
+
+
+
+
+
diff --git a/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.ts b/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.ts
new file mode 100644
index 000000000..6ffbc8730
--- /dev/null
+++ b/demos/tw-tabs/src/ts/components/demo-tabs/demo-tabs.component.ts
@@ -0,0 +1,36 @@
+import { Component } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoTabsComponent extends Component {
+ public static tagName = "demo-tabs";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ public scope = {};
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoTabsComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-tabs.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-tabs/src/ts/components/index.ts b/demos/tw-tabs/src/ts/components/index.ts
new file mode 100644
index 000000000..d6c345d77
--- /dev/null
+++ b/demos/tw-tabs/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoTabsComponent } from "./demo-tabs/demo-tabs.component.js";
diff --git a/demos/tw-tabs/src/ts/main.ts b/demos/tw-tabs/src/ts/main.ts
new file mode 100644
index 000000000..4575ffd1d
--- /dev/null
+++ b/demos/tw-tabs/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./tabs.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-tabs/src/ts/tabs.module.ts b/demos/tw-tabs/src/ts/tabs.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-tabs/src/ts/tabs.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-tabs/tsconfig.json b/demos/tw-tabs/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-tabs/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-tabs/vite.config.js b/demos/tw-tabs/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-tabs/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/demos/tw-theme/package.json b/demos/tw-theme/package.json
new file mode 100644
index 000000000..35a82829c
--- /dev/null
+++ b/demos/tw-theme/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@ribajs/demo-tw-theme",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "description": "",
+ "main": "./src/ts/main.ts",
+ "module": "src/ts/main.ts",
+ "source": "src/ts/main.ts",
+ "private": true,
+ "scripts": {
+ "build": "vite build --mode production",
+ "build:dev": "vite build --mode development",
+ "start": "vite",
+ "start:dev": "vite",
+ "serve": "serve dist",
+ "clear": "rm -rf ./dist",
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "src"
+ ],
+ "author": "",
+ "license": "MIT",
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/vite-config": "workspace:^",
+ "@tailwindcss/vite": "^4.2.2",
+ "eslint": "^10.2.0",
+ "serve": "^14.2.6",
+ "typescript": "6.0.2",
+ "vite": "^8.0.8"
+ },
+ "dependencies": {
+ "@ribajs/core": "workspace:^",
+ "@ribajs/events": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/tw": "workspace:^",
+ "@ribajs/utils": "workspace:^",
+ "tailwindcss": "^4.2.2"
+ }
+}
diff --git a/demos/tw-theme/src/css/main.css b/demos/tw-theme/src/css/main.css
new file mode 100644
index 000000000..eec2b775c
--- /dev/null
+++ b/demos/tw-theme/src/css/main.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@ribajs/tw/src/css/utilities.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/demos/tw-theme/src/index.html b/demos/tw-theme/src/index.html
new file mode 100644
index 000000000..ab2a9f247
--- /dev/null
+++ b/demos/tw-theme/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
TW Theme Demo
+
+
+
+
+
+
+
+
diff --git a/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.html b/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.html
new file mode 100644
index 000000000..9a436eecf
--- /dev/null
+++ b/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.html
@@ -0,0 +1,308 @@
+
+
+
+
+
+
+
+
+
TW Theme Demo
+
+
+
+ Theme Switcher
+
+ Use the controls below to switch between light, dark, and system themes.
+ The entire page will update to reflect the selected theme.
+
+
+
+
+
Dropdown Mode
+
+
+
+
Icon Mode
+
+
+
+
Large Icon
+
+
+
+
+
+ Theme-Aware Cards
+
+ These cards use Tailwind's dark: variant classes to adapt their appearance based on the active theme.
+
+
+
+
+
+
Light Theme
+
+ A clean, bright appearance with white backgrounds and dark text. Perfect for well-lit environments.
+
+
+
+
+
+
Dark Theme
+
+ Easy on the eyes with dark backgrounds and light text. Ideal for low-light conditions and reducing eye strain.
+
+
+
+
+
+
System Theme
+
+ Automatically follows your operating system's theme preference, switching seamlessly between light and dark.
+
+
+
+
+
+
+ Typography
+
+ Text elements that adapt to the current theme using Tailwind dark mode classes.
+
+
+
+
Heading Text
+
+ This is body text that adjusts its color based on the active theme. In light mode, it appears as dark gray on a light background. In dark mode, it becomes light gray on a dark background.
+
+
+ This is secondary text with a more subtle appearance, useful for descriptions, captions, and less important information.
+
+
+ This is a themed link
+
+
+
+
+
+ Color Palette
+
+ See how color swatches adapt between light and dark mode backgrounds.
+
+
+
+
+
+
+
Success
+
green-500
+
+
+
+
Warning
+
yellow-500
+
+
+
+
+
+
+ Form Elements
+
+ Form controls that respond to theme changes.
+
+
+
+
+ Name
+
+
+ Email
+
+
+ Message
+
+
+
+ Submit
+
+
+
+
+
+ Sidebar (Backdrop Test)
+
+ Opens a sidebar in overlap mode. The dark backdrop should be noticeably darker in dark mode
+ (bg-black/70) than in light mode
+ (bg-black/50).
+
+
+
+
+
+
+ Open Left Sidebar
+
+
+
+
+ Open Right Sidebar
+
+
+
+
+
+
+
+
+ Collapse & Accordion
+
+ Collapse button uses bg-blue-600 dark:bg-blue-700;
+ the panel below adapts its border and background to the theme.
+
+
+
+
+
+
+
+ This accordion group shows one item at a time. The chevron rotates when expanded and the panel background switches between bg-white and dark:bg-gray-800.
+
+
+ Borders also adapt: border-gray-200 in light mode, dark:border-gray-700 in dark mode.
+
+
+ Inline code like bg-gray-100 is styled for both themes as well.
+
+
+
+
+
+
+ Dropdown
+
+ Floating menu surface — tests dark-mode background, hover state and divider color.
+
+
+
+ Options
+
+
+
+
+
+
+
+
+
+ Alerts
+
+ All four severity levels in their light and dark variants.
+
+
+
+
+
+
+
+ Notifications (Second Backdrop Test)
+
+ The modal renders an additional dark backdrop. Toasts stack in the corner with type-colored surfaces.
+
+
+
+ Open Modal
+
+
+ Info Toast
+
+
+ Success Toast
+
+
+ Warning Toast
+
+
+ Error Toast
+
+
+
diff --git a/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.ts b/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.ts
new file mode 100644
index 000000000..97053dd35
--- /dev/null
+++ b/demos/tw-theme/src/ts/components/demo-theme/demo-theme.component.ts
@@ -0,0 +1,95 @@
+import { Component } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export class DemoThemeComponent extends Component {
+ public static tagName = "demo-theme";
+
+ protected autobind = true;
+ static get observedAttributes(): string[] {
+ return [];
+ }
+
+ protected notifications = new EventDispatcher("theme-demo");
+
+ public scope = {
+ showModal: this.showModal.bind(this),
+ showInfoToast: this.showInfoToast.bind(this),
+ showSuccessToast: this.showSuccessToast.bind(this),
+ showWarningToast: this.showWarningToast.bind(this),
+ showErrorToast: this.showErrorToast.bind(this),
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ super.init(DemoThemeComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ public showModal() {
+ this.notifications.trigger("show-notification", {
+ kind: "modal",
+ title: "Theme Backdrop Test",
+ message:
+ "This modal renders a second backdrop. Toggle the theme to compare the light and dark overlay.",
+ closable: true,
+ });
+ }
+
+ public showInfoToast() {
+ this.notifications.trigger("show-notification", {
+ kind: "toast",
+ type: "info",
+ title: "Info",
+ message: "Informational toast in the active theme.",
+ timeout: 5000,
+ });
+ }
+
+ public showSuccessToast() {
+ this.notifications.trigger("show-notification", {
+ kind: "toast",
+ type: "success",
+ title: "Success",
+ message: "Success toast in the active theme.",
+ timeout: 5000,
+ });
+ }
+
+ public showWarningToast() {
+ this.notifications.trigger("show-notification", {
+ kind: "toast",
+ type: "warning",
+ title: "Warning",
+ message: "Warning toast in the active theme.",
+ timeout: 7000,
+ });
+ }
+
+ public showErrorToast() {
+ this.notifications.trigger("show-notification", {
+ kind: "toast",
+ type: "error",
+ title: "Error",
+ message: "Error toast in the active theme.",
+ timeout: 0,
+ });
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: template } =
+ await import("./demo-theme.component.html?raw");
+ return template;
+ }
+ }
+}
diff --git a/demos/tw-theme/src/ts/components/index.ts b/demos/tw-theme/src/ts/components/index.ts
new file mode 100644
index 000000000..6c85d2a0e
--- /dev/null
+++ b/demos/tw-theme/src/ts/components/index.ts
@@ -0,0 +1 @@
+export { DemoThemeComponent } from "./demo-theme/demo-theme.component.js";
diff --git a/demos/tw-theme/src/ts/main.ts b/demos/tw-theme/src/ts/main.ts
new file mode 100644
index 000000000..3ee9c3c21
--- /dev/null
+++ b/demos/tw-theme/src/ts/main.ts
@@ -0,0 +1,14 @@
+import { coreModule, Riba } from "@ribajs/core";
+import { extrasModule } from "@ribajs/extras";
+import { twModule } from "@ribajs/tw";
+import { DemoModule } from "./theme.module.js";
+
+const riba = new Riba();
+const model = {};
+
+riba.module.register(coreModule.init());
+riba.module.register(extrasModule.init());
+riba.module.register(twModule.init());
+riba.module.register(DemoModule.init());
+
+riba.bind(document.body, model);
diff --git a/demos/tw-theme/src/ts/theme.module.ts b/demos/tw-theme/src/ts/theme.module.ts
new file mode 100644
index 000000000..064033ae0
--- /dev/null
+++ b/demos/tw-theme/src/ts/theme.module.ts
@@ -0,0 +1,12 @@
+import { RibaModule } from "@ribajs/core";
+import * as components from "./components/index.js";
+
+export const DemoModule: RibaModule = {
+ binders: {},
+ components,
+ formatters: {},
+ services: {},
+ init() {
+ return this;
+ },
+};
diff --git a/demos/tw-theme/tsconfig.json b/demos/tw-theme/tsconfig.json
new file mode 100644
index 000000000..df31a4647
--- /dev/null
+++ b/demos/tw-theme/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@ribajs/tsconfig/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "types": []
+ },
+ "exclude": [
+ "node_modules",
+ "dist/**/*.d.ts"
+ ]
+}
diff --git a/demos/tw-theme/vite.config.js b/demos/tw-theme/vite.config.js
new file mode 100644
index 000000000..136a53c10
--- /dev/null
+++ b/demos/tw-theme/vite.config.js
@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { ribaViteConfig } from "@ribajs/vite-config";
+
+const config = ribaViteConfig();
+config.plugins = [...(config.plugins || []), tailwindcss()];
+export default config;
diff --git a/infra/doc/package.json b/infra/doc/package.json
index d57279e48..0001362c8 100644
--- a/infra/doc/package.json
+++ b/infra/doc/package.json
@@ -43,15 +43,15 @@
"devDependencies": {
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
- "@types/node": "^24.12.0",
+ "@types/node": "^24.12.2",
"@types/prismjs": "^1.26.6",
"concurrently": "^9.2.1",
"js-yaml": "^4.1.1",
- "marked": "^15.0.0",
- "pug": "^3.0.3",
- "sass": "^1.98.0",
+ "marked": "^18.0.0",
+ "pug": "^3.0.4",
+ "sass": "^1.99.0",
"typescript": "^6.0.2",
- "vite": "^8.0.3",
- "vite-plugin-static-copy": "^3.2.0"
+ "vite": "^8.0.8",
+ "vite-plugin-static-copy": "^4.0.1"
}
}
diff --git a/infra/eslint-config/package.json b/infra/eslint-config/package.json
index 762a01060..e8a4f1952 100644
--- a/infra/eslint-config/package.json
+++ b/infra/eslint-config/package.json
@@ -37,14 +37,14 @@
"prettier"
],
"dependencies": {
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-import-resolver-typescript": "^4.4.4",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-prettier": "^5.5.5",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"typescript": "6.0.2"
},
"bugs": {
diff --git a/infra/postcss-config/package.json b/infra/postcss-config/package.json
index 25fd5867b..c7861970b 100644
--- a/infra/postcss-config/package.json
+++ b/infra/postcss-config/package.json
@@ -42,8 +42,8 @@
"dependencies": {
"@fullhuman/postcss-purgecss": "^8.0.0",
"@ribajs/npm-package": "workspace:^",
- "postcss": "^8.5.8",
- "postcss-preset-env": "^11.2.0"
+ "postcss": "^8.5.9",
+ "postcss-preset-env": "^11.2.1"
},
"optionalDependencies": {
"@ribajs/bs5": "workspace:^",
diff --git a/infra/vite-config/package.json b/infra/vite-config/package.json
index 466487f10..192c2d563 100644
--- a/infra/vite-config/package.json
+++ b/infra/vite-config/package.json
@@ -16,6 +16,6 @@
"dependencies": {
"@ribajs/iconset": "workspace:^",
"rollup-plugin-pug": "^1.1.1",
- "vite": "^8.0.3"
+ "vite": "^8.0.8"
}
}
diff --git a/package.json b/package.json
index 23ce530c9..6b9e98b62 100644
--- a/package.json
+++ b/package.json
@@ -55,24 +55,24 @@
"test:e2e:headed": "playwright test --headed"
},
"devDependencies": {
- "@playwright/test": "^1.59.0",
+ "@playwright/test": "^1.59.1",
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@ribajs/types": "workspace:^",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-import-resolver-typescript": "^4.4.4",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-prettier": "^5.5.5",
- "jsdom": "^26.1.0",
- "prettier": "^3.8.1",
- "sass": "^1.98.0",
+ "jsdom": "^29.0.2",
+ "prettier": "^3.8.2",
+ "sass": "^1.99.0",
"typescript": "^6.0.2",
- "vite": "^8.0.3",
- "vitest": "^3.2.4"
+ "vite": "^8.0.8",
+ "vitest": "^4.1.4"
},
"workspaces": [
"packages/*",
@@ -118,7 +118,8 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/nest-theme": "workspace:^",
"@ribajs/npm-package": "workspace:^",
- "@ribajs/strapi": "workspace:^"
+ "@ribajs/strapi": "workspace:^",
+ "@ribajs/tw": "workspace:^"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
diff --git a/packages/accessibility/package.json b/packages/accessibility/package.json
index 86f41b09e..6c36868f5 100644
--- a/packages/accessibility/package.json
+++ b/packages/accessibility/package.json
@@ -23,8 +23,8 @@
"@ribajs/gamecontroller.js": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/eslint": "^9.6.1",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/artcodestudio/package.json b/packages/artcodestudio/package.json
index 27f349fd7..35d4772ff 100644
--- a/packages/artcodestudio/package.json
+++ b/packages/artcodestudio/package.json
@@ -25,17 +25,17 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/types": "workspace:^",
"@types/jest": "^30.0.0",
- "@types/node": "^24.12.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@types/node": "^24.12.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
}
}
diff --git a/packages/bs5-photoswipe/package.json b/packages/bs5-photoswipe/package.json
index 6de7a8cc4..374493a48 100644
--- a/packages/bs5-photoswipe/package.json
+++ b/packages/bs5-photoswipe/package.json
@@ -39,15 +39,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/bs5/package.json b/packages/bs5/package.json
index a4af6b40d..caf95f39d 100644
--- a/packages/bs5/package.json
+++ b/packages/bs5/package.json
@@ -54,16 +54,16 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/types": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"@yarnpkg/pnpify": "^4.1.6",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/bs5/src/components/bs5-slideshow/bs5-slideshow-slides.component.html b/packages/bs5/src/components/bs5-slideshow/bs5-slideshow-slides.component.html
index f838b1119..23a686d75 100644
--- a/packages/bs5/src/components/bs5-slideshow/bs5-slideshow-slides.component.html
+++ b/packages/bs5/src/components/bs5-slideshow/bs5-slideshow-slides.component.html
@@ -1,3 +1,3 @@
diff --git a/packages/cache/package.json b/packages/cache/package.json
index 3cf87ebc8..9e753deef 100644
--- a/packages/cache/package.json
+++ b/packages/cache/package.json
@@ -55,12 +55,12 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/content-slider/package.json b/packages/content-slider/package.json
index c99d2b5a6..df7a7f6d5 100644
--- a/packages/content-slider/package.json
+++ b/packages/content-slider/package.json
@@ -39,15 +39,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/core/package.json b/packages/core/package.json
index fc0b7a4b1..f834bdded 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -52,16 +52,16 @@
"@ribajs/tsconfig": "workspace:^",
"@ribajs/types": "workspace:^",
"@types/jest": "^30.0.0",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-config": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"source-map-support": "^0.5.21",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"bugs": {
diff --git a/packages/empty-template/package.json b/packages/empty-template/package.json
index 53525a626..34b3b93b3 100644
--- a/packages/empty-template/package.json
+++ b/packages/empty-template/package.json
@@ -23,8 +23,8 @@
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
"@types/eslint": "^9.6.1",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/events/package.json b/packages/events/package.json
index e61313b7b..805239799 100644
--- a/packages/events/package.json
+++ b/packages/events/package.json
@@ -24,12 +24,12 @@
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"jest": "^30.3.0",
"jest-config": "^30.3.0",
"jest-extended": "^7.0.0",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
}
}
diff --git a/packages/extras/package.json b/packages/extras/package.json
index f0a6b841a..f3510dbbf 100644
--- a/packages/extras/package.json
+++ b/packages/extras/package.json
@@ -39,15 +39,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/extras/src/binders/index.ts b/packages/extras/src/binders/index.ts
index 41cfbe084..6348bc21c 100644
--- a/packages/extras/src/binders/index.ts
+++ b/packages/extras/src/binders/index.ts
@@ -5,3 +5,8 @@ export * from "./scroll-position-angle.binder.js";
export * from "./scrollbar-autoscroll.binder.js";
export * from "./scrollbar-draggable.binder.js";
export * from "./sync-element-property.binder.js";
+export * from "./scroll-to-on-event.binder.js";
+export * from "./toggle-attribute.binder.js";
+export * from "./toggle-class.binder.js";
+export * from "./scrollspy-class.binder.js";
+export * from "./show-toast-on.binder.js";
diff --git a/packages/extras/src/binders/scroll-to-on-event.binder.ts b/packages/extras/src/binders/scroll-to-on-event.binder.ts
new file mode 100644
index 000000000..4ddd521d6
--- /dev/null
+++ b/packages/extras/src/binders/scroll-to-on-event.binder.ts
@@ -0,0 +1,37 @@
+import { Binder } from "@ribajs/core";
+import { scrollTo } from "@ribajs/utils/src/dom.js";
+
+export class ScrollToOnEventBinder extends Binder
{
+ static key = "scroll-to-on-*";
+
+ private target?: HTMLElement;
+
+ private _onEvent(event: Event) {
+ const offset = Number(this.el.dataset.offset || 0);
+ const scrollElement = this.el.dataset.scrollElement
+ ? document.querySelector(this.el.dataset.scrollElement)
+ : window;
+ if (this.target) {
+ scrollTo(this.target, offset, scrollElement);
+ event.preventDefault();
+ }
+ }
+
+ private onEvent = this._onEvent.bind(this);
+
+ bind(el: HTMLUnknownElement) {
+ this.onEvent = this.onEvent.bind(this);
+ const eventName = this.args[0] as string;
+ el.addEventListener(eventName, this.onEvent);
+ }
+
+ routine(el: HTMLUnknownElement, targetSelector: string) {
+ this.target =
+ document.querySelector(targetSelector) || undefined;
+ }
+
+ unbind(el: HTMLElement) {
+ const eventName = this.args[0] as string;
+ el.removeEventListener(eventName, this.onEvent);
+ }
+}
diff --git a/packages/extras/src/binders/scrollspy-class.binder.ts b/packages/extras/src/binders/scrollspy-class.binder.ts
new file mode 100644
index 000000000..f91fc6e90
--- /dev/null
+++ b/packages/extras/src/binders/scrollspy-class.binder.ts
@@ -0,0 +1,69 @@
+import { Binder } from "@ribajs/core";
+import { debounce } from "@ribajs/utils/src/control.js";
+import { isInViewport } from "@ribajs/utils/src/dom.js";
+
+/**
+ * Adds or removes a CSS class based on whether a target element is in the viewport.
+ *
+ * Usage: `rv-scrollspy-active="'#section-id'"`
+ * This will add/remove the class "active" on the bound element when #section-id
+ * is in the viewport.
+ */
+export class ScrollspyClassBinder extends Binder {
+ static key = "scrollspy-*";
+
+ private target?: HTMLElement;
+ private className?: string;
+
+ private _onScroll() {
+ if (!this.target) {
+ throw new Error("No target element found!");
+ }
+
+ if (!this.className) {
+ throw new Error("className not set!");
+ }
+
+ if (this.isInViewport(this.target)) {
+ this.el.classList.add(this.className);
+ if (this.el.type === "radio") {
+ this.el.checked = true;
+ }
+ } else {
+ this.el.classList.remove(this.className);
+ if (this.el.type === "radio") {
+ this.el.checked = false;
+ }
+ }
+ }
+
+ private onScroll = debounce(this._onScroll.bind(this));
+
+ private _isInViewport(elem: Element) {
+ if (!elem) {
+ return false;
+ }
+ const offsetTop = Number(this.el.dataset.offset || 0);
+ const offsetBottom = Number(this.el.dataset.offsetBottom || 0);
+ return isInViewport(elem, { top: offsetTop, bottom: offsetBottom });
+ }
+
+ private isInViewport = this._isInViewport.bind(this);
+
+ bind() {
+ window.addEventListener("scroll", this.onScroll, {
+ passive: true,
+ });
+ this.onScroll();
+ }
+
+ routine(el: HTMLElement, targetSelector: string) {
+ const nativeIDTargetSelector = targetSelector.replace("#", "");
+ this.target = document.getElementById(nativeIDTargetSelector) || undefined;
+ this.className = this.args[0] as string;
+ }
+
+ unbind() {
+ window.removeEventListener("scroll", this.onScroll);
+ }
+}
diff --git a/packages/extras/src/binders/show-toast-on.binder.ts b/packages/extras/src/binders/show-toast-on.binder.ts
new file mode 100644
index 000000000..4afacc4be
--- /dev/null
+++ b/packages/extras/src/binders/show-toast-on.binder.ts
@@ -0,0 +1,45 @@
+import { Binder } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import type { ToastNotification } from "../types/notification.js";
+
+/**
+ * Shows a toast notification when a specified event fires on the element.
+ *
+ * Usage: `rv-show-toast-on-click="toastData"`
+ */
+export class ShowToastOnEventBinder extends Binder<
+ ToastNotification,
+ HTMLElement
+> {
+ static key = "show-toast-on-*";
+
+ private toastData?: ToastNotification;
+
+ private _onEvent() {
+ if (!this.toastData) {
+ throw new Error("Toast data not set!");
+ }
+ const toastData: ToastNotification = { ...this.toastData };
+ const notificationDispatcher = new EventDispatcher("toast");
+ notificationDispatcher.trigger("show-notification", toastData);
+ }
+
+ private onEvent = this._onEvent.bind(this);
+
+ bind(el: HTMLElement) {
+ const eventName = this.args[0] as string;
+ el.addEventListener(eventName as any, this.onEvent);
+ }
+
+ routine(_el: HTMLElement, toastData: ToastNotification) {
+ if (this.args === null) {
+ throw new Error("args is null");
+ }
+ this.toastData = toastData;
+ }
+
+ unbind(el: HTMLElement) {
+ const eventName = this.args[0] as string;
+ el.removeEventListener(eventName as any, this.onEvent);
+ }
+}
diff --git a/packages/extras/src/binders/toggle-attribute.binder.ts b/packages/extras/src/binders/toggle-attribute.binder.ts
new file mode 100644
index 000000000..15c14c888
--- /dev/null
+++ b/packages/extras/src/binders/toggle-attribute.binder.ts
@@ -0,0 +1,97 @@
+import { Binder } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { TOGGLE_BUTTON, TOGGLE_ATTRIBUTE } from "../constants/index.js";
+
+/**
+ * Framework-agnostic toggle attribute binder.
+ * Adds / removes an attribute via toggle-button EventDispatcher.
+ */
+export class ToggleAttributeBinder extends Binder {
+ static key = "toggle-attribute-*";
+
+ private toggleButtonEvents?: EventDispatcher;
+ private state = "off";
+
+ private _triggerState() {
+ this.toggleButtonEvents?.trigger(
+ TOGGLE_BUTTON.eventNames.state,
+ this.state,
+ );
+ }
+
+ private triggerState = this._triggerState.bind(this);
+
+ private _onToggle() {
+ this.toggle.bind(this)(this.el);
+ }
+
+ private onToggle = this._onToggle.bind(this);
+
+ private toggle(el: HTMLElement) {
+ if (this.state === "removed") {
+ this.add.bind(this)(el);
+ } else {
+ this.remove.bind(this)(el);
+ }
+ }
+
+ private remove(el: HTMLElement) {
+ const attributeName = this.args[0] as string;
+ el.removeAttribute(attributeName);
+ this.state = "removed";
+ el.dispatchEvent(
+ new CustomEvent(TOGGLE_ATTRIBUTE.elEventNames.removed, {
+ detail: { attributeName },
+ }),
+ );
+ this.triggerState();
+ }
+
+ private add(el: HTMLElement) {
+ const attributeName = this.args[0] as string;
+ el.setAttribute(attributeName, attributeName);
+ this.state = "added";
+ el.dispatchEvent(
+ new CustomEvent(TOGGLE_ATTRIBUTE.elEventNames.added, {
+ detail: { attributeName },
+ }),
+ );
+ this.triggerState();
+ }
+
+ bind(el: HTMLElement) {
+ const attributeName = this.args[0] as string;
+ this.state = el.hasAttribute(attributeName) ? "added" : "removed";
+ }
+
+ unbind() {
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.toggle,
+ this.onToggle,
+ this,
+ );
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.init,
+ this.triggerState,
+ this,
+ );
+ }
+
+ routine(el: HTMLElement, newId: string) {
+ const oldId = this._getValue(el);
+ let toggleButton = this.toggleButtonEvents;
+ if (oldId && toggleButton) {
+ toggleButton.off(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.off(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+
+ if (!this.toggleButtonEvents) {
+ this.toggleButtonEvents = new EventDispatcher(
+ TOGGLE_BUTTON.nsPrefix + newId,
+ );
+ toggleButton = this.toggleButtonEvents as EventDispatcher;
+ toggleButton.on(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.on(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+ }
+}
diff --git a/packages/extras/src/binders/toggle-class.binder.ts b/packages/extras/src/binders/toggle-class.binder.ts
new file mode 100644
index 000000000..6768edd73
--- /dev/null
+++ b/packages/extras/src/binders/toggle-class.binder.ts
@@ -0,0 +1,97 @@
+import { Binder } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { TOGGLE_BUTTON, TOGGLE_CLASS } from "../constants/index.js";
+
+/**
+ * Framework-agnostic toggle class binder.
+ * Adds / removes a CSS class via toggle-button EventDispatcher.
+ */
+export class ToggleClassBinder extends Binder {
+ static key = "toggle-class-*";
+
+ private toggleButtonEvents?: EventDispatcher;
+ private state = "off";
+
+ private _triggerState() {
+ this.toggleButtonEvents?.trigger(
+ TOGGLE_BUTTON.eventNames.state,
+ this.state,
+ );
+ }
+
+ private triggerState = this._triggerState.bind(this);
+
+ private _onToggle() {
+ this.toggle.bind(this)(this.el);
+ }
+
+ private onToggle = this._onToggle.bind(this);
+
+ private toggle(el: HTMLButtonElement) {
+ if (this.state === "removed") {
+ this.add.bind(this)(el);
+ } else {
+ this.remove.bind(this)(el);
+ }
+ }
+
+ private remove(el: HTMLButtonElement) {
+ const className = this.args[0] as string;
+ el.classList.remove(className);
+ this.state = "removed";
+ el.dispatchEvent(
+ new CustomEvent(TOGGLE_CLASS.elEventNames.removed, {
+ detail: { className },
+ }),
+ );
+ this.triggerState();
+ }
+
+ private add(el: HTMLButtonElement) {
+ const className = this.args[0] as string;
+ el.classList.add(className);
+ this.state = "added";
+ el.dispatchEvent(
+ new CustomEvent(TOGGLE_CLASS.elEventNames.added, {
+ detail: { className },
+ }),
+ );
+ this.triggerState();
+ }
+
+ bind(el: HTMLButtonElement) {
+ const className = this.args[0] as string;
+ this.state = el.classList.contains(className) ? "added" : "removed";
+ }
+
+ unbind() {
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.toggle,
+ this.onToggle,
+ this,
+ );
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.init,
+ this.triggerState,
+ this,
+ );
+ }
+
+ routine(el: HTMLButtonElement, newId: string) {
+ const oldId = this._getValue(el);
+ let toggleButton = this.toggleButtonEvents;
+ if (oldId && toggleButton) {
+ toggleButton.off(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.off(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+
+ if (!this.toggleButtonEvents) {
+ this.toggleButtonEvents = new EventDispatcher(
+ TOGGLE_BUTTON.nsPrefix + newId,
+ );
+ toggleButton = this.toggleButtonEvents as EventDispatcher;
+ toggleButton.on(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.on(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+ }
+}
diff --git a/packages/extras/src/constants/index.ts b/packages/extras/src/constants/index.ts
new file mode 100644
index 000000000..ed8345696
--- /dev/null
+++ b/packages/extras/src/constants/index.ts
@@ -0,0 +1,23 @@
+export const TOGGLE_BUTTON = {
+ nsPrefix: "toggle-button-",
+ eventNames: {
+ toggle: "toggle",
+ toggled: "toggled",
+ init: "init",
+ state: "state",
+ },
+};
+
+export const TOGGLE_ATTRIBUTE = {
+ elEventNames: {
+ removed: "attribute-removed",
+ added: "attribute-added",
+ },
+};
+
+export const TOGGLE_CLASS = {
+ elEventNames: {
+ removed: "class-removed",
+ added: "class-added",
+ },
+};
diff --git a/packages/extras/src/index.ts b/packages/extras/src/index.ts
index 6f1d749c5..abb841782 100644
--- a/packages/extras/src/index.ts
+++ b/packages/extras/src/index.ts
@@ -1,4 +1,5 @@
export * from "./binders/index.js";
+export * from "./constants/index.js";
export * from "./components/index.js";
export * from "./helper/index.js";
export * from "./services/index.js";
diff --git a/packages/extras/src/services/dragscroll.service.ts b/packages/extras/src/services/dragscroll.service.ts
index a880d7a75..9d315ac4f 100644
--- a/packages/extras/src/services/dragscroll.service.ts
+++ b/packages/extras/src/services/dragscroll.service.ts
@@ -24,8 +24,14 @@ export class Dragscroll {
this.el = el;
this.options = options;
+ console.debug("[Dragscroll] constructor", {
+ el: el.tagName + "." + el.className.split(" ").slice(0, 3).join("."),
+ touchCapable: this.touchCapable,
+ detectGlobalMove: options.detectGlobalMove,
+ });
+
if (this.touchCapable) {
- // Do noting on touch devices
+ console.debug("[Dragscroll] Skipping — touch device detected");
return this;
}
@@ -84,12 +90,19 @@ export class Dragscroll {
public checkDraggable = throttle(this._checkDraggable.bind(this));
protected onMouseDown(e: MouseEvent) {
+ console.debug("[Dragscroll] mousedown", {
+ clientX: e.clientX,
+ clientY: e.clientY,
+ });
this.pushed = true;
this.lastClientX = e.clientX;
this.lastClientY = e.clientY;
}
protected onMouseUp() {
+ if (this.pushed) {
+ console.debug("[Dragscroll] mouseup");
+ }
this.pushed = false;
}
diff --git a/packages/extras/src/services/index.ts b/packages/extras/src/services/index.ts
index 034cb17f7..b3dfa0e42 100644
--- a/packages/extras/src/services/index.ts
+++ b/packages/extras/src/services/index.ts
@@ -5,3 +5,4 @@ export * from "./fullscreen.service.js";
export * from "./gameloop.service.js";
export * from "./touch-events/scroll-events.service.js";
export * from "./touch-events/touch-events.service.js";
+export * from "./modal.service.js";
diff --git a/packages/extras/src/services/modal.service.spec.ts b/packages/extras/src/services/modal.service.spec.ts
new file mode 100644
index 000000000..7ea14878e
--- /dev/null
+++ b/packages/extras/src/services/modal.service.spec.ts
@@ -0,0 +1,202 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { ModalService } from "./modal.service.js";
+
+describe("ModalService", () => {
+ let dialog: HTMLDialogElement;
+
+ beforeEach(() => {
+ dialog = document.createElement("dialog") as HTMLDialogElement;
+ // jsdom does not implement showModal()/close() on
+ dialog.showModal = vi.fn();
+ dialog.close = vi.fn();
+ document.body.appendChild(dialog);
+ });
+
+ afterEach(() => {
+ dialog.remove();
+ document.body.style.overflow = "";
+ });
+
+ describe("constructor", () => {
+ it("creates service without throwing", () => {
+ expect(() => new ModalService(dialog)).not.toThrow();
+ });
+ });
+
+ describe("isShown", () => {
+ it("defaults to false", () => {
+ const modal = new ModalService(dialog);
+ expect(modal.isShown).toBe(false);
+ });
+ });
+
+ describe("show()", () => {
+ it("calls showModal() on the dialog element", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ expect(dialog.showModal).toHaveBeenCalledTimes(1);
+ });
+
+ it("sets body overflow to hidden", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ expect(document.body.style.overflow).toBe("hidden");
+ });
+
+ it("sets isShown to true", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ expect(modal.isShown).toBe(true);
+ });
+
+ it("dispatches modal.show event", () => {
+ const modal = new ModalService(dialog);
+ const handler = vi.fn();
+ dialog.addEventListener("modal.show", handler);
+ modal.show();
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("dispatches modal.shown event", () => {
+ const modal = new ModalService(dialog);
+ const handler = vi.fn();
+ dialog.addEventListener("modal.shown", handler);
+ modal.show();
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("does nothing when already shown", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ (dialog.showModal as ReturnType).mockClear();
+ modal.show();
+ expect(dialog.showModal).not.toHaveBeenCalled();
+ });
+ });
+
+ describe("hide()", () => {
+ it("calls close() on the dialog element", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ modal.hide();
+ expect(dialog.close).toHaveBeenCalledTimes(1);
+ });
+
+ it("restores body overflow", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ expect(document.body.style.overflow).toBe("hidden");
+ modal.hide();
+ expect(document.body.style.overflow).toBe("");
+ });
+
+ it("sets isShown to false", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ modal.hide();
+ expect(modal.isShown).toBe(false);
+ });
+
+ it("dispatches modal.hide event", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ const handler = vi.fn();
+ dialog.addEventListener("modal.hide", handler);
+ modal.hide();
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("dispatches modal.hidden event", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ const handler = vi.fn();
+ dialog.addEventListener("modal.hidden", handler);
+ modal.hide();
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("does nothing when already hidden", () => {
+ const modal = new ModalService(dialog);
+ const handler = vi.fn();
+ dialog.addEventListener("modal.hide", handler);
+ modal.hide();
+ expect(handler).not.toHaveBeenCalled();
+ });
+ });
+
+ describe("toggle()", () => {
+ it("shows when currently hidden", () => {
+ const modal = new ModalService(dialog);
+ modal.toggle();
+ expect(modal.isShown).toBe(true);
+ });
+
+ it("hides when currently shown", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ modal.toggle();
+ expect(modal.isShown).toBe(false);
+ });
+
+ it("round-trips correctly: hidden -> shown -> hidden", () => {
+ const modal = new ModalService(dialog);
+ modal.toggle();
+ expect(modal.isShown).toBe(true);
+ modal.toggle();
+ expect(modal.isShown).toBe(false);
+ });
+ });
+
+ describe("Escape key", () => {
+ it("triggers hide when Escape is pressed", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ const event = new KeyboardEvent("keydown", {
+ key: "Escape",
+ bubbles: true,
+ });
+ dialog.dispatchEvent(event);
+ expect(modal.isShown).toBe(false);
+ });
+
+ it("does not hide when a different key is pressed", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ const event = new KeyboardEvent("keydown", {
+ key: "Enter",
+ bubbles: true,
+ });
+ dialog.dispatchEvent(event);
+ expect(modal.isShown).toBe(true);
+ });
+ });
+
+ describe("dispose()", () => {
+ it("hides the modal if shown", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ modal.dispose();
+ expect(modal.isShown).toBe(false);
+ expect(dialog.close).toHaveBeenCalled();
+ });
+
+ it("removes event listeners (Escape no longer triggers hide)", () => {
+ const modal = new ModalService(dialog);
+ modal.show();
+ modal.dispose();
+ const handler = vi.fn();
+ dialog.addEventListener("modal.hide", handler);
+ const event = new KeyboardEvent("keydown", {
+ key: "Escape",
+ bubbles: true,
+ });
+ dialog.dispatchEvent(event);
+ expect(handler).not.toHaveBeenCalled();
+ });
+
+ it("does not throw when called on an already-hidden modal", () => {
+ const modal = new ModalService(dialog);
+ expect(() => modal.dispose()).not.toThrow();
+ });
+ });
+});
diff --git a/packages/extras/src/services/modal.service.ts b/packages/extras/src/services/modal.service.ts
new file mode 100644
index 000000000..63d41664a
--- /dev/null
+++ b/packages/extras/src/services/modal.service.ts
@@ -0,0 +1,88 @@
+/**
+ * Framework-agnostic modal service.
+ *
+ * Uses the native `` element with scroll lock + optional backdrop-click
+ * to close. Dispatches `modal.show`, `modal.shown`, `modal.hide`, `modal.hidden`
+ * events on the element.
+ */
+export class ModalService {
+ protected el: HTMLDialogElement;
+ protected backdrop: HTMLElement | null = null;
+ protected _isShown = false;
+ protected abortController = new AbortController();
+
+ constructor(
+ el: HTMLDialogElement,
+ options: { backdrop?: boolean; keyboard?: boolean } = {},
+ ) {
+ this.el = el;
+ const signal = this.abortController.signal;
+
+ this.el.addEventListener("keydown", this._onKeydown, { signal });
+
+ if (options.backdrop !== false) {
+ this.el.addEventListener("click", this._onBackdropClick, { signal });
+ }
+ }
+
+ get isShown() {
+ return this._isShown;
+ }
+
+ show() {
+ if (this._isShown) return;
+
+ this.el.dispatchEvent(new CustomEvent("modal.show"));
+
+ document.body.style.overflow = "hidden";
+
+ this.el.showModal();
+ this._isShown = true;
+
+ this.el.dispatchEvent(new CustomEvent("modal.shown"));
+ }
+
+ hide() {
+ if (!this._isShown) return;
+
+ this.el.dispatchEvent(new CustomEvent("modal.hide"));
+
+ this.el.close();
+ document.body.style.overflow = "";
+ this._isShown = false;
+
+ this.el.dispatchEvent(new CustomEvent("modal.hidden"));
+ }
+
+ toggle() {
+ if (this._isShown) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ }
+
+ private _onKeydown = (event: KeyboardEvent) => {
+ if (event.key === "Escape" && this._isShown) {
+ event.preventDefault();
+ this.hide();
+ }
+ };
+
+ /**
+ * Close when clicking the dialog backdrop (the ::backdrop pseudo-element).
+ * A click on the dialog itself (not its children) means the backdrop was clicked.
+ */
+ private _onBackdropClick = (event: MouseEvent) => {
+ if (event.target === this.el) {
+ this.hide();
+ }
+ };
+
+ dispose() {
+ this.abortController.abort();
+ if (this._isShown) {
+ this.hide();
+ }
+ }
+}
diff --git a/packages/extras/src/types/index.ts b/packages/extras/src/types/index.ts
index 01d536b4a..0dfefa4ba 100644
--- a/packages/extras/src/types/index.ts
+++ b/packages/extras/src/types/index.ts
@@ -16,3 +16,4 @@ export * from "./touch-settings.js";
export * from "./touch-swipe-data.js";
export * from "./touch-type.js";
export * from "./video-component-scope.js";
+export * from "./notification.js";
diff --git a/packages/extras/src/types/notification.ts b/packages/extras/src/types/notification.ts
new file mode 100644
index 000000000..c253adf74
--- /dev/null
+++ b/packages/extras/src/types/notification.ts
@@ -0,0 +1,34 @@
+export interface Notification {
+ title?: string;
+ message: string;
+ /**
+ * Notification kind: "toast" for toast notifications, "modal" for modal dialogs.
+ */
+ kind: "toast" | "modal";
+ /**
+ * Visual style type for the notification.
+ */
+ type?: "info" | "success" | "warning" | "error";
+ /**
+ * Auto-dismiss timeout in milliseconds. 0 means no auto-dismiss.
+ */
+ timeout?: number;
+}
+
+export interface ModalNotification extends Notification {
+ kind: "modal";
+ /** Show close button */
+ closable?: boolean;
+}
+
+export interface ToastNotification extends Notification {
+ kind: "toast";
+ /** Position of the toast */
+ position?:
+ | "top-right"
+ | "top-left"
+ | "bottom-right"
+ | "bottom-left"
+ | "top-center"
+ | "bottom-center";
+}
diff --git a/packages/extras/tsconfig.json b/packages/extras/tsconfig.json
index 87cbfa3d5..f21735372 100644
--- a/packages/extras/tsconfig.json
+++ b/packages/extras/tsconfig.json
@@ -8,6 +8,7 @@
"include": ["src/**/*"],
"exclude": [
"node_modules",
- "dist/**/*.d.ts"
+ "dist/**/*.d.ts",
+ "src/**/*.spec.ts"
]
}
diff --git a/packages/fuse/package.json b/packages/fuse/package.json
index a464d86df..c7070f367 100644
--- a/packages/fuse/package.json
+++ b/packages/fuse/package.json
@@ -16,7 +16,7 @@
"@ribajs/core": "workspace:^",
"@ribajs/jsx": "workspace:^",
"@ribajs/utils": "workspace:^",
- "fuse.js": "^7.1.0"
+ "fuse.js": "^7.3.0"
},
"main": "src/index.ts",
"module": "src/index.ts",
@@ -24,8 +24,8 @@
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
"@types/eslint": "^9.6.1",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/fuse/src/components/search/search.component.tsx b/packages/fuse/src/components/search/search.component.tsx
index 1e80e4654..bb3282df1 100644
--- a/packages/fuse/src/components/search/search.component.tsx
+++ b/packages/fuse/src/components/search/search.component.tsx
@@ -36,7 +36,7 @@ export class FuseSearchComponent extends Component {
console.warn("fuse is not ready! Did you forget to call initFuse?");
return [];
}
- this.scope.results = this.fuse?.search(this.scope.searchPattern) || [];
+ this.scope.results = this.fuse?.search(this.scope.searchPattern) || [];
console.debug("on search", this.scope.searchPattern, this.scope.results);
}
diff --git a/packages/history/package.json b/packages/history/package.json
index b1ae581b4..4a2a09a6a 100644
--- a/packages/history/package.json
+++ b/packages/history/package.json
@@ -54,7 +54,7 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index bb169840e..55e20a1cb 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -38,12 +38,12 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/jquery/package.json b/packages/jquery/package.json
index 051ccc64a..e4b95c7fa 100644
--- a/packages/jquery/package.json
+++ b/packages/jquery/package.json
@@ -39,16 +39,16 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-config": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/jsx/package.json b/packages/jsx/package.json
index c0605f09d..4b68dc40e 100644
--- a/packages/jsx/package.json
+++ b/packages/jsx/package.json
@@ -21,8 +21,8 @@
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
"@types/eslint": "^9.6.1",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/jsx/src/jsx.ts b/packages/jsx/src/jsx.ts
index ef81a102c..c65ce03e5 100644
--- a/packages/jsx/src/jsx.ts
+++ b/packages/jsx/src/jsx.ts
@@ -76,6 +76,8 @@ export function renderElement(element: JsxElement | null | undefined): string {
for (const [key, val] of Object.entries(props ?? {})) {
if (val == null) continue;
+ // Skip React/esbuild dev-only props that should never be rendered to DOM
+ if (key === "__self" || key === "__source") continue;
if (typeof val == "boolean" && !isCustomElement(tag)) {
if (val) {
diff --git a/packages/leaflet-map/package.json b/packages/leaflet-map/package.json
index 29dbce6f9..5ab9ccc3c 100644
--- a/packages/leaflet-map/package.json
+++ b/packages/leaflet-map/package.json
@@ -39,15 +39,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/lottie/package.json b/packages/lottie/package.json
index f013ee042..b46c7bb8a 100644
--- a/packages/lottie/package.json
+++ b/packages/lottie/package.json
@@ -26,9 +26,9 @@
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
"@types/eslint": "^9.6.1",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
- "sass": "^1.98.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
+ "sass": "^1.99.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/luxon/package.json b/packages/luxon/package.json
index aa25f488e..333795ca7 100644
--- a/packages/luxon/package.json
+++ b/packages/luxon/package.json
@@ -48,15 +48,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/masonry/package.json b/packages/masonry/package.json
index 154b22cf0..17edde729 100644
--- a/packages/masonry/package.json
+++ b/packages/masonry/package.json
@@ -25,15 +25,15 @@
"@types/imagesloaded": "^4.1.7",
"@types/jest": "^30.0.0",
"@types/masonry-layout": "^4.2.8",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
}
}
diff --git a/packages/moment/package.json b/packages/moment/package.json
index 2d4f6cc3c..b5ca2aa89 100644
--- a/packages/moment/package.json
+++ b/packages/moment/package.json
@@ -51,16 +51,16 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
"jest-ts-webcompat-resolver": "^1.0.1",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/monaco-editor/package.json b/packages/monaco-editor/package.json
index c0e4c6e84..06cfc859f 100644
--- a/packages/monaco-editor/package.json
+++ b/packages/monaco-editor/package.json
@@ -49,15 +49,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/octobercms/package.json b/packages/octobercms/package.json
index 1d390d8cb..0bdad40ab 100644
--- a/packages/octobercms/package.json
+++ b/packages/octobercms/package.json
@@ -38,16 +38,16 @@
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
"@types/jquery": "^4.0.0",
- "@types/node": "^24.12.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/podcast/package.json b/packages/podcast/package.json
index 2b183f061..e6097513b 100644
--- a/packages/podcast/package.json
+++ b/packages/podcast/package.json
@@ -29,9 +29,9 @@
},
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
- "@types/node": "^24.12.0",
+ "@types/node": "^24.12.2",
"concurrently": "^9.2.1",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/router/package.json b/packages/router/package.json
index 1812604e2..bbf607f97 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -50,15 +50,15 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
"@typescript-eslint/experimental-utils": "^5.62.0",
- "@typescript-eslint/parser": "^8.57.2",
- "@typescript-eslint/typescript-estree": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/parser": "^8.58.1",
+ "@typescript-eslint/typescript-estree": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"eslint-visitor-keys": "^5.0.1",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"regexpp": "^3.2.0",
"tsutils": "^3.21.0",
"typescript": "6.0.2"
diff --git a/packages/router/src/binders/dispatch-on-route.binder.spec.ts b/packages/router/src/binders/dispatch-on-route.binder.spec.ts
new file mode 100644
index 000000000..4b3e58c58
--- /dev/null
+++ b/packages/router/src/binders/dispatch-on-route.binder.spec.ts
@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { EventDispatcher } from "@ribajs/events";
+import { DispatchOnRouteBinder } from "./dispatch-on-route.binder.js";
+
+/**
+ * Minimal Binder harness: instantiate directly, call bind/routine/unbind.
+ * We bypass the full view pipeline and drive the lifecycle hooks the same way
+ * the view does.
+ */
+function makeBinder(el: HTMLElement, modifier: "match" | "unmatch") {
+ const binder = new DispatchOnRouteBinder();
+ binder.el = el;
+ binder.args = [modifier];
+ return binder;
+}
+
+describe("DispatchOnRouteBinder", () => {
+ let el: HTMLElement;
+ let originalPathname: string;
+
+ beforeEach(() => {
+ el = document.createElement("div");
+ document.body.appendChild(el);
+ originalPathname = window.location.pathname;
+ });
+
+ afterEach(() => {
+ el.remove();
+ // Reset history state to avoid bleed between tests
+ window.history.replaceState(null, "", originalPathname);
+ vi.restoreAllMocks();
+ });
+
+ it("fires `route-matched` when URL matches on initial routine", () => {
+ window.history.replaceState(null, "", "/docs");
+ const binder = makeBinder(el, "match");
+ const handler = vi.fn();
+ el.addEventListener("route-matched", handler);
+
+ binder.routine(el, "/docs");
+
+ expect(handler).toHaveBeenCalledTimes(1);
+ expect((handler.mock.calls[0][0] as CustomEvent).detail).toEqual({
+ url: "/docs",
+ });
+ });
+
+ it("does not fire `route-matched` when URL does not match", () => {
+ window.history.replaceState(null, "", "/other");
+ const binder = makeBinder(el, "match");
+ const handler = vi.fn();
+ el.addEventListener("route-matched", handler);
+
+ binder.routine(el, "/docs");
+
+ expect(handler).not.toHaveBeenCalled();
+ });
+
+ it("fires `route-unmatched` in unmatch mode when URL does not match", () => {
+ window.history.replaceState(null, "", "/other");
+ const binder = makeBinder(el, "unmatch");
+ const handler = vi.fn();
+ el.addEventListener("route-unmatched", handler);
+
+ binder.routine(el, "/docs");
+
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("re-evaluates on `newPageReady` dispatcher event", () => {
+ window.history.replaceState(null, "", "/other");
+ const binder = makeBinder(el, "match");
+ const handler = vi.fn();
+ el.addEventListener("route-matched", handler);
+
+ binder.routine(el, "/docs");
+ expect(handler).not.toHaveBeenCalled();
+
+ window.history.replaceState(null, "", "/docs");
+ EventDispatcher.getInstance("main").trigger("newPageReady");
+
+ expect(handler).toHaveBeenCalledTimes(1);
+ });
+
+ it("removes dispatcher listener on unbind", () => {
+ window.history.replaceState(null, "", "/other");
+ const binder = makeBinder(el, "match");
+ const handler = vi.fn();
+ el.addEventListener("route-matched", handler);
+
+ binder.routine(el, "/docs");
+ binder.unbind();
+
+ window.history.replaceState(null, "", "/docs");
+ EventDispatcher.getInstance("main").trigger("newPageReady");
+
+ expect(handler).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/router/src/binders/dispatch-on-route.binder.ts b/packages/router/src/binders/dispatch-on-route.binder.ts
new file mode 100644
index 000000000..ea1013db6
--- /dev/null
+++ b/packages/router/src/binders/dispatch-on-route.binder.ts
@@ -0,0 +1,54 @@
+import { Binder } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { onRoute } from "@ribajs/utils/src/url.js";
+
+/**
+ * Dispatches a CustomEvent on the bound element when the current URL matches
+ * (or explicitly does not match) the bound route value.
+ *
+ * Usage:
+ * rv-dispatch-on-route-match="'/docs'"
+ * → fires `route-matched` when the URL matches `/docs`.
+ * rv-dispatch-on-route-unmatch="'/docs'"
+ * → fires `route-unmatched` when the URL does not match.
+ *
+ * Combine with standard event binders to react without coupling to any service:
+ *
+ */
+export class DispatchOnRouteBinder extends Binder {
+ static key = "dispatch-on-route-*";
+
+ private dispatcher = EventDispatcher.getInstance("main");
+ private url?: string;
+ private mode: "match" | "unmatch" = "match";
+
+ private _onNewPage() {
+ if (!this.url) return;
+ const matches = onRoute(this.url);
+ const shouldFire = this.mode === "match" ? matches : !matches;
+ if (shouldFire) {
+ const eventName =
+ this.mode === "match" ? "route-matched" : "route-unmatched";
+ this.el.dispatchEvent(
+ new CustomEvent(eventName, { detail: { url: this.url } }),
+ );
+ }
+ }
+
+ private onNewPage = this._onNewPage.bind(this);
+
+ unbind() {
+ this.dispatcher.off("newPageReady", this.onNewPage);
+ }
+
+ routine(el: HTMLElement, url: string) {
+ if (this.args === null) {
+ throw new Error("args is null");
+ }
+ this.url = url;
+ this.mode = (this.args[0] as "match" | "unmatch") ?? "match";
+ this.dispatcher.off("newPageReady", this.onNewPage);
+ this.dispatcher.on("newPageReady", this.onNewPage);
+ this.onNewPage();
+ }
+}
diff --git a/packages/router/src/binders/index.ts b/packages/router/src/binders/index.ts
index cd0ddc8ed..c39d7270a 100644
--- a/packages/router/src/binders/index.ts
+++ b/packages/router/src/binders/index.ts
@@ -4,3 +4,4 @@ export * from "./route-class-star.binder.js";
export * from "./route-preload.binder.js";
export * from "./parent-route-class-star.binder.js";
export * from "./route-back-on-star.binder.js";
+export * from "./dispatch-on-route.binder.js";
diff --git a/packages/shopify-easdk/package.json b/packages/shopify-easdk/package.json
index c5b7352de..8412bcbd2 100644
--- a/packages/shopify-easdk/package.json
+++ b/packages/shopify-easdk/package.json
@@ -38,12 +38,12 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/shopify-nest/package.json b/packages/shopify-nest/package.json
index 06faa4e14..edc504542 100644
--- a/packages/shopify-nest/package.json
+++ b/packages/shopify-nest/package.json
@@ -32,8 +32,8 @@
"source": "src/index.ts",
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
- "@types/node": "^24.12.0",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "eslint": "^10.2.0",
"typescript": "6.0.2"
}
}
diff --git a/packages/shopify-tda/package.json b/packages/shopify-tda/package.json
index 525eb64f5..3e663dedf 100644
--- a/packages/shopify-tda/package.json
+++ b/packages/shopify-tda/package.json
@@ -38,13 +38,13 @@
"@ribajs/eslint-config": "workspace:^",
"@ribajs/tsconfig": "workspace:^",
"@types/jest": "^30.0.0",
- "@types/node": "^24.12.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@types/node": "^24.12.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"typescript": "6.0.2"
},
"dependencies": {
diff --git a/packages/shopify-tda/src/components/instagram/instagram.component.html b/packages/shopify-tda/src/components/instagram/instagram.component.html
index 9110124bc..88ee6dcdf 100644
--- a/packages/shopify-tda/src/components/instagram/instagram.component.html
+++ b/packages/shopify-tda/src/components/instagram/instagram.component.html
@@ -1,13 +1,13 @@
{% comment %} IMAGE {% endcomment %}
-
+
{% comment %} CAROUSEL_ALBUM {% endcomment %}
-
-
+
+
{% comment %} VIDEO {% endcomment %}
-
+
Your browser does not support the video tag.
diff --git a/packages/shopify/package.json b/packages/shopify/package.json
index 4df83e0d0..7e45daac5 100644
--- a/packages/shopify/package.json
+++ b/packages/shopify/package.json
@@ -52,20 +52,20 @@
"@types/debug": "^4.1.13",
"@types/jest": "^30.0.0",
"@types/lodash": "^4.17.24",
- "@types/node": "^24.12.0",
+ "@types/node": "^24.12.2",
"@types/prettier": "^3.0.0",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
"debug": "^4.4.3",
- "eslint": "^10.1.0",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"graceful-fs": "^4.2.11",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
+ "prettier": "^3.8.2",
"terser": "^5.46.1",
- "ts-jest": "^29.4.6",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
},
"optionalDependencies": {
diff --git a/packages/ssr/package.json b/packages/ssr/package.json
index 2d42c3240..0045f1a9a 100644
--- a/packages/ssr/package.json
+++ b/packages/ssr/package.json
@@ -26,15 +26,15 @@
"@types/imagesloaded": "^4.1.7",
"@types/jest": "^30.0.0",
"@types/masonry-layout": "^4.2.8",
- "@typescript-eslint/eslint-plugin": "^8.57.2",
- "@typescript-eslint/parser": "^8.57.2",
- "eslint": "^10.1.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"jest": "^30.3.0",
"jest-extended": "^7.0.0",
- "prettier": "^3.8.1",
- "ts-jest": "^29.4.6",
+ "prettier": "^3.8.2",
+ "ts-jest": "^29.4.9",
"typescript": "6.0.2"
}
}
diff --git a/packages/strapi/package.json b/packages/strapi/package.json
index 8241f8fd9..ed52f9611 100644
--- a/packages/strapi/package.json
+++ b/packages/strapi/package.json
@@ -17,6 +17,6 @@
"source": "src/index.ts",
"devDependencies": {
"@ribajs/tsconfig": "workspace:^",
- "@types/node": "^24.12.0"
+ "@types/node": "^24.12.2"
}
}
diff --git a/packages/tw/package.json b/packages/tw/package.json
new file mode 100644
index 000000000..5bf976449
--- /dev/null
+++ b/packages/tw/package.json
@@ -0,0 +1,74 @@
+{
+ "name": "@ribajs/tw",
+ "description": "Tailwind CSS module for Riba.js",
+ "version": "2.0.0-rc.23",
+ "type": "module",
+ "engines": {
+ "node": ">=24.0.0"
+ },
+ "author": "Pascal Garber ",
+ "contributors": [],
+ "url": "https://github.com/ribajs/riba/tree/master/packages/tw",
+ "homepage": "https://ribajs.com/",
+ "main": "src/index.ts",
+ "module": "src/index.ts",
+ "source": "src/index.ts",
+ "license": "MIT",
+ "licenses": [
+ {
+ "type": "MIT",
+ "url": "https://github.com/ribajs/riba/blob/master/LICENSE"
+ }
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/ribajs/riba.git"
+ },
+ "keywords": [
+ "Tailwind",
+ "Tailwind CSS",
+ "Art+Code Studio",
+ "Riba",
+ "Rivets",
+ "tinybind",
+ "SPA",
+ "TypeScript",
+ "Browser"
+ ],
+ "scripts": {
+ "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+ "watch": "yarn run build:module --watch",
+ "build:module": "tsc",
+ "clean": "rm -rf ./dist ./lib",
+ "check": "tsc --noEmit"
+ },
+ "files": [
+ "/src",
+ "/dist"
+ ],
+ "devDependencies": {
+ "@ribajs/eslint-config": "workspace:^",
+ "@ribajs/tsconfig": "workspace:^",
+ "@ribajs/types": "workspace:^",
+ "@types/jest": "^30.0.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.1",
+ "@typescript-eslint/parser": "^8.58.1",
+ "@yarnpkg/pnpify": "^4.1.6",
+ "eslint": "^10.2.0",
+ "eslint-config-prettier": "^10.1.8",
+ "eslint-plugin-prettier": "^5.5.5",
+ "prettier": "^3.8.2",
+ "typescript": "6.0.2"
+ },
+ "dependencies": {
+ "@floating-ui/dom": "^1.7.6",
+ "@ribajs/core": "workspace:^",
+ "@ribajs/events": "workspace:^",
+ "@ribajs/extras": "workspace:^",
+ "@ribajs/jsx": "workspace:^",
+ "@ribajs/utils": "workspace:^"
+ },
+ "bugs": {
+ "url": "https://github.com/ribajs/riba/issues"
+ }
+}
diff --git a/packages/tw/src/binders/index.ts b/packages/tw/src/binders/index.ts
new file mode 100644
index 000000000..5aedb3fd5
--- /dev/null
+++ b/packages/tw/src/binders/index.ts
@@ -0,0 +1,10 @@
+// Abstract binder not exported — cannot be used as a concrete binder
+// export { TwAbstractBreakpointBinder } from "./tw-abstract-breakpoint.binder.js";
+export { TwAttributeBreakpointBinder } from "./tw-attribute-breakpoint.binder.js";
+export { TwComponentAttributeBreakpointBinder } from "./tw-co-attribute-breakpoint.binder.js";
+export { DropdownBinder } from "./tw-dropdown.binder.js";
+export { PopoverBinder } from "./tw-popover.binder.js";
+export { TooltipBinder } from "./tw-tooltip.binder.js";
+export { ToggleCollapseOnEventBinder } from "./tw-toggle-collapse-on-event.binder.js";
+export { ToggleClassBinder } from "./tw-toggle-class.binder.js";
+export { ToggleAttributeBinder } from "./tw-toggle-attribute.binder.js";
diff --git a/packages/tw/src/binders/tw-abstract-breakpoint.binder.ts b/packages/tw/src/binders/tw-abstract-breakpoint.binder.ts
new file mode 100644
index 000000000..cf9bde5ba
--- /dev/null
+++ b/packages/tw/src/binders/tw-abstract-breakpoint.binder.ts
@@ -0,0 +1,146 @@
+import { BasicComponent, Binder, View } from "@ribajs/core";
+import { TwService } from "../services/tw.service.js";
+import {
+ parseJsonString,
+ jsonStringify,
+ camelCase,
+} from "@ribajs/utils/src/type.js";
+
+export abstract class TwAbstractBreakpointBinder<
+ E extends HTMLElement = HTMLElement,
+> extends Binder {
+ protected abstract defaultAttributeBinder: Binder<
+ any,
+ HTMLElement | BasicComponent
+ >;
+ protected tw: TwService;
+ protected breakpoint: string;
+ protected attributeName: string;
+ protected val?: any;
+
+ constructor(
+ view: View,
+ el: E,
+ type: string | null,
+ name: string,
+ keypath: string | undefined,
+ formatters: string[] | null,
+ identifier: string | null,
+ ) {
+ super(view, el, type, name, keypath, formatters, identifier);
+ this.tw = TwService.getSingleton();
+ if (this.args.length !== 2) {
+ throw new Error(
+ "The TwAbstractBreakpointBinder was not initialized correctly!",
+ );
+ }
+ const breakpoint = this.args[0].toString();
+ const attributeName = this.args[1].toString();
+ if (!this.tw.breakpointNames.includes(breakpoint)) {
+ throw new Error(
+ `Unknown breakpoint "${breakpoint}"! You can define breakpoints at the initialization of the twModule.`,
+ );
+ }
+ this.breakpoint = breakpoint;
+ this.attributeName = attributeName;
+ }
+
+ protected onBreakpointChanges() {
+ this.setAttributeOnMatch();
+ }
+
+ protected setAttributeOnMatch() {
+ if (!this.tw.activeBreakpoint) return;
+ if (this.isBreakpointMatch(this.breakpoint)) {
+ return this.defaultAttributeBinder.routine(this.el, this.val);
+ }
+ if (this.breakpointUnhandled(this.tw.activeBreakpoint.name)) {
+ this.defaultAttributeBinder.routine(this.el, undefined);
+ }
+ }
+
+ protected isBreakpointMatch(breakpoint = this.breakpoint) {
+ if (!this.tw.activeBreakpoint) {
+ return false;
+ }
+ if (this.tw.activeBreakpoint.name === breakpoint) {
+ return true;
+ }
+ const myBreakpoints = this.myBreakpoints(breakpoint);
+ if (myBreakpoints.includes(this.tw.activeBreakpoint.name)) {
+ return true;
+ }
+ return false;
+ }
+
+ protected myBreakpoints(breakpoint = this.breakpoint) {
+ const myBreakpoints: string[] = [breakpoint];
+ let nextBreakpoint: string | null = breakpoint;
+ while (nextBreakpoint) {
+ nextBreakpoint = this.tw.getNextBreakpointByName(nextBreakpoint);
+ if (!nextBreakpoint || this.breakpointHandledByAnother(nextBreakpoint)) {
+ break;
+ }
+ myBreakpoints.push(nextBreakpoint);
+ }
+ return myBreakpoints;
+ }
+
+ protected breakpointHandledByAnother(name: string) {
+ const handledBreakpoints = this.getHandledBreakpoints();
+ return handledBreakpoints.includes(name);
+ }
+
+ protected breakpointUnhandled(breakpoint: string) {
+ let prevBreakpoint: string | null = breakpoint;
+ let unhandled = true;
+ while (prevBreakpoint && unhandled) {
+ if (this.breakpointHandledByAnother(prevBreakpoint)) {
+ unhandled = false;
+ break;
+ }
+ prevBreakpoint = this.tw.getPrevBreakpointByName(prevBreakpoint);
+ if (!prevBreakpoint) {
+ break;
+ }
+ }
+ return unhandled;
+ }
+
+ protected addToHandledBreakpoints() {
+ const handledBreakpoints = this.getHandledBreakpoints();
+ handledBreakpoints.push(this.breakpoint);
+ this.el.dataset[camelCase(this.attributeName)] =
+ jsonStringify(handledBreakpoints);
+ }
+
+ protected getHandledBreakpoints() {
+ const handledBreakpoints: string[] = parseJsonString(
+ this.el.dataset[camelCase(this.attributeName)] || "[]",
+ );
+ if (!Array.isArray(handledBreakpoints)) {
+ throw new Error("breakpoints dataset has unsupported values!");
+ }
+ return handledBreakpoints;
+ }
+
+ bind(el: HTMLElement) {
+ this.tw.on("breakpoint:changed", this.onBreakpointChanges, this);
+ if (typeof this.defaultAttributeBinder.bind === "function") {
+ this.defaultAttributeBinder.bind(el);
+ }
+ }
+
+ routine(el: HTMLElement, newValue: any) {
+ this.addToHandledBreakpoints();
+ this.val = newValue;
+ this.setAttributeOnMatch();
+ }
+
+ unbind(el: HTMLElement) {
+ this.tw?.off("breakpoint:changed", this.onBreakpointChanges, this);
+ if (typeof this.defaultAttributeBinder.unbind === "function") {
+ this.defaultAttributeBinder.unbind(el);
+ }
+ }
+}
diff --git a/packages/tw/src/binders/tw-abstract-toggle.binder.ts b/packages/tw/src/binders/tw-abstract-toggle.binder.ts
new file mode 100644
index 000000000..405644174
--- /dev/null
+++ b/packages/tw/src/binders/tw-abstract-toggle.binder.ts
@@ -0,0 +1,118 @@
+import { Binder } from "@ribajs/core";
+import { EventDispatcher } from "@ribajs/events";
+import { TOGGLE_BUTTON } from "../constants/index.js";
+
+export interface ToggleEventNames {
+ readonly added: string;
+ readonly removed: string;
+}
+
+type ToggleState = "added" | "removed" | "off";
+
+/**
+ * Shared base for `tw-toggle-class-*` and `tw-toggle-attribute-*`.
+ *
+ * Subclasses provide the DOM-mutation primitives; this base handles the state
+ * machine + the wiring to the `tw-toggle-button` EventDispatcher namespace.
+ */
+export abstract class AbstractToggleBinder<
+ E extends HTMLElement = HTMLElement,
+> extends Binder {
+ protected toggleButtonEvents?: EventDispatcher;
+ protected state: ToggleState = "off";
+
+ /** The event names dispatched on the bound element for this toggle kind. */
+ protected abstract readonly eventNames: ToggleEventNames;
+
+ /** Apply the "added" side effect on the element. */
+ protected abstract applyAdd(el: E, value: string): void;
+
+ /** Apply the "removed" side effect on the element. */
+ protected abstract applyRemove(el: E, value: string): void;
+
+ /** Detect whether the element currently has the toggle applied. */
+ protected abstract detectState(el: E, value: string): boolean;
+
+ private _triggerState() {
+ this.toggleButtonEvents?.trigger(
+ TOGGLE_BUTTON.eventNames.state,
+ this.state,
+ );
+ }
+
+ protected triggerState = this._triggerState.bind(this);
+
+ private _onToggle() {
+ this.toggle(this.el);
+ }
+
+ protected onToggle = this._onToggle.bind(this);
+
+ protected toggle(el: E) {
+ if (this.state === "removed") {
+ this.add(el);
+ } else {
+ this.remove(el);
+ }
+ }
+
+ protected remove(el: E) {
+ const value = this.args[0] as string;
+ this.applyRemove(el, value);
+ this.state = "removed";
+ el.dispatchEvent(
+ new CustomEvent(this.eventNames.removed, {
+ detail: { value },
+ }),
+ );
+ this.triggerState();
+ }
+
+ protected add(el: E) {
+ const value = this.args[0] as string;
+ this.applyAdd(el, value);
+ this.state = "added";
+ el.dispatchEvent(
+ new CustomEvent(this.eventNames.added, {
+ detail: { value },
+ }),
+ );
+ this.triggerState();
+ }
+
+ bind(el: E) {
+ const value = this.args[0] as string;
+ this.state = this.detectState(el, value) ? "added" : "removed";
+ }
+
+ unbind() {
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.toggle,
+ this.onToggle,
+ this,
+ );
+ this.toggleButtonEvents?.off(
+ TOGGLE_BUTTON.eventNames.init,
+ this.triggerState,
+ this,
+ );
+ }
+
+ routine(el: E, newId: string) {
+ const oldId = this._getValue(el);
+ let toggleButton = this.toggleButtonEvents;
+ if (oldId && toggleButton) {
+ toggleButton.off(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.off(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+
+ if (!this.toggleButtonEvents) {
+ this.toggleButtonEvents = new EventDispatcher(
+ TOGGLE_BUTTON.nsPrefix + newId,
+ );
+ toggleButton = this.toggleButtonEvents;
+ toggleButton.on(TOGGLE_BUTTON.eventNames.toggle, this.onToggle, this);
+ toggleButton.on(TOGGLE_BUTTON.eventNames.init, this.triggerState, this);
+ }
+ }
+}
diff --git a/packages/tw/src/binders/tw-attribute-breakpoint.binder.ts b/packages/tw/src/binders/tw-attribute-breakpoint.binder.ts
new file mode 100644
index 000000000..4852df958
--- /dev/null
+++ b/packages/tw/src/binders/tw-attribute-breakpoint.binder.ts
@@ -0,0 +1,43 @@
+import { AttributeBinder, View } from "@ribajs/core";
+import { TwAbstractBreakpointBinder } from "./tw-abstract-breakpoint.binder.js";
+
+/**
+ * Responsive attribute breakpoint binder.
+ *
+ * Sets HTML attributes only at certain breakpoints (viewport widths).
+ *
+ * @example
+ * ```html
+ * {
+ static key = "tw-attr-*-*";
+
+ defaultAttributeBinder: AttributeBinder;
+
+ constructor(
+ view: View,
+ el: HTMLElement,
+ type: string | null,
+ name: string,
+ keypath: string | undefined,
+ formatters: string[] | null,
+ identifier: string | null,
+ ) {
+ super(view, el, type, name, keypath, formatters, identifier);
+ this.defaultAttributeBinder = new AttributeBinder(
+ view,
+ el,
+ this.attributeName,
+ name,
+ keypath,
+ formatters,
+ "*",
+ );
+ }
+}
diff --git a/packages/tw/src/binders/tw-co-attribute-breakpoint.binder.ts b/packages/tw/src/binders/tw-co-attribute-breakpoint.binder.ts
new file mode 100644
index 000000000..6134d6587
--- /dev/null
+++ b/packages/tw/src/binders/tw-co-attribute-breakpoint.binder.ts
@@ -0,0 +1,42 @@
+import { BasicComponent, ComponentAttributeBinder, View } from "@ribajs/core";
+import { TwAbstractBreakpointBinder } from "./tw-abstract-breakpoint.binder.js";
+
+/**
+ * Responsive component attribute breakpoint binder.
+ *
+ * Passes attributes to Riba Components that should only be set at certain breakpoints.
+ *
+ * @example
+ * ```html
+ * {
+ static key = "tw-co-*-*";
+
+ defaultAttributeBinder: ComponentAttributeBinder;
+
+ constructor(
+ view: View,
+ el: BasicComponent,
+ type: string | null,
+ name: string,
+ keypath: string | undefined,
+ formatters: string[] | null,
+ identifier: string | null,
+ ) {
+ super(view, el, type, name, keypath, formatters, identifier);
+ this.defaultAttributeBinder = new ComponentAttributeBinder(
+ view,
+ el,
+ `co-${this.attributeName}`,
+ name,
+ keypath,
+ formatters,
+ ComponentAttributeBinder.key,
+ );
+ }
+}
diff --git a/packages/tw/src/binders/tw-dropdown.binder.ts b/packages/tw/src/binders/tw-dropdown.binder.ts
new file mode 100644
index 000000000..55ef2f9d9
--- /dev/null
+++ b/packages/tw/src/binders/tw-dropdown.binder.ts
@@ -0,0 +1,46 @@
+import { Binder } from "@ribajs/core";
+import { DropdownService } from "../services/dropdown.service.js";
+import type { Placement } from "@floating-ui/dom";
+
+/**
+ * Initializes a dropdown on an element using Floating UI for positioning.
+ */
+export class DropdownBinder extends Binder<
+ Partial<{ placement: Placement }>,
+ HTMLElement
+> {
+ static key = "tw-dropdown";
+
+ private toggler?: HTMLElement;
+ private menu?: HTMLElement;
+ private dropdownService?: DropdownService;
+
+ bind(el: HTMLElement) {
+ this.toggler = ((el.classList.contains("dropdown-toggle")
+ ? el
+ : el.querySelector(".dropdown-toggle")) || el) as HTMLElement;
+
+ this.menu = (el.querySelector("[role='menu']") ||
+ el.querySelector(".dropdown-menu")) as HTMLElement | undefined;
+ }
+
+ routine(el: HTMLElement, options: Partial<{ placement: Placement }> = {}) {
+ if (!this.toggler) {
+ throw new Error("No dropdown toggle element found!");
+ }
+ if (!this.menu) {
+ throw new Error(
+ 'No dropdown menu element found! Expected [role="menu"] or .dropdown-menu',
+ );
+ }
+
+ if (this.dropdownService) {
+ this.dropdownService.dispose();
+ }
+
+ this.dropdownService = new DropdownService(this.toggler, this.menu, {
+ placement: options.placement,
+ });
+ this.dropdownService.hide();
+ }
+}
diff --git a/packages/tw/src/binders/tw-popover.binder.ts b/packages/tw/src/binders/tw-popover.binder.ts
new file mode 100644
index 000000000..0326a9339
--- /dev/null
+++ b/packages/tw/src/binders/tw-popover.binder.ts
@@ -0,0 +1,110 @@
+import { Binder } from "@ribajs/core";
+import { PopoverService } from "../services/popover.service.js";
+import type { Placement } from "@floating-ui/dom";
+
+export interface TwPopoverOptions {
+ placement?: Placement;
+ arrow?: boolean;
+ popoverSelector?: string;
+}
+
+/**
+ * Initializes a popover on an element using Floating UI for positioning.
+ *
+ * Methods "show", "hide", "toggle", "dispose" can be called by dispatching
+ * a `trigger-${methodName}` event on the bound element.
+ */
+export class PopoverBinder extends Binder<
+ string | TwPopoverOptions,
+ HTMLElement
+> {
+ static key = "tw-popover";
+
+ private popoverService?: PopoverService;
+ private listeners: { [key: string]: EventListener } = {};
+
+ routine(el: HTMLElement, optionsOrSelector: string | TwPopoverOptions) {
+ let options: TwPopoverOptions = {};
+
+ if (typeof optionsOrSelector === "string") {
+ options.popoverSelector = optionsOrSelector;
+ } else if (typeof optionsOrSelector === "object") {
+ options = { ...optionsOrSelector };
+ }
+
+ const popoverSelector = options.popoverSelector || "[data-tw-popover]";
+ const popoverEl = el.querySelector(popoverSelector);
+
+ if (!popoverEl) {
+ console.warn(
+ `[tw-popover] No popover element found with selector "${popoverSelector}"`,
+ );
+ return;
+ }
+
+ // Destroy previous popover if it already exists
+ if (this.popoverService) {
+ this.popoverService.dispose();
+ }
+
+ const popoverService = new PopoverService(el, popoverEl, {
+ placement: options.placement,
+ arrow: options.arrow,
+ });
+
+ this.popoverService = popoverService;
+
+ /*
+ * Methods "show", "hide", etc. can be called by dispatching an
+ * event `trigger-${methodName}` on the bound element.
+ */
+ const methodNames: (keyof PopoverService)[] = [
+ "show",
+ "hide",
+ "toggle",
+ "dispose",
+ ];
+
+ // Remove listeners of previous popover if there already was one
+ if (this.listeners) {
+ for (const [trigger, listener] of Object.entries(this.listeners)) {
+ this.el.removeEventListener(trigger, listener as EventListener);
+ }
+ }
+
+ this.listeners = Object.create(null);
+ for (const methodName of methodNames) {
+ if (
+ popoverService[methodName] &&
+ typeof popoverService[methodName] === "function"
+ ) {
+ const trigger = `trigger-${String(methodName)}`;
+ const listener = (popoverService[methodName] as any).bind(
+ popoverService,
+ );
+ this.el.addEventListener(trigger, listener);
+ this.listeners[trigger] = listener;
+ }
+ }
+ }
+
+ bind(el: HTMLElement) {
+ // Inform ancestors that this popover was bound
+ el.dispatchEvent(
+ new CustomEvent("bound.tw.popover", { bubbles: true, cancelable: true }),
+ );
+ }
+
+ unbind() {
+ // Destroy popover if it already exists
+ if (this.popoverService) {
+ this.popoverService.dispose();
+ }
+ // Remove listeners if there are any
+ if (this.listeners) {
+ for (const [trigger, listener] of Object.entries(this.listeners)) {
+ this.el.removeEventListener(trigger, listener as EventListener);
+ }
+ }
+ }
+}
diff --git a/packages/tw/src/binders/tw-toggle-attribute.binder.ts b/packages/tw/src/binders/tw-toggle-attribute.binder.ts
new file mode 100644
index 000000000..210b8ae18
--- /dev/null
+++ b/packages/tw/src/binders/tw-toggle-attribute.binder.ts
@@ -0,0 +1,32 @@
+import { TOGGLE_ATTRIBUTE } from "../constants/index.js";
+import {
+ AbstractToggleBinder,
+ ToggleEventNames,
+} from "./tw-abstract-toggle.binder.js";
+
+/**
+ * Adds / removes the attribute on click on the tw-toggle-button with the same id.
+ * E.g. with this binder you can toggle a hidden attribute to show / hide the element.
+ *
+ * Events:
+ * - `attribute-removed`
+ * - `attribute-added`
+ */
+export class ToggleAttributeBinder extends AbstractToggleBinder {
+ static key = "tw-toggle-attribute-*";
+
+ protected readonly eventNames: ToggleEventNames =
+ TOGGLE_ATTRIBUTE.elEventNames;
+
+ protected applyAdd(el: HTMLElement, attributeName: string) {
+ el.setAttribute(attributeName, attributeName);
+ }
+
+ protected applyRemove(el: HTMLElement, attributeName: string) {
+ el.removeAttribute(attributeName);
+ }
+
+ protected detectState(el: HTMLElement, attributeName: string): boolean {
+ return el.hasAttribute(attributeName);
+ }
+}
diff --git a/packages/tw/src/binders/tw-toggle-class.binder.ts b/packages/tw/src/binders/tw-toggle-class.binder.ts
new file mode 100644
index 000000000..b6754e3f9
--- /dev/null
+++ b/packages/tw/src/binders/tw-toggle-class.binder.ts
@@ -0,0 +1,30 @@
+import { TOGGLE_CLASS } from "../constants/index.js";
+import {
+ AbstractToggleBinder,
+ ToggleEventNames,
+} from "./tw-abstract-toggle.binder.js";
+
+/**
+ * Adds / removes the class on click on the tw-toggle-button with the same id.
+ *
+ * Events:
+ * - `class-removed`
+ * - `class-added`
+ */
+export class ToggleClassBinder extends AbstractToggleBinder {
+ static key = "tw-toggle-class-*";
+
+ protected readonly eventNames: ToggleEventNames = TOGGLE_CLASS.elEventNames;
+
+ protected applyAdd(el: HTMLButtonElement, className: string) {
+ el.classList.add(className);
+ }
+
+ protected applyRemove(el: HTMLButtonElement, className: string) {
+ el.classList.remove(className);
+ }
+
+ protected detectState(el: HTMLButtonElement, className: string): boolean {
+ return el.classList.contains(className);
+ }
+}
diff --git a/packages/tw/src/binders/tw-toggle-collapse-on-event.binder.ts b/packages/tw/src/binders/tw-toggle-collapse-on-event.binder.ts
new file mode 100644
index 000000000..8ef1f8a43
--- /dev/null
+++ b/packages/tw/src/binders/tw-toggle-collapse-on-event.binder.ts
@@ -0,0 +1,60 @@
+import { Binder } from "@ribajs/core";
+import { CollapseService } from "../services/collapse.service.js";
+
+/**
+ * Toggles collapse on target elements when a specified event fires.
+ *
+ * Usage: `rv-tw-toggle-collapse-on-click="'.my-collapsible'"`
+ */
+export class ToggleCollapseOnEventBinder extends Binder {
+ static key = "tw-toggle-collapse-on-*";
+
+ private targets = new Map();
+
+ private _onEvent(event: Event) {
+ event.preventDefault();
+ for (const collapseService of this.targets.values()) {
+ collapseService.toggle();
+ }
+ }
+
+ private onEvent = this._onEvent.bind(this);
+
+ bind(el: HTMLElement) {
+ if (this.args === null) {
+ throw new Error("args is null");
+ }
+ const eventName = this.args[0] as string;
+ el.addEventListener(eventName, this.onEvent);
+ }
+
+ unbind() {
+ const eventName = this.args[0] as string;
+ this.el.removeEventListener(eventName, this.onEvent);
+ }
+
+ routine(el: HTMLElement, targetSelector: string) {
+ const newTargets = Array.from(
+ document.querySelectorAll(targetSelector),
+ );
+
+ if (newTargets.length <= 0) {
+ console.warn(
+ `[toggleCollapseOnEventBinder] No element with selector "${targetSelector}" found.`,
+ );
+ }
+
+ for (const target of this.targets.keys()) {
+ if (!newTargets.find((x) => x === target)) {
+ this.targets.get(target)?.dispose();
+ this.targets.delete(target);
+ }
+ }
+
+ for (const target of newTargets) {
+ if (!this.targets.has(target)) {
+ this.targets.set(target, new CollapseService(target, { show: false }));
+ }
+ }
+ }
+}
diff --git a/packages/tw/src/binders/tw-tooltip.binder.ts b/packages/tw/src/binders/tw-tooltip.binder.ts
new file mode 100644
index 000000000..0edb18864
--- /dev/null
+++ b/packages/tw/src/binders/tw-tooltip.binder.ts
@@ -0,0 +1,61 @@
+import { Binder } from "@ribajs/core";
+import { TooltipService } from "../services/tooltip.service.js";
+import type { Placement } from "@floating-ui/dom";
+
+export interface TwTooltipOptions {
+ content?: string;
+ placement?: Placement;
+ showDelay?: number;
+ hideDelay?: number;
+}
+
+/**
+ * Initializes a tooltip on an element using Floating UI for positioning.
+ *
+ * Bind a string to set the tooltip content, or an options object for
+ * more control (placement, delays, etc.).
+ */
+export class TooltipBinder extends Binder<
+ string | TwTooltipOptions,
+ HTMLElement
+> {
+ static key = "tw-tooltip";
+
+ private tooltipService?: TooltipService;
+
+ bind(el: HTMLElement) {
+ // Service will be created in routine when content is available
+ }
+
+ routine(el: HTMLElement, optionsOrContent: string | TwTooltipOptions) {
+ let options: TwTooltipOptions = {};
+
+ if (typeof optionsOrContent === "string") {
+ options.content = optionsOrContent;
+ } else if (typeof optionsOrContent === "object") {
+ options = { ...optionsOrContent };
+ }
+
+ if (this.tooltipService) {
+ // Update content if tooltip already exists
+ if (options.content !== undefined) {
+ this.tooltipService.content = options.content;
+ }
+ return;
+ }
+
+ this.tooltipService = new TooltipService(el, {
+ content: options.content,
+ placement: options.placement || "top",
+ showDelay: options.showDelay,
+ hideDelay: options.hideDelay,
+ });
+ }
+
+ unbind() {
+ if (this.tooltipService) {
+ this.tooltipService.dispose();
+ this.tooltipService = undefined;
+ }
+ }
+}
diff --git a/packages/tw/src/components/index.ts b/packages/tw/src/components/index.ts
new file mode 100644
index 000000000..2c61f31d6
--- /dev/null
+++ b/packages/tw/src/components/index.ts
@@ -0,0 +1,41 @@
+// Phase 2: Core components
+export { TwIconComponent } from "./tw-icon/tw-icon.component.js";
+export { TwButtonComponent } from "./tw-button/tw-button.component.js";
+export { TwToggleButtonComponent } from "./tw-toggle-button/tw-toggle-button.component.js";
+export { TwCollapseComponent } from "./tw-collapse/tw-collapse.component.js";
+export { TwAccordionComponent } from "./tw-accordion/tw-accordion.component.js";
+export { TwToastItemComponent } from "./tw-toast-item/tw-toast-item.component.js";
+export { TwModalItemComponent } from "./tw-modal-item/tw-modal-item.component.js";
+export { TwNotificationContainerComponent } from "./tw-notification-container/tw-notification-container.component.js";
+
+// Phase 3: Interactive components
+export { TwDropdownComponent } from "./tw-dropdown/tw-dropdown.component.js";
+export { TwNavbarComponent } from "./tw-navbar/tw-navbar.component.js";
+export { TwTabsComponent } from "./tw-tabs/tw-tabs.component.js";
+export { TwSidebarComponent } from "./tw-sidebar/tw-sidebar.component.js";
+export { TwSlideshowComponent } from "./tw-slideshow/tw-slideshow.component.js";
+export { TwCarouselComponent } from "./tw-carousel/tw-carousel.component.js";
+export { TwSlideVideoComponent } from "./tw-slide-video/tw-slide-video.component.js";
+export { TwSliderComponent } from "./tw-slider/tw-slider.component.js";
+export { TwScrollspyComponent } from "./tw-scrollspy/tw-scrollspy.component.js";
+export { TwFormComponent } from "./tw-form/tw-form.component.js";
+export { TwColorpickerComponent } from "./tw-colorpicker/tw-colorpicker.component.js";
+export { TwShareComponent } from "./tw-share/tw-share.component.js";
+export { TwTaggedImageComponent } from "./tw-tagged-image/tw-tagged-image.component.js";
+export { TwContentsComponent } from "./tw-contents/tw-contents.component.js";
+export { TwThemeButtonComponent } from "./tw-theme-button/tw-theme-button.component.js";
+
+// Phase 4: New TW-native components
+export { TwAlertComponent } from "./tw-alert/tw-alert.component.js";
+export { TwBadgeComponent } from "./tw-badge/tw-badge.component.js";
+export { TwAvatarComponent } from "./tw-avatar/tw-avatar.component.js";
+export { TwCardComponent } from "./tw-card/tw-card.component.js";
+export { TwSkeletonComponent } from "./tw-skeleton/tw-skeleton.component.js";
+export { TwBreadcrumbComponent } from "./tw-breadcrumb/tw-breadcrumb.component.js";
+export { TwKbdComponent } from "./tw-kbd/tw-kbd.component.js";
+export { TwPaginationComponent } from "./tw-pagination/tw-pagination.component.js";
+export { TwStepsComponent } from "./tw-steps/tw-steps.component.js";
+export { TwProgressComponent } from "./tw-progress/tw-progress.component.js";
+export { TwRatingComponent } from "./tw-rating/tw-rating.component.js";
+export { TwSwapComponent } from "./tw-swap/tw-swap.component.js";
+export { TwTooltipComponent } from "./tw-tooltip/tw-tooltip.component.js";
diff --git a/packages/tw/src/components/tw-accordion/tw-accordion.component.html b/packages/tw/src/components/tw-accordion/tw-accordion.component.html
new file mode 100644
index 000000000..6ce922922
--- /dev/null
+++ b/packages/tw/src/components/tw-accordion/tw-accordion.component.html
@@ -0,0 +1,27 @@
+
diff --git a/packages/tw/src/components/tw-accordion/tw-accordion.component.spec.ts b/packages/tw/src/components/tw-accordion/tw-accordion.component.spec.ts
new file mode 100644
index 000000000..726bcf09d
--- /dev/null
+++ b/packages/tw/src/components/tw-accordion/tw-accordion.component.spec.ts
@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import template from "./tw-accordion.component.html?raw";
+
+describe("TwAccordionComponent template", () => {
+ it("contains the accordion structure classes", () => {
+ expect(template).toContain("divide-y");
+ expect(template).toContain("rounded-lg");
+ expect(template).toContain("border");
+ expect(template).toContain("tw-accordion-item");
+ expect(template).toContain("tw-accordion-header");
+ });
+
+ it("has a toggle button with rv-on-click binding", () => {
+ expect(template).toContain("rv-on-click");
+ });
+
+ it("has aria-expanded binding for accessibility", () => {
+ expect(template).toContain("rv-aria-expanded");
+ });
+
+ it("does not contain oversized SVG (has h-4 w-4 classes)", () => {
+ expect(template).toContain("h-4 w-4");
+ });
+
+ it("uses transition for the chevron icon rotation", () => {
+ expect(template).toContain("transition-transform");
+ expect(template).toContain("rv-class-rotate-180");
+ });
+
+ it("renders item title with rv-html binding", () => {
+ expect(template).toContain('rv-html="item.title"');
+ });
+
+ it("renders item content with rv-template binding", () => {
+ expect(template).toContain('rv-template="item.content"');
+ });
+});
diff --git a/packages/tw/src/components/tw-accordion/tw-accordion.component.ts b/packages/tw/src/components/tw-accordion/tw-accordion.component.ts
new file mode 100644
index 000000000..b5b26eba1
--- /dev/null
+++ b/packages/tw/src/components/tw-accordion/tw-accordion.component.ts
@@ -0,0 +1,184 @@
+import { TemplatesComponent } from "@ribajs/core";
+import { CollapseService } from "../../services/collapse.service.js";
+import template from "./tw-accordion.component.html?raw";
+
+interface AccordionItem {
+ title: string;
+ content: string;
+ show?: boolean;
+ iconDirection?: string;
+ handle?: string;
+}
+
+export class TwAccordionComponent extends TemplatesComponent {
+ public static tagName = "tw-accordion";
+
+ static get observedAttributes(): string[] {
+ return [
+ "items",
+ "collapse-icon-src",
+ "collapse-icon-size",
+ "show-only-one",
+ ];
+ }
+
+ protected autobind = true;
+
+ protected templateAttributes = [
+ { name: "title", required: true },
+ { name: "show", required: false, type: "boolean" as const },
+ { name: "icon-direction", required: false },
+ ];
+
+ protected collapseServices = new Map();
+
+ public scope = {
+ items: [] as AccordionItem[],
+ toggle: this.toggle.bind(this),
+ show: this.showItem.bind(this),
+ hide: this.hideItem.bind(this),
+ collapseIconSrc: undefined as string | undefined,
+ collapseIconSize: 16,
+ showOnlyOne: true,
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwAccordionComponent.observedAttributes);
+ }
+
+ protected async afterBind() {
+ await super.afterBind();
+ // Initialize CollapseService for each item so the initial state is correct
+ this.scope.items.forEach((item, index) => {
+ const el = this.getCollapseEl(index);
+ if (el) {
+ el.style.transition = "max-height 0.3s ease";
+ const service = new CollapseService(el, { show: !!item.show });
+ this.collapseServices.set(index, service);
+ }
+ });
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected transformTemplateAttributes(
+ attributes: Record,
+ index: number,
+ ): AccordionItem {
+ const result = super.transformTemplateAttributes(attributes, index);
+ result.handle =
+ result.handle || (result.title || "").toLowerCase().replace(/\s+/g, "-");
+ result.show = !!result.show;
+ result.iconDirection =
+ result.iconDirection || (result.show ? "up" : "down");
+ return result;
+ }
+
+ public toggle(item: AccordionItem, index: number) {
+ const el = this.getCollapseEl(index);
+ if (!el) return;
+
+ const service = this.getOrCreateService(el, index, !item.show);
+
+ if (item.show) {
+ this.onHide(item, index);
+ service.hide();
+ } else {
+ if (this.scope.showOnlyOne) {
+ this.hideAll(index);
+ }
+ this.onShow(item, index);
+ service.show();
+ }
+ }
+
+ public showItem(item: AccordionItem, index: number) {
+ const el = this.getCollapseEl(index);
+ if (!el) return;
+
+ if (this.scope.showOnlyOne) {
+ this.hideAll(index);
+ }
+
+ const service = this.getOrCreateService(el, index, false);
+ service.show();
+ this.onShow(item, index);
+ }
+
+ public hideItem(item: AccordionItem, index: number) {
+ const el = this.getCollapseEl(index);
+ if (!el) return;
+
+ const service = this.getOrCreateService(el, index, true);
+ service.hide();
+ this.onHide(item, index);
+ }
+
+ protected hideAll(exceptIndex?: number) {
+ this.scope.items.forEach((item, i) => {
+ if (i !== exceptIndex && item.show) {
+ this.hideItem(item, i);
+ }
+ });
+ }
+
+ protected getCollapseEl(index: number): HTMLElement | null {
+ return this.querySelector(`[data-index="${index}"]`);
+ }
+
+ protected getOrCreateService(
+ el: HTMLElement,
+ index: number,
+ startHidden: boolean,
+ ): CollapseService {
+ let service = this.collapseServices.get(index);
+ if (!service) {
+ el.style.transition = "max-height 0.3s ease";
+ service = new CollapseService(el, { show: !startHidden });
+ this.collapseServices.set(index, service);
+ }
+ return service;
+ }
+
+ protected onShow(item: AccordionItem, _index: number) {
+ item.show = true;
+ item.iconDirection = "up";
+ this.dispatchEvent(
+ new CustomEvent("visibility-changed", {
+ detail: { item, show: true },
+ }),
+ );
+ }
+
+ protected onHide(item: AccordionItem, _index: number) {
+ item.show = false;
+ item.iconDirection = "down";
+ this.dispatchEvent(
+ new CustomEvent("visibility-changed", {
+ detail: { item, show: false },
+ }),
+ );
+ }
+
+ protected disconnectedCallback() {
+ super.disconnectedCallback();
+ this.collapseServices.forEach((service) => service.dispose());
+ this.collapseServices.clear();
+ }
+
+ protected template() {
+ if (this.hasChildNodes()) {
+ const children = Array.from(this.children);
+ const hasNonTemplate = children.some((c) => c.tagName !== "TEMPLATE");
+ if (hasNonTemplate) return null;
+ }
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-alert/tw-alert.component.html b/packages/tw/src/components/tw-alert/tw-alert.component.html
new file mode 100644
index 000000000..ead04c7aa
--- /dev/null
+++ b/packages/tw/src/components/tw-alert/tw-alert.component.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dismiss
+
+
+
+
{
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-avatar/tw-avatar.component.html b/packages/tw/src/components/tw-avatar/tw-avatar.component.html
new file mode 100644
index 000000000..2290399da
--- /dev/null
+++ b/packages/tw/src/components/tw-avatar/tw-avatar.component.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
= {
+ xs: "h-6 w-6",
+ sm: "h-8 w-8",
+ md: "h-10 w-10",
+ lg: "h-14 w-14",
+ xl: "h-20 w-20",
+};
+
+const STATUS_DOT_SIZE_CLASSES: Record = {
+ xs: "h-1.5 w-1.5",
+ sm: "h-2 w-2",
+ md: "h-2.5 w-2.5",
+ lg: "h-3.5 w-3.5",
+ xl: "h-4 w-4",
+};
+
+const STATUS_COLOR_CLASSES: Record = {
+ online: "bg-green-400",
+ offline: "bg-gray-400",
+ busy: "bg-red-400",
+ away: "bg-yellow-400",
+};
+
+const INITIALS_TEXT_SIZE: Record = {
+ xs: "text-xs",
+ sm: "text-xs",
+ md: "text-sm",
+ lg: "text-lg",
+ xl: "text-xl",
+};
+
+export class TwAvatarComponent extends Component {
+ public static tagName = "tw-avatar";
+
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return ["src", "alt", "size", "status", "placeholder"];
+ }
+
+ public scope: Scope = {
+ src: "",
+ alt: "",
+ size: "md",
+ status: "",
+ placeholder: "",
+ initials: "",
+ imgClass: SIZE_CLASSES.md,
+ placeholderClass: `${SIZE_CLASSES.md} ${INITIALS_TEXT_SIZE.md}`,
+ dotClass: STATUS_DOT_SIZE_CLASSES.md,
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwAvatarComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected parsedAttributeChangedCallback(
+ attributeName: string,
+ oldValue: any,
+ newValue: any,
+ namespace: string | null,
+ ) {
+ super.parsedAttributeChangedCallback(
+ attributeName,
+ oldValue,
+ newValue,
+ namespace,
+ );
+ this.updateComputedScope();
+ }
+
+ protected async beforeBind() {
+ await super.beforeBind();
+ this.updateComputedScope();
+ }
+
+ protected updateComputedScope() {
+ const size = this.scope.size || "md";
+ const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.md;
+ const textClass = INITIALS_TEXT_SIZE[size] || INITIALS_TEXT_SIZE.md;
+ const dotSize = STATUS_DOT_SIZE_CLASSES[size] || STATUS_DOT_SIZE_CLASSES.md;
+ const dotColor = this.scope.status
+ ? STATUS_COLOR_CLASSES[this.scope.status] || ""
+ : "";
+
+ this.scope.imgClass = sizeClass;
+ this.scope.placeholderClass = `${sizeClass} ${textClass}`;
+ this.scope.dotClass = `${dotSize} ${dotColor}`.trim();
+
+ // Derive initials from placeholder text
+ if (this.scope.placeholder) {
+ const text = this.scope.placeholder.trim();
+ const parts = text.split(/\s+/);
+ if (parts.length === 1 && text.length <= 3) {
+ this.scope.initials = text.toUpperCase();
+ } else {
+ this.scope.initials = parts
+ .slice(0, 2)
+ .map((p) => p.charAt(0).toUpperCase())
+ .join("");
+ }
+ }
+ }
+
+ protected template(): ReturnType {
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-badge/tw-badge.component.ts b/packages/tw/src/components/tw-badge/tw-badge.component.ts
new file mode 100644
index 000000000..6bddfc763
--- /dev/null
+++ b/packages/tw/src/components/tw-badge/tw-badge.component.ts
@@ -0,0 +1,122 @@
+import { Component, TemplateFunction, ScopeBase } from "@ribajs/core";
+
+type BadgeType = "default" | "info" | "success" | "warning" | "error";
+type BadgeSize = "sm" | "md" | "lg";
+
+interface Scope extends ScopeBase {
+ type: BadgeType;
+ size: BadgeSize;
+ outline: boolean;
+}
+
+const TYPE_CLASSES: Record = {
+ default: {
+ solid: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
+ outline:
+ "bg-transparent border border-gray-500 text-gray-500 dark:border-gray-400 dark:text-gray-400",
+ },
+ info: {
+ solid: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+ outline:
+ "bg-transparent border border-blue-400 text-blue-400 dark:border-blue-500 dark:text-blue-500",
+ },
+ success: {
+ solid: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+ outline:
+ "bg-transparent border border-green-400 text-green-400 dark:border-green-500 dark:text-green-500",
+ },
+ warning: {
+ solid:
+ "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+ outline:
+ "bg-transparent border border-yellow-400 text-yellow-400 dark:border-yellow-500 dark:text-yellow-500",
+ },
+ error: {
+ solid: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+ outline:
+ "bg-transparent border border-red-400 text-red-400 dark:border-red-500 dark:text-red-500",
+ },
+};
+
+const SIZE_CLASSES: Record = {
+ sm: "text-xs px-1.5 py-0.5",
+ md: "text-xs px-2.5 py-0.5",
+ lg: "text-sm px-3 py-1",
+};
+
+export class TwBadgeComponent extends Component {
+ public static tagName = "tw-badge";
+
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return ["type", "size", "outline"];
+ }
+
+ public scope: Scope = {
+ type: "default",
+ size: "md",
+ outline: false,
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwBadgeComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async afterBind() {
+ await super.afterBind();
+ this.applyClasses();
+ }
+
+ protected parsedAttributeChangedCallback(
+ attributeName: string,
+ oldValue: any,
+ newValue: any,
+ namespace: string | null,
+ ) {
+ super.parsedAttributeChangedCallback(
+ attributeName,
+ oldValue,
+ newValue,
+ namespace,
+ );
+ if (["type", "size", "outline"].includes(attributeName)) {
+ this.applyClasses();
+ }
+ }
+
+ protected applyClasses() {
+ const baseClasses = "inline-flex items-center font-medium rounded-full";
+ const typeConfig = TYPE_CLASSES[this.scope.type] || TYPE_CLASSES.default;
+ const colorClasses = this.scope.outline
+ ? typeConfig.outline
+ : typeConfig.solid;
+ const sizeClasses = SIZE_CLASSES[this.scope.size] || SIZE_CLASSES.md;
+
+ // Remove previously applied badge classes
+ this.className = this.className
+ .replace(
+ /(^|\s)(inline-flex|items-center|font-medium|rounded-full|text-xs|text-sm|px-\S+|py-\S+|bg-\S+|text-\S+|border-\S+|border|dark:\S+)\b/g,
+ "",
+ )
+ .trim();
+
+ const allClasses = `${baseClasses} ${sizeClasses} ${colorClasses}`;
+ allClasses.split(/\s+/).forEach((cls) => {
+ if (cls) this.classList.add(cls);
+ });
+ }
+
+ protected template(): ReturnType {
+ return null;
+ }
+}
diff --git a/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.html b/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.html
new file mode 100644
index 000000000..9c36a2a32
--- /dev/null
+++ b/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.ts b/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.ts
new file mode 100644
index 000000000..abea5ca97
--- /dev/null
+++ b/packages/tw/src/components/tw-breadcrumb/tw-breadcrumb.component.ts
@@ -0,0 +1,104 @@
+import { Component, TemplateFunction, ScopeBase } from "@ribajs/core";
+import template from "./tw-breadcrumb.component.html?raw";
+
+interface BreadcrumbItem {
+ label: string;
+ href?: string;
+ active?: boolean;
+ /** Computed display mode: "link" | "active" | "plain" */
+ mode?: "link" | "active" | "plain";
+}
+
+interface Scope extends ScopeBase {
+ items: BreadcrumbItem[];
+ separator: string;
+}
+
+export class TwBreadcrumbComponent extends Component {
+ public static tagName = "tw-breadcrumb";
+
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return ["items", "separator"];
+ }
+
+ public scope: Scope = {
+ items: [],
+ separator: "/",
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ // Parse templates BEFORE init() triggers template loading which replaces children
+ if (this.scope.items.length === 0) {
+ this.parseChildTemplates();
+ }
+ this.init(TwBreadcrumbComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected parseChildTemplates() {
+ const templates = this.querySelectorAll("template");
+ if (templates.length === 0) return;
+
+ const items: BreadcrumbItem[] = [];
+ templates.forEach((tmpl) => {
+ const label = tmpl.getAttribute("label") || "";
+ const href = tmpl.getAttribute("href") || undefined;
+ const active = tmpl.hasAttribute("active");
+ if (label) {
+ items.push({ label, href, active });
+ }
+ });
+ if (items.length > 0) {
+ this.scope.items = items;
+ }
+ this.computeItemModes();
+ }
+
+ protected computeItemModes() {
+ for (const item of this.scope.items) {
+ if (item.active) {
+ item.mode = "active";
+ } else if (item.href) {
+ item.mode = "link";
+ } else {
+ item.mode = "plain";
+ }
+ }
+ }
+
+ protected parsedAttributeChangedCallback(
+ attributeName: string,
+ oldValue: any,
+ newValue: any,
+ namespace: string | null,
+ ) {
+ super.parsedAttributeChangedCallback(
+ attributeName,
+ oldValue,
+ newValue,
+ namespace,
+ );
+ if (attributeName === "items" && typeof newValue === "string") {
+ try {
+ this.scope.items = JSON.parse(newValue);
+ this.computeItemModes();
+ } catch {
+ // Ignore parse errors
+ }
+ }
+ }
+
+ protected template(): ReturnType {
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-button/tw-button.component.ts b/packages/tw/src/components/tw-button/tw-button.component.ts
new file mode 100644
index 000000000..56358eb35
--- /dev/null
+++ b/packages/tw/src/components/tw-button/tw-button.component.ts
@@ -0,0 +1,105 @@
+import { Component, TemplateFunction, ScopeBase } from "@ribajs/core";
+
+interface Scope extends ScopeBase {
+ animationClass: string;
+ onClick: TwButtonComponent["onClick"];
+}
+
+export class TwButtonComponent extends Component {
+ public static tagName = "tw-button";
+
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return ["animation-class"];
+ }
+
+ public scope: Scope = {
+ animationClass: "animate-pulse",
+ onClick: this.onClick.bind(this),
+ };
+
+ constructor() {
+ super();
+ }
+
+ public onClick() {
+ this.startAnimation();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwButtonComponent.observedAttributes);
+ }
+
+ protected startAnimation() {
+ this.classList.add(this.scope.animationClass);
+ }
+
+ protected onStartAnimation() {
+ //
+ }
+
+ protected onEndAnimation() {
+ setTimeout(() => {
+ this.classList.remove(this.scope.animationClass);
+ });
+ }
+
+ protected async init(observedAttributes: string[]) {
+ return super.init(observedAttributes).then((view) => {
+ this.onStartAnimation = this.onStartAnimation.bind(this);
+ this.addEventListener(
+ "webkitAnimationStart" as "animationstart",
+ this.onStartAnimation,
+ );
+ this.addEventListener("animationstart", this.onStartAnimation);
+ this.onEndAnimation = this.onEndAnimation.bind(this);
+ this.addEventListener(
+ "webkitAnimationEnd" as "animationend",
+ this.onEndAnimation,
+ );
+ this.addEventListener("animationend", this.onEndAnimation);
+ this.addEventListener("click", this.scope.onClick);
+ return view;
+ });
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected parsedAttributeChangedCallback(
+ attributeName: string,
+ oldValue: any,
+ newValue: any,
+ namespace: string | null,
+ ) {
+ super.parsedAttributeChangedCallback(
+ attributeName,
+ oldValue,
+ newValue,
+ namespace,
+ );
+ }
+
+ // deconstruction
+ protected disconnectedCallback() {
+ super.disconnectedCallback();
+ this.removeEventListener(
+ "webkitAnimationStart" as "animationstart",
+ this.onStartAnimation,
+ );
+ this.removeEventListener("animationstart", this.onStartAnimation);
+ this.removeEventListener(
+ "webkitAnimationEnd" as "animationend",
+ this.onEndAnimation,
+ );
+ this.removeEventListener("animationend", this.onEndAnimation);
+ this.removeEventListener("click", this.scope.onClick);
+ }
+
+ protected template(): ReturnType {
+ return null;
+ }
+}
diff --git a/packages/tw/src/components/tw-card/tw-card.component.html b/packages/tw/src/components/tw-card/tw-card.component.html
new file mode 100644
index 000000000..24e320c20
--- /dev/null
+++ b/packages/tw/src/components/tw-card/tw-card.component.html
@@ -0,0 +1,22 @@
+
+
+
+
{
+ if (hasChildNodesTrim(this)) {
+ return null;
+ }
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-carousel/tw-carousel.component.ts b/packages/tw/src/components/tw-carousel/tw-carousel.component.ts
new file mode 100644
index 000000000..30931a5b4
--- /dev/null
+++ b/packages/tw/src/components/tw-carousel/tw-carousel.component.ts
@@ -0,0 +1,153 @@
+import { TemplateFunction } from "@ribajs/core";
+import {
+ TwSlideshowComponent,
+ TwSlideshowComponentScope,
+} from "../tw-slideshow/tw-slideshow.component.js";
+
+/**
+ * Carousel component — a thin alias for TwSlideshowComponent with
+ * different defaults suited for auto-playing, infinite-looping carousels.
+ */
+export class TwCarouselComponent extends TwSlideshowComponent {
+ public static override tagName = "tw-carousel";
+
+ static override get observedAttributes(): string[] {
+ return [
+ ...TwSlideshowComponent.observedAttributes,
+ "autoplay",
+ "autoplay-interval",
+ ];
+ }
+
+ protected override defaultScope: TwSlideshowComponentScope = {
+ // Options — carousel-specific defaults
+ slidesToScroll: 1,
+ controls: true,
+ controlsPosition: "inside-middle",
+ sticky: false,
+ indicators: true,
+ indicatorsPosition: "inside-bottom",
+ drag: true,
+ touchScroll: true,
+ angle: "horizontal",
+ infinite: true,
+ columns: 0,
+
+ // States
+ items: [],
+ nextIndex: -1,
+ prevIndex: -1,
+ enableNextControl: false,
+ enablePrevControl: false,
+ showControls: false,
+ showIndicators: false,
+ activeSlides: [],
+ isScrolling: false,
+ slideItemStyle: {},
+
+ // Template methods
+ next: this.next.bind(this),
+ prev: this.prev.bind(this),
+ goTo: this.goTo.bind(this),
+ enableTouchScroll: this.enableTouchScroll.bind(this),
+ disableTouchScroll: this.disableTouchScroll.bind(this),
+
+ // Classes
+ controlsPositionClass: "",
+ indicatorsPositionClass: "",
+ };
+
+ protected autoplayEnabled = false;
+ protected autoplayInterval = 5000;
+ protected autoplayTimerIndex: number | null = null;
+
+ public override scope: TwSlideshowComponentScope = {
+ ...this.defaultScope,
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected override parsedAttributeChangedCallback(
+ attributeName: string,
+ oldValue: any,
+ newValue: any,
+ namespace: string | null,
+ ) {
+ super.parsedAttributeChangedCallback(
+ attributeName,
+ oldValue,
+ newValue,
+ namespace,
+ );
+
+ if (attributeName === "autoplay") {
+ this.autoplayEnabled = !!newValue;
+ if (this.autoplayEnabled) {
+ this.startAutoplay();
+ } else {
+ this.stopAutoplay();
+ }
+ }
+
+ if (attributeName === "autoplayInterval") {
+ this.autoplayInterval =
+ typeof newValue === "number"
+ ? newValue
+ : parseInt(newValue, 10) || 5000;
+ if (this.autoplayEnabled) {
+ this.startAutoplay();
+ }
+ }
+ }
+
+ protected override async afterBind() {
+ await super.afterBind();
+ if (this.autoplayEnabled) {
+ this.startAutoplay();
+ }
+ this.addEventListener("mouseenter", this.onMouseEnter);
+ this.addEventListener("mouseleave", this.onMouseLeave);
+ }
+
+ protected onMouseEnter = () => {
+ if (this.autoplayEnabled) {
+ this.stopAutoplay();
+ }
+ };
+
+ protected onMouseLeave = () => {
+ if (this.autoplayEnabled) {
+ this.startAutoplay();
+ }
+ };
+
+ protected startAutoplay() {
+ this.stopAutoplay();
+ if (this.autoplayInterval > 0) {
+ this.autoplayTimerIndex = window.setInterval(() => {
+ this.next();
+ }, this.autoplayInterval);
+ }
+ }
+
+ protected stopAutoplay() {
+ if (this.autoplayTimerIndex !== null) {
+ window.clearInterval(this.autoplayTimerIndex);
+ this.autoplayTimerIndex = null;
+ }
+ }
+
+ protected override disconnectedCallback() {
+ this.stopAutoplay();
+ this.removeEventListener("mouseenter", this.onMouseEnter);
+ this.removeEventListener("mouseleave", this.onMouseLeave);
+ super.disconnectedCallback();
+ }
+
+ protected override template(): ReturnType {
+ // Re-use the slideshow template
+ return super.template();
+ }
+}
diff --git a/packages/tw/src/components/tw-collapse/tw-collapse.component.html b/packages/tw/src/components/tw-collapse/tw-collapse.component.html
new file mode 100644
index 000000000..fe6f1e38b
--- /dev/null
+++ b/packages/tw/src/components/tw-collapse/tw-collapse.component.html
@@ -0,0 +1,23 @@
+
diff --git a/packages/tw/src/components/tw-collapse/tw-collapse.component.ts b/packages/tw/src/components/tw-collapse/tw-collapse.component.ts
new file mode 100644
index 000000000..98a68f0d4
--- /dev/null
+++ b/packages/tw/src/components/tw-collapse/tw-collapse.component.ts
@@ -0,0 +1,100 @@
+import { Component } from "@ribajs/core";
+import { CollapseService } from "../../services/collapse.service.js";
+import template from "./tw-collapse.component.html?raw";
+
+export class TwCollapseComponent extends Component {
+ public static tagName = "tw-collapse";
+
+ static get observedAttributes(): string[] {
+ return ["title", "content", "collapsed"];
+ }
+
+ protected autobind = true;
+
+ protected collapseService?: CollapseService;
+
+ public scope = {
+ title: "",
+ content: "",
+ collapsed: true,
+ toggle: this.toggle.bind(this),
+ show: this.show.bind(this),
+ hide: this.hide.bind(this),
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwCollapseComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return ["title"];
+ }
+
+ protected async beforeBind() {
+ await super.beforeBind();
+ if (this.hasChildNodes() && !this.scope.content) {
+ this.scope.content = this.innerHTML;
+ }
+ }
+
+ protected async afterBind() {
+ await super.afterBind();
+ const collapseEl = this.querySelector(".tw-collapse-content");
+ if (collapseEl) {
+ collapseEl.style.transition = "max-height 0.3s ease";
+ this.collapseService = new CollapseService(collapseEl, {
+ show: !this.scope.collapsed,
+ });
+ }
+ }
+
+ public toggle() {
+ this.collapseService?.toggle();
+ this.scope.collapsed = !this.collapseService?.isShown;
+ this.dispatchVisibilityChanged();
+ }
+
+ public show() {
+ this.collapseService?.show();
+ this.scope.collapsed = false;
+ this.dispatchVisibilityChanged();
+ }
+
+ public hide() {
+ this.collapseService?.hide();
+ this.scope.collapsed = true;
+ this.dispatchVisibilityChanged();
+ }
+
+ protected dispatchVisibilityChanged() {
+ this.dispatchEvent(
+ new CustomEvent("visibility-changed", {
+ detail: { collapsed: this.scope.collapsed },
+ }),
+ );
+ }
+
+ protected disconnectedCallback() {
+ super.disconnectedCallback();
+ this.collapseService?.dispose();
+ }
+
+ protected template() {
+ if (this.hasChildNodes()) {
+ const nonTemplateChildren = Array.from(this.childNodes).filter(
+ (n) =>
+ n.nodeType !== Node.COMMENT_NODE &&
+ (n as Element).tagName !== "TEMPLATE",
+ );
+ if (nonTemplateChildren.length > 0) {
+ return null;
+ }
+ }
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-colorpicker/tw-colorpicker.component.html b/packages/tw/src/components/tw-colorpicker/tw-colorpicker.component.html
new file mode 100644
index 000000000..12f5a3ee4
--- /dev/null
+++ b/packages/tw/src/components/tw-colorpicker/tw-colorpicker.component.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ if (hasChildNodesTrim(this)) {
+ return null;
+ }
+ return template;
+ }
+}
diff --git a/packages/tw/src/components/tw-contents/tw-contents.component.html b/packages/tw/src/components/tw-contents/tw-contents.component.html
new file mode 100644
index 000000000..4eb9e1410
--- /dev/null
+++ b/packages/tw/src/components/tw-contents/tw-contents.component.html
@@ -0,0 +1,66 @@
+
+
+
+
Table of Contents
+
+
+
+
+
diff --git a/packages/tw/src/components/tw-contents/tw-contents.component.ts b/packages/tw/src/components/tw-contents/tw-contents.component.ts
new file mode 100644
index 000000000..7c682d093
--- /dev/null
+++ b/packages/tw/src/components/tw-contents/tw-contents.component.ts
@@ -0,0 +1,202 @@
+import { Component, ScopeBase } from "@ribajs/core";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
+
+export interface Anchor {
+ element: HTMLHeadingElement;
+ href: string;
+ title: string;
+ childs: Anchor[];
+}
+
+export interface Scope extends ScopeBase {
+ /**
+ * Heading level to start scanning from (default 2 = h2).
+ */
+ headersStart: number;
+ /**
+ * How many heading levels deep to scan (e.g. 2 means h2 and h3 when start=2).
+ */
+ headersDepth: number;
+ /**
+ * How many parent levels to search for an id attribute on each header element.
+ */
+ findHeaderIdDepth: number;
+ /**
+ * CSS selector for the container to scan for headings.
+ */
+ headerParentSelector?: string;
+ /**
+ * Pixel offset when scrolling to a heading.
+ */
+ scrollOffset: number;
+ /**
+ * The element to scroll (CSS selector). Defaults to the window.
+ */
+ scrollElement?: string;
+ /**
+ * Whether to show a toggle button to collapse/expand the TOC.
+ */
+ showToggle: boolean;
+ /**
+ * Whether the TOC is currently collapsed.
+ */
+ collapsed: boolean;
+ /**
+ * Array of found headers / anchors.
+ */
+ anchors: Anchor[];
+ /**
+ * Toggle the TOC visibility.
+ */
+ toggle: TwContentsComponent["toggle"];
+}
+
+export class TwContentsComponent extends Component {
+ public static tagName = "tw-contents";
+
+ protected autobind = true;
+ public _debug = false;
+
+ protected wrapperElement?: Element;
+
+ static get observedAttributes(): string[] {
+ return [
+ "headers-start",
+ "headers-depth",
+ "find-header-id-depth",
+ "header-parent-selector",
+ "scroll-offset",
+ "scroll-element",
+ "show-toggle",
+ ];
+ }
+
+ public scope: Scope = {
+ headersDepth: 1,
+ headersStart: 2,
+ findHeaderIdDepth: 1,
+ headerParentSelector: undefined,
+ scrollOffset: 0,
+ scrollElement: undefined,
+ showToggle: false,
+ collapsed: false,
+ anchors: [],
+ toggle: this.toggle.bind(this),
+ };
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwContentsComponent.observedAttributes);
+ }
+
+ protected requiredAttributes(): string[] {
+ return ["headersStart", "headersDepth", "headerParentSelector"];
+ }
+
+ protected getIdFromElementOrParent(
+ element: HTMLElement,
+ depth = 1,
+ ): string | null {
+ if (element.id) {
+ return element.id;
+ }
+ if (depth <= this.scope.findHeaderIdDepth) {
+ if (element.parentElement) {
+ return this.getIdFromElementOrParent(element.parentElement, ++depth);
+ }
+ }
+ return null;
+ }
+
+ protected pushHeaders(
+ wrapperElement: Element,
+ headersStart: number,
+ headersDepth: number,
+ pushTo: Anchor[],
+ ) {
+ const headerElements = wrapperElement.querySelectorAll(
+ "h" + headersStart,
+ ) as NodeListOf;
+ headerElements.forEach((headerElement) => {
+ const id = this.getIdFromElementOrParent(headerElement);
+ if (!id) {
+ // Generate an id if the heading doesn't have one
+ const generatedId =
+ "tw-toc-" +
+ headerElement.textContent
+ ?.trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-|-$/g, "");
+ if (generatedId && generatedId !== "tw-toc-") {
+ headerElement.id = generatedId;
+ } else {
+ return;
+ }
+ }
+ const anchor: Anchor = {
+ element: headerElement,
+ href: "#" + (headerElement.id || id),
+ title: headerElement.textContent?.trim() || headerElement.innerHTML,
+ childs: [],
+ };
+ pushTo.push(anchor);
+ if (headerElement.parentElement && headersDepth >= headersStart + 1) {
+ this.pushHeaders(
+ headerElement.parentElement,
+ headersStart + 1,
+ headersDepth,
+ anchor.childs,
+ );
+ }
+ });
+ }
+
+ protected async afterBind() {
+ if (
+ this.scope.headerParentSelector &&
+ this.scope.headersStart &&
+ this.scope.headersDepth
+ ) {
+ this.wrapperElement =
+ document.querySelector(this.scope.headerParentSelector) || undefined;
+ this.scope.anchors = [];
+ if (!this.wrapperElement) {
+ console.error(
+ "tw-contents: No element found for selector",
+ this.scope.headerParentSelector,
+ );
+ return;
+ }
+ this.pushHeaders(
+ this.wrapperElement,
+ this.scope.headersStart,
+ this.scope.headersDepth,
+ this.scope.anchors,
+ );
+ }
+ await super.afterBind();
+ }
+
+ public toggle() {
+ this.scope.collapsed = !this.scope.collapsed;
+ }
+
+ protected disconnectedCallback() {
+ super.disconnectedCallback();
+ this.scope.anchors = [];
+ }
+
+ protected async template() {
+ if (hasChildNodesTrim(this)) {
+ return null;
+ } else {
+ const { default: tpl } = await import("./tw-contents.component.html?raw");
+ return tpl;
+ }
+ }
+}
diff --git a/packages/tw/src/components/tw-dropdown/tw-dropdown.component.html b/packages/tw/src/components/tw-dropdown/tw-dropdown.component.html
new file mode 100644
index 000000000..4a08cb4be
--- /dev/null
+++ b/packages/tw/src/components/tw-dropdown/tw-dropdown.component.html
@@ -0,0 +1,27 @@
+
diff --git a/packages/tw/src/components/tw-dropdown/tw-dropdown.component.ts b/packages/tw/src/components/tw-dropdown/tw-dropdown.component.ts
new file mode 100644
index 000000000..c05268216
--- /dev/null
+++ b/packages/tw/src/components/tw-dropdown/tw-dropdown.component.ts
@@ -0,0 +1,127 @@
+import { Component, TemplateFunction, ScopeBase } from "@ribajs/core";
+import { DropdownService } from "../../services/dropdown.service.js";
+
+import type { Placement } from "@floating-ui/dom";
+
+interface Scope extends ScopeBase {
+ toggle: TwDropdownComponent["toggle"];
+ show: TwDropdownComponent["show"];
+ hide: TwDropdownComponent["hide"];
+ isShown: boolean;
+ placement: Placement;
+}
+
+export class TwDropdownComponent extends Component {
+ public static tagName = "tw-dropdown";
+
+ protected autobind = true;
+
+ protected dropdown?: DropdownService;
+ protected triggerEl: HTMLElement | null = null;
+ protected menuEl: HTMLElement | null = null;
+
+ static get observedAttributes(): string[] {
+ return ["placement"];
+ }
+
+ public scope: Scope = {
+ toggle: this.toggle.bind(this),
+ show: this.show.bind(this),
+ hide: this.hide.bind(this),
+ isShown: false,
+ placement: "bottom-start",
+ };
+
+ constructor() {
+ super();
+ }
+
+ public toggle() {
+ if (!this.dropdown) {
+ throw new Error("Dropdown not ready!");
+ }
+ this.dropdown.toggle();
+ }
+
+ public show() {
+ if (!this.dropdown) {
+ throw new Error("Dropdown not ready!");
+ }
+ this.dropdown.show();
+ }
+
+ public hide() {
+ if (!this.dropdown) {
+ throw new Error("Dropdown not ready!");
+ }
+ this.dropdown.hide();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwDropdownComponent.observedAttributes);
+ }
+
+ protected async afterBind() {
+ this.initDropdown();
+ this.addDropdownListeners();
+ await super.afterBind();
+ }
+
+ protected initDropdown() {
+ // Find the trigger element: a button or element with [data-dropdown-trigger]
+ this.triggerEl =
+ this.querySelector("[data-dropdown-trigger]") ||
+ this.querySelector("button") ||
+ this;
+
+ // Find the menu element: an element with [data-dropdown-menu] or role="menu"
+ this.menuEl =
+ this.querySelector("[data-dropdown-menu]") ||
+ this.querySelector('[role="menu"]') ||
+ this.querySelector("ul") ||
+ this.querySelector("div:last-child");
+
+ if (!this.menuEl) {
+ console.warn("[tw-dropdown] No menu element found.");
+ return;
+ }
+
+ // Apply Tailwind positioning classes
+ this.menuEl.classList.add("absolute", "z-50");
+
+ this.dropdown = new DropdownService(this.triggerEl, this.menuEl, {
+ placement: this.scope.placement,
+ });
+
+ this.scope.isShown = this.dropdown.isShown;
+ }
+
+ protected _onShown = () => {
+ this.scope.isShown = true;
+ };
+
+ protected _onHidden = () => {
+ this.scope.isShown = false;
+ };
+
+ protected addDropdownListeners() {
+ this.triggerEl?.addEventListener("tw.dropdown.shown", this._onShown);
+ this.triggerEl?.addEventListener("tw.dropdown.hidden", this._onHidden);
+ }
+
+ protected removeDropdownListeners() {
+ this.triggerEl?.removeEventListener("tw.dropdown.shown", this._onShown);
+ this.triggerEl?.removeEventListener("tw.dropdown.hidden", this._onHidden);
+ }
+
+ protected disconnectedCallback() {
+ super.disconnectedCallback();
+ this.removeDropdownListeners();
+ this.dropdown?.dispose();
+ }
+
+ protected template(): ReturnType {
+ return null;
+ }
+}
diff --git a/packages/tw/src/components/tw-form/tw-form.component.html b/packages/tw/src/components/tw-form/tw-form.component.html
new file mode 100644
index 000000000..d3211770d
--- /dev/null
+++ b/packages/tw/src/components/tw-form/tw-form.component.html
@@ -0,0 +1,29 @@
+
diff --git a/packages/tw/src/components/tw-form/tw-form.component.ts b/packages/tw/src/components/tw-form/tw-form.component.ts
new file mode 100644
index 000000000..d0bf3568d
--- /dev/null
+++ b/packages/tw/src/components/tw-form/tw-form.component.ts
@@ -0,0 +1,438 @@
+import {
+ Component,
+ HttpService,
+ HttpMethod,
+ HttpDataType,
+ ScopeBase,
+} from "@ribajs/core";
+import { stripHtml } from "@ribajs/utils/src/type.js";
+import {
+ getUID,
+ hasChildNodesTrim,
+ scrollTo,
+ getViewportDimensions,
+} from "@ribajs/utils/src/dom.js";
+
+export interface ValidationObject {
+ fields:
+ | {
+ [name: string]: string | boolean | string[];
+ }
+ | FormData;
+ valid: boolean;
+ error?: string;
+}
+
+export interface SubmitSettings {
+ action: string;
+ method: HttpMethod;
+ target?: string;
+ type: HttpDataType;
+}
+
+export interface Scope extends ScopeBase {
+ id: string;
+ form: ValidationObject;
+ onSubmit: TwFormComponent["onSubmit"];
+ onReset: TwFormComponent["onReset"];
+ enableSubmit: TwFormComponent["enableSubmit"];
+
+ disableSubmitUntilChange: boolean;
+ submitDisabled: boolean;
+ /**
+ * Set this to `true` to submit the form using ajax.
+ * Set this to `false` to use the default submit request with a page reload.
+ */
+ useAjax: boolean;
+ /**
+ * Used for the ajax submit request. Default is "form" but can also be "script" | "json" | "xml" | "text" | "html" | "form".
+ */
+ ajaxRequestType: HttpDataType;
+ /**
+ * If `true`, form data is collected automatically from form elements.
+ * If `false`, you should bind values manually via `rv-value`.
+ */
+ autoSetFormData: boolean;
+ stripHtml: boolean;
+ scrollToInvalidElement: boolean;
+ animateInvalidElement: boolean;
+}
+
+export class TwFormComponent extends Component {
+ public static tagName = "tw-form";
+ public _debug = false;
+ protected autobind = true;
+
+ static get observedAttributes(): string[] {
+ return [
+ "id",
+ "disable-submit-until-change",
+ "use-ajax",
+ "ajax-request-type",
+ "auto-set-form-data",
+ "strip-html",
+ "scroll-to-invalid-element",
+ "animate-invalid-element",
+ ];
+ }
+
+ protected formEl: HTMLFormElement | null = null;
+
+ protected getDefaultScope(): Scope {
+ const scope: Scope = {
+ id: getUID("form"),
+
+ form: {
+ fields: {},
+ valid: false,
+ error: undefined,
+ },
+
+ disableSubmitUntilChange: false,
+ submitDisabled: false,
+ onSubmit: this.onSubmit.bind(this),
+ onReset: this.onReset.bind(this),
+ enableSubmit: this.enableSubmit.bind(this),
+
+ useAjax: true,
+ ajaxRequestType: "form",
+ autoSetFormData: true,
+ stripHtml: true,
+ scrollToInvalidElement: true,
+ animateInvalidElement: true,
+ };
+ return scope;
+ }
+
+ public scope: Scope = this.getDefaultScope();
+
+ constructor() {
+ super();
+ }
+
+ protected connectedCallback() {
+ super.connectedCallback();
+ this.init(TwFormComponent.observedAttributes);
+ }
+
+ public enableSubmit() {
+ if (this.scope.disableSubmitUntilChange) {
+ this.scope.submitDisabled = false;
+ }
+ }
+
+ protected requiredAttributes(): string[] {
+ return [];
+ }
+
+ protected async beforeBind() {
+ await super.beforeBind();
+ this.id = this.scope.id;
+ }
+
+ protected async afterBind() {
+ await super.afterBind();
+ }
+
+ protected stripHtmlFromFields() {
+ for (const key in this.scope.form.fields) {
+ if (
+ (this.scope.form.fields as any)[key] &&
+ typeof (this.scope.form.fields as any)[key] === "string"
+ ) {
+ (this.scope.form.fields as any)[key] = stripHtml(
+ (this.scope.form.fields as any)[key] as string,
+ );
+ }
+ }
+ }
+
+ public onSubmit(event: Event, el: HTMLButtonElement) {
+ if (!this.formEl) {
+ console.warn("No form found");
+ return false;
+ }
+
+ if (this.scope.autoSetFormData) {
+ this.getFormValues();
+ }
+
+ if (this.scope.stripHtml) {
+ this.stripHtmlFromFields();
+ }
+
+ this.validate(this.formEl, this.scope.form);
+
+ if (!this.scope.form.valid) {
+ this.onInvalidForm(event);
+ return;
+ }
+
+ const submitSettings = this.getSubmitSettings(event);
+ if (submitSettings?.target === "_blank") {
+ return true;
+ }
+
+ if (this.scope.useAjax) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.ajaxSubmit(event, el);
+ }
+ }
+
+ public onReset(event: Event) {
+ if (!this.formEl) {
+ console.warn("No form found");
+ return;
+ }
+ this.formEl.reset();
+ this.scope.form.valid = false;
+ this.scope.form.error = undefined;
+ this.scope.form.fields = {};
+
+ // Remove validation styling
+ this.formEl.classList.remove("tw-was-validated");
+ this.clearValidationErrors();
+
+ this.dispatchEvent(new CustomEvent("form-reset"));
+ }
+
+ protected async ajaxSubmit(event?: Event, el?: HTMLButtonElement) {
+ const submitSettings = this.getSubmitSettings(event);
+ if (!submitSettings) {
+ console.warn("Can't get submit settings");
+ return;
+ }
+
+ if (this.scope.autoSetFormData) {
+ this.getFormValues();
+ }
+
+ try {
+ const res = await HttpService.fetch(
+ submitSettings.action,
+ submitSettings.method,
+ this.scope.form.fields,
+ submitSettings.type,
+ );
+
+ if (!res || !res.body) {
+ return this.onErrorSubmit("500", "Error", "Empty body!");
+ }
+
+ const message = res.body && res.body.message ? res.body.message : "";
+ if (Number(res.status) >= 400) {
+ this.onErrorSubmit(res.status.toString(), message, res.body);
+ }
+ return this.onSuccessSubmit(res.status.toString(), message, res.body);
+ } catch (err: any) {
+ if (err.status && err.body) {
+ this.onErrorSubmit(err.status, err.body.message, err.body);
+ } else {
+ throw err;
+ }
+ }
+ }
+
+ protected getSubmitSettings(event?: Event) {
+ if (!this.formEl) {
+ console.warn("No form found");
+ return null;
+ }
+
+ let action = this.formEl.action;
+ let method = this.formEl.method;
+ let target = this.formEl.target;
+
+ // Overwrite action by formaction attribute on the submitter button
+ if ((event as SubmitEvent)?.submitter) {
+ const submitter = (event as SubmitEvent).submitter as HTMLButtonElement;
+ action = submitter.formAction || action;
+ method = submitter.formMethod || method;
+ target = submitter.formTarget || target;
+ }
+
+ const settings: SubmitSettings = {
+ action,
+ method: method.toUpperCase() as HttpMethod,
+ target,
+ type: this.scope.ajaxRequestType,
+ };
+
+ return settings;
+ }
+
+ protected onInvalidForm(event: Event): void {
+ event.preventDefault();
+ event.stopPropagation();
+ if (!this.formEl) {
+ console.warn("No form found");
+ return;
+ }
+ const invalidElements =
+ this.formEl.querySelectorAll(":invalid");
+
+ // Show validation messages on all invalid elements
+ this.showValidationErrors(invalidElements);
+
+ if (invalidElements && invalidElements.length) {
+ const invalidElement = invalidElements[0];
+ if (this.scope.scrollToInvalidElement) {
+ this.scrollToElement(invalidElement);
+ }
+ if (this.scope.animateInvalidElement) {
+ this.animateInvalidElement(invalidElement);
+ }
+ }
+
+ this.dispatchEvent(
+ new CustomEvent("invalid", {
+ detail: { elements: invalidElements },
+ }),
+ );
+ }
+
+ protected showValidationErrors(invalidElements: NodeListOf) {
+ // Clear previous error messages
+ this.clearValidationErrors();
+
+ invalidElements.forEach((el) => {
+ const input = el as
+ | HTMLInputElement
+ | HTMLSelectElement
+ | HTMLTextAreaElement;
+ if (!input.validationMessage) return;
+
+ // Add red border
+ input.classList.add(
+ "!border-red-500",
+ "!ring-red-500",
+ "!focus:border-red-500",
+ "!focus:ring-red-500",
+ );
+
+ // Create error message element
+ const errorEl = document.createElement("p");
+ errorEl.className =
+ "mt-1 text-sm text-red-600 dark:text-red-400 tw-validation-error";
+ errorEl.textContent = input.validationMessage;
+
+ // Insert after the input (or after its parent if wrapped in a label)
+ const insertAfter = input.closest("label") || input;
+ insertAfter.parentNode?.insertBefore(errorEl, insertAfter.nextSibling);
+
+ // Clear error on input change
+ const clearOnInput = () => {
+ input.classList.remove(
+ "!border-red-500",
+ "!ring-red-500",
+ "!focus:border-red-500",
+ "!focus:ring-red-500",
+ );
+ errorEl.remove();
+ input.removeEventListener("input", clearOnInput);
+ input.removeEventListener("change", clearOnInput);
+ };
+ input.addEventListener("input", clearOnInput);
+ input.addEventListener("change", clearOnInput);
+ });
+ }
+
+ protected clearValidationErrors() {
+ if (!this.formEl) return;
+ // Remove all previous error messages
+ this.formEl
+ .querySelectorAll(".tw-validation-error")
+ .forEach((el) => el.remove());
+ // Remove red border classes from all inputs
+ this.formEl.querySelectorAll(".\\!border-red-500").forEach((el) => {
+ el.classList.remove(
+ "!border-red-500",
+ "!ring-red-500",
+ "!focus:border-red-500",
+ "!focus:ring-red-500",
+ );
+ });
+ }
+
+ protected scrollToElement(element: HTMLElement) {
+ const vp = getViewportDimensions();
+ const offset = vp.h / 2;
+ scrollTo(element, offset, window);
+ }
+
+ protected animateInvalidElement(element: HTMLElement, endsOn = 3000) {
+ element.classList.add("tw-invalid-flash");
+ setTimeout(() => {
+ element.classList.remove("tw-invalid-flash");
+ }, endsOn);
+ }
+
+ protected onErrorSubmit(status: string, message: string, response: any) {
+ this.dispatchEvent(
+ new CustomEvent("submit-error", {
+ detail: { status, message, response },
+ }),
+ );
+ }
+
+ protected onSuccessSubmit(status: string, message: string, response: any) {
+ if (this.scope.disableSubmitUntilChange) {
+ this.scope.submitDisabled = true;
+ }
+
+ this.dispatchEvent(
+ new CustomEvent("submit-success", {
+ detail: { status, message, response },
+ }),
+ );
+ }
+
+ protected validate(
+ form: HTMLFormElement,
+ validationScope: ValidationObject,
+ errorEventName = "validation-error",
+ ) {
+ validationScope.valid = form.checkValidity();
+ validationScope.error = form.validationMessage;
+ if (!validationScope.valid) {
+ this.dispatchEvent(new CustomEvent(errorEventName));
+ form.classList.add("tw-was-validated");
+ }
+ }
+
+ protected getFormValues() {
+ if (!this.formEl) {
+ console.warn("No form found");
+ return null;
+ }
+ this.scope.form.fields = new FormData(this.formEl);
+ return this.scope.form.fields;
+ }
+
+ protected initForm() {
+ const formEl = this.querySelector("form");
+ if (formEl) {
+ this.formEl = formEl;
+ this.formEl.setAttribute("novalidate", "");
+ this.formEl.addEventListener("submit", (event: Event) => {
+ this.onSubmit(event, event.target as HTMLButtonElement);
+ });
+ this.formEl.addEventListener("reset", (event: Event) => {
+ this.onReset(event);
+ });
+ } else {
+ console.warn("tw-form without a