Pages

Contents

@xpulse/theme – Component Spec

Status: CONCEPT · Created March 2026 Parent: GLOBAL_concept-ecosystem.md Supersedes: COMP_ui_spec.md, COMP_ui_concept.md (theme layer) Companion document: GLOBAL_concept-brand.md

Overview

CSS design system for all xPulse tools – structure, colours, effects and animations in a single package. No separate @xpulse/theme – everything lives in @xpulse/theme.

A theme is a CSS file that defines custom properties, component styles, hover/focus effects and animations. Themes are found automatically via discovery – no manual registration required.

What the package provides:

CSS Reset + Base
Custom Properties (--xpulse-*)
Component classes (.xpulse-btn-primary, .xpulse-card etc.)
Animations
Noise overlay (brand identity)
Predefined themes (dark, light)
Theme toggle via JS
Discovery: app themes are found automatically

Custom Properties – Naming Convention

All custom properties follow the --xpulse-* prefix – unambiguous, no conflict with other libraries, consistent with the BEM approach.

1 /* Colours */
2 --xpulse-bg
3 --xpulse-surface
4 --xpulse-surface-strong
5 --xpulse-border
6 --xpulse-muted
7 --xpulse-text
8 --xpulse-text-dim
9 --xpulse-accent
10 --xpulse-accent2
11 --xpulse-accent-soft
12 --xpulse-warning
13 --xpulse-danger
14 --xpulse-shadow
15 --xpulse-input-bg
16  
17 /* Typography */
18 --xpulse-font-mono
19 --xpulse-font-serif
20 --xpulse-font-size-body
21 --xpulse-font-size-display
22 --xpulse-font-size-h2
23 --xpulse-font-size-h3
24 --xpulse-font-size-lead
25 --xpulse-font-size-meta
26  
27 /* Effects */
28 --xpulse-transition
29 --xpulse-radius
30 --xpulse-hover-opacity
31  
32 /* Buttons */
33 --xpulse-button-text
34 --xpulse-button-radius
35 --xpulse-button-font-size
36 --xpulse-button-min-height
37 --xpulse-button-padding-y
38 --xpulse-button-padding-x
39 /* …as well as size variants: xs, sm, md, lg */
40 --xpulse-button-hover-opacity
41 --xpulse-button-active-scale

Themes

dark.css – Standard xPulse Theme

File: public/css/themes/dark.css

CSS selector: html[data-theme="dark"] (plus :root as default fallback).

Excerpt of the most important tokens:

1 :root,
2 html[data-theme="dark"] {
3     --xpulse-bg:             #0d0d0d;
4     --xpulse-surface:        #141414;
5     --xpulse-surface-strong: #1b1b1b;
6     --xpulse-text:           #c8c8c8;
7     --xpulse-text-dim:       #555;
8     --xpulse-border:         #222;
9     --xpulse-muted:          #444;
10     --xpulse-accent:         #8703b0;
11     --xpulse-accent2:        #7eb8a4;
12     --xpulse-accent-soft:    rgba(135, 3, 176, 0.18);
13     --xpulse-warning:        #b89a3e;
14     --xpulse-danger:         #c0606a;
15     --xpulse-shadow:         0 4px 24px rgba(0, 0, 0, 0.5);
16     --xpulse-input-bg:       #141414;
17     /* …font size tokens, button tokens etc. */
18 }
19  
20 /* System preference fallback if no data-theme is set yet */
21 @media (prefers-color-scheme: dark) {
22     html:not([data-theme]) { ... }
23 }

light.css – Light Theme

Analogous to dark.css, selector html[data-theme="light"].

App Theme Extension

An app places its own CSS overrides under src/themes/:

1 /* src/themes/app.css */
2 .xpulse-shell {
3     width: min(1100px, calc(100% - 32px));
4     margin: 32px auto;
5 }

app.css is included as a separate <link> in addition to the theme bundle – it does not replace the base theme but extends it.

CSS Bundle and Discovery

All CSS files are combined into a single bundle at init() and served via a single route:

1 GET /_theme/css/xpulse.css    ← minified all-in-one bundle
2 GET /_theme/theme.js          ← optional browser runtime script

No separate loading of individual theme files in the browser – one request, one bundle.

Bundle Build Order

1 1. public/css/base.css                     ← reset, body, noise overlay, animations
2 2. public/css/components/*.css             ← all components (via @import in components.css)
3 3. public/css/themes/*.css                 ← built-in theme tokens (dark, light)
4 4. src/themes/*.css                        ← app-specific overrides (optional)

Theme Name Discovery

Theme names are extracted from the bundled CSS via regex – no filename parsing, no manual registration:

1 [data-theme="dark"]   → 'dark'
2 [data-theme="light"]  → 'light'
3 [data-theme="app"]    → 'app'

Only themes that appear as selectors in the CSS are considered known.

App Theme Overrides

App CSS under src/themes/ is appended to the end of the bundle. The app theme link is additionally included as a separate <link> (via themeAssets()).

xpulse.json Configuration

1 {
2     "theme": {
3         "default": "dark",
4         "allow":   ["dark", "light"],
5         "cache": {
6             "enabled": true,
7             "ttl":     0
8         }
9     }
10 }

Key	Description	Default
`theme.default`	Active theme on startup	`"dark"`
`theme.allow`	Which themes the user may choose. `[]` = all discovered themes allowed	`[]`
`theme.cache.enabled`	Cache the CSS bundle (see caching section)	`true`
`theme.cache.ttl`	Cache expiry in seconds. `0` = no expiry	`0`

If allow is empty or not set – all discovered themes are permitted. If allow contains exactly ["dark", "light"] – toggle button instead of select. If allow contains more than 2 themes – select dropdown. If allow contains only one theme – no switcher in the UI.

Component Default (`@xpulse/theme/xpulse.json`)

1 {
2     "theme": {
3         "default": "dark",
4         "allow":   [],
5         "cache": {
6             "enabled": true,
7             "ttl":     0
8         }
9     }
10 }

Server API (Node.js)

1 import theme from '@xpulse/theme';
2  
3 // Initialise – build bundle, register routes
4 await theme.init();
5  
6 // With options
7 await theme.init({ root: process.cwd(), force: false });
8 // root  → where to look for src/themes/ (default: cwd)
9 // force → ignore cache and rebuild bundle
10  
11 // Active default theme (from config)
12 theme.current();     // → 'dark'
13  
14 // All themes discovered in the CSS
15 theme.available();   // → ['dark', 'light']
16  
17 // Permitted themes (filtered by theme.allow)
18 theme.allowed();     // → ['dark', 'light']
19  
20 // Existence check
21 theme.has('dark');   // → true
22  
23 // Theme switch (server-side)
24 theme.set('light');
25  
26 // Toggle (only when exactly 2 themes in allowed())
27 theme.toggle();
28  
29 // URLs
30 theme.href();        // → '/_theme/css/xpulse.css'
31 theme.scriptHref();  // → '/_theme/theme.js'

How the Toggle Works

Theme switching is controlled by the data-theme attribute on <html> – CSS selectors html[data-theme="dark"] take effect without any JS-side DOM styling. As a safeguard, the class theme-${name} is also set.

1 <html data-theme="dark" class="theme-dark">   ← default
2 <html data-theme="light" class="theme-light"> ← after toggle

Anti-FOUC: the inline script generated by themeAssets() sets data-theme and the class in the <head> before the first paint occurs.

User preference is stored in the browser's localStorage:

1 // localStorage key: xpulse_theme
2 'dark' | 'light' | ...

Emitted Events

Lifecycle

Event	Payload	When
`themes:load:start`	—	Bundle build begins
`theme:basics:loaded`	—	`base.css` loaded
`theme:components:loaded`	—	All component CSS loaded
`theme:loaded`	`{ name }`	Individual theme CSS loaded
`themes:concatenated`	—	All parts merged
`themes:minified`	—	Bundle minified
`themes:cached`	`{ path }`	Bundle written to disk
`themes:load:end`	—	Bundle build complete
`theme:ready`	`{ theme, available }`	`init()` fully complete

Cache

Event	Payload	When
`themes:cache:hit`	`{ path }`	Valid cache file found
`themes:cache:miss`	—	No cache, bundle is rebuilt
`themes:cache:loaded`	`{ serveCount }`	Bundle request served

Runtime

Event	Payload	When
`theme:changed`	`{ from, to }`	after `theme.set()` / `theme.toggle()`
`theme:warning`	`{ type, … }`	Invalid theme, toggle not possible etc.
`theme:error`	`{ type }`	No themes found in bundle

Caching

The CSS bundle is written to disk on the first init() and read directly from there on subsequent starts – no repeated reading and minifying.

1 var/cache/theme/xpulse.css

Behaviour by Environment

Situation	Behaviour
`NODE_ENV !== 'production'` (dev mode)	Cache always skipped, bundle rebuilt
Production, cache file present	Cache is loaded (event: `themes:cache:hit`)
Production, no cache file	Bundle is built and cached (event: `themes:cache:miss`)
`init({ force: true })`	Cache is ignored, bundle rebuilt
`theme.cache.ttl > 0`	Cache file too old → rebuilt

Configuration

1 {
2   "theme": {
3     "cache": {
4       "enabled": true,
5       "ttl":     0
6     }
7   }
8 }

ttl: 0 means no expiry – cache persists until the next manual build or force: true.

CSS Reset + Base

Extracted from pwa/public/css/base.css – completely generic:

1 /* Reset */
2 *, *::before, *::after { box-sizing: border-box; }
3 * { margin: 0; padding: 0; }
4  
5 /* Base */
6 body {
7     background:  var(--xpulse-bg);
8     color:       var(--xpulse-text);
9     font-family: var(--xpulse-font-mono);
10     font-size:   13px;
11     line-height: 1.7;
12 }

Noise Overlay

The characteristic brand effect – part of every xPulse tool:

1 body::before {
2     content: '';
3     position: fixed;
4     inset: 0;
5     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6     pointer-events: none;
7     z-index: 9999;
8     opacity: 0.4;
9 }

Disabled in the light theme:

1 html.theme-light body::before { display: none; }

Animations

1 @keyframes xpulse-fadeIn      /* opacity 0→1 + translateY 8px→0 */
2 @keyframes xpulse-msgIn       /* opacity 0→1 + translateY 4px→0 (subtler) */
3 @keyframes xpulse-pulse-dim   /* opacity 0.4↔1, waiting states */
4 @keyframes xpulse-dots        /* '' → '.' → '..' → '...' loading indicator */
5 @keyframes xpulse-shake       /* horizontal shake for error feedback */
6 @keyframes xpulse-spin        /* 360° rotate for spinner */
7 @keyframes xpulse-typingBounce /* typing indicator dots */

Utility classes:

1 .xpulse-fade-in  { animation: xpulse-fadeIn 0.3s ease both; }
2 .xpulse-spin     { animation: xpulse-spin 1s linear infinite; }

Component Classes

All classes follow the .xpulse-* prefix – consistent with the custom properties.

Typography

1 .xpulse-h1        /* Heading 1 – Fraunces, large, accent */
2 .xpulse-h2        /* Heading 2 */
3 .xpulse-h3        /* Heading 3 */
4 .xpulse-label     /* Uppercase label – mono, small, letter-spacing */
5 .xpulse-text      /* Body text – mono, 13px, line-height 1.6 */
6 .xpulse-text-sm   /* Small text – 11px */
7 .xpulse-code      /* Code block – mono, surface BG, border */
8 .xpulse-code-inline /* Inline code */

Layout

1 .xpulse-container  /* max-width, padding, centered */
2 .xpulse-stack      /* flex-column with gap */
3 .xpulse-row        /* flex-row with gap */
4 .xpulse-divider    /* <hr> equivalent */

Buttons

1 .xpulse-btn-primary    /* accent BG, uppercase, full width */
2 .xpulse-btn-secondary  /* border-only, hover → accent */
3 .xpulse-btn-danger     /* border danger, hover → filled */
4 .xpulse-btn-icon       /* icon-only, no border */

Inputs & Fields

1 .xpulse-input          /* text/password input – styled, focus → accent border */
2 .xpulse-field          /* container with gap */
3 .xpulse-field-label    /* uppercase, small */
4 .xpulse-field-hint     /* dim, small */

Cards & Elements

1 .xpulse-card           /* surface box with border, padding, border-radius */
2 .xpulse-badge          /* small label element */
3 .xpulse-tag            /* tag/pill */
4 .xpulse-table          /* table with correct spacing */

1 .xpulse-menu-btn       /* menu trigger button */
2 .xpulse-dropdown       /* dropdown container */

Miscellaneous

1 .xpulse-spinner        /* inline loading spinner */

Chat-specific (stays in xpulse-chat)

The following classes and properties do not belong in the package – they are specific to the chat app and remain in its local CSS:

1 /* Properties */
2 --xpulse-sidebar-width
3 --xpulse-topbar-height
4  
5 /* Classes */
6 .xpulse-status-dot       /* chat peer status */
7 .xpulse-status-badge     /* chat peer status badge */
8 .xpulse-waiting-dots     /* chat typing indicator */

Usage

1 <!-- Recommended: use template methods -->
2 {% themeAssets() %}
3 {% themeSwitcher() %}

themeAssets() renders:

<link> to the CSS bundle /_theme/css/xpulse.css
Optional: <link> to /_theme/app.css if an app theme is present
Inline anti-FOUC script (sets data-theme + class immediately in <head>)
<script defer src="/_theme/theme.js"> for the browser toggle

1 // Server: initialise the theme system
2 import theme from '@xpulse/theme';
3 await theme.init();

Package Structure

1 @xpulse/theme/
2   src/
3     index.js                        ← server API: init, set, toggle, current, available, has, href, scriptHref
4     template-methods/
5       theme-assets.js               ← themeAssets() template method
6       theme-switcher.js             ← themeSwitcher() template method
7       theme-token-editor.js         ← themeTokenEditor() template method
8   public/
9     css/
10       base.css                      ← reset, body styles, noise overlay, animations
11       components.css                ← @import list of all components
12       components/
13         boxes.css
14         brand.css
15         buttons.css
16         cards.css
17         forms.css
18         navigation.css
19         …
20       themes/
21         dark.css                    ← built-in dark theme
22         light.css                   ← built-in light theme
23     js/
24       theme.js                      ← browser runtime: toggle, token editor
25   docs/
26     de/
27       index.md
28       guide.md
29       api.md
30       styleguide/
31     en/
32       …
33   README.md
34   package.json
35   xpulse.json

Dependencies

1 @xpulse/theme
2   └── @xpulse/event    ← emit theme:ready, theme:changed

Migration from Previous CSS Custom Properties

Existing xPulse projects still use the old unprefixed properties. Migration at v1.4.0 (component based):

Old	New
`--bg`	`--xpulse-bg`
`--surface`	`--xpulse-surface`
`--border`	`--xpulse-border`
`--muted`	`--xpulse-muted`
`--text`	`--xpulse-text`
`--text-dim`	`--xpulse-text-dim`
`--accent`	`--xpulse-accent`
`--accent2`	`--xpulse-accent2`
`--danger`	`--xpulse-danger`
`--mono`	`--xpulse-font-mono`
`--serif`	`--xpulse-font-serif`
`.btn-primary`	`.xpulse-btn-primary`
`.btn-secondary`	`.xpulse-btn-secondary`
`.btn-danger`	`.xpulse-btn-danger`
`.btn-icon`	`.xpulse-btn-icon`
`.field`	`.xpulse-field`
`.field-label`	`.xpulse-field-label`
`.field-hint`	`.xpulse-field-hint`
`@keyframes fadeIn`	`@keyframes xpulse-fadeIn`
`@keyframes spin`	`@keyframes xpulse-spin`

Chat-specific properties (--sidebar-width, --topbar-height) and classes (.status-dot, .status-badge, .waiting-dots) remain in the chat CSS without renaming.

Documentation

The component documentation is rendered as a standalone HTML page – analogous to Bootstrap/Tailwind: live preview + code snippet side by side.

1 xpulse.one/doc/component/theme/

Structure:

Each component has a block with:
- Rendered preview (real HTML with the active theme)
- Code snippet (copy-pasteable)
- Variants (e.g. all button types)
Theme toggle visible directly in the docs – switch dark/light live
Custom properties overview as a table with live colour preview
Animations as live demo

The docs HTML lives in docs/de/components.html + docs/en/components.html as standalone HTML docs – rendered directly in the docs section of xpulse.one via <iframe> or embedded inline (see GLOBAL_concept-docs.md).

Consumers

Project	Status	Note
`chat.xpulse.one`	✅ Source	Migration at v1.4.0
`xpulse.one`	🔜 First smoke test	Determines whether the package is truly generic
`board.xpulse.one`	💡 Planned	Starts after smoke test

Future: ui.xpulse.one

Visual theme generator – a standalone xPulse tool on its own subdomain:

Live preview of all components with the active theme
Colour picker + sliders for all --xpulse-* properties
Selectable dark/light base
Export as a ready-to-use mytheme.css
Directly includable via discovery in any xPart

1 xpulse.one/doc/component/theme/   ← documentation + live preview
2 ui.xpulse.one                     ← theme generator + export

Status: idea – conceivable after board.xpulse.one.

1	/* Colours */
2	--xpulse-bg
3	--xpulse-surface
4	--xpulse-surface-strong
5	--xpulse-border
6	--xpulse-muted
7	--xpulse-text
8	--xpulse-text-dim
9	--xpulse-accent
10	--xpulse-accent2
11	--xpulse-accent-soft
12	--xpulse-warning
13	--xpulse-danger
14	--xpulse-shadow
15	--xpulse-input-bg
16
17	/* Typography */
18	--xpulse-font-mono
19	--xpulse-font-serif
20	--xpulse-font-size-body
21	--xpulse-font-size-display
22	--xpulse-font-size-h2
23	--xpulse-font-size-h3
24	--xpulse-font-size-lead
25	--xpulse-font-size-meta
26
27	/* Effects */
28	--xpulse-transition
29	--xpulse-radius
30	--xpulse-hover-opacity
31
32	/* Buttons */
33	--xpulse-button-text
34	--xpulse-button-radius
35	--xpulse-button-font-size
36	--xpulse-button-min-height
37	--xpulse-button-padding-y
38	--xpulse-button-padding-x
39	/* …as well as size variants: xs, sm, md, lg */
40	--xpulse-button-hover-opacity
41	--xpulse-button-active-scale

1	:root,
2	html[data-theme="dark"] {
3	--xpulse-bg: #0d0d0d;
4	--xpulse-surface: #141414;
5	--xpulse-surface-strong: #1b1b1b;
6	--xpulse-text: #c8c8c8;
7	--xpulse-text-dim: #555;
8	--xpulse-border: #222;
9	--xpulse-muted: #444;
10	--xpulse-accent: #8703b0;
11	--xpulse-accent2: #7eb8a4;
12	--xpulse-accent-soft: rgba(135, 3, 176, 0.18);
13	--xpulse-warning: #b89a3e;
14	--xpulse-danger: #c0606a;
15	--xpulse-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
16	--xpulse-input-bg: #141414;
17	/* …font size tokens, button tokens etc. */
18	}
19
20	/* System preference fallback if no data-theme is set yet */
21	@media (prefers-color-scheme: dark) {
22	html:not([data-theme]) { ... }
23	}

1	/* src/themes/app.css */
2	.xpulse-shell {
3	width: min(1100px, calc(100% - 32px));
4	margin: 32px auto;
5	}

1	GET /_theme/css/xpulse.css ← minified all-in-one bundle
2	GET /_theme/theme.js ← optional browser runtime script

1	1. public/css/base.css ← reset, body, noise overlay, animations
2	2. public/css/components/*.css ← all components (via @import in components.css)
3	3. public/css/themes/*.css ← built-in theme tokens (dark, light)
4	4. src/themes/*.css ← app-specific overrides (optional)

1	[data-theme="dark"] → 'dark'
2	[data-theme="light"] → 'light'
3	[data-theme="app"] → 'app'

1	{
2	"theme": {
3	"default": "dark",
4	"allow": ["dark", "light"],
5	"cache": {
6	"enabled": true,
7	"ttl": 0
8	}
9	}
10	}

1	{
2	"theme": {
3	"default": "dark",
4	"allow": [],
5	"cache": {
6	"enabled": true,
7	"ttl": 0
8	}
9	}
10	}

1	import theme from '@xpulse/theme';
2
3	// Initialise – build bundle, register routes
4	await theme.init();
5
6	// With options
7	await theme.init({ root: process.cwd(), force: false });
8	// root → where to look for src/themes/ (default: cwd)
9	// force → ignore cache and rebuild bundle
10
11	// Active default theme (from config)
12	theme.current(); // → 'dark'
13
14	// All themes discovered in the CSS
15	theme.available(); // → ['dark', 'light']
16
17	// Permitted themes (filtered by theme.allow)
18	theme.allowed(); // → ['dark', 'light']
19
20	// Existence check
21	theme.has('dark'); // → true
22
23	// Theme switch (server-side)
24	theme.set('light');
25
26	// Toggle (only when exactly 2 themes in allowed())
27	theme.toggle();
28
29	// URLs
30	theme.href(); // → '/_theme/css/xpulse.css'
31	theme.scriptHref(); // → '/_theme/theme.js'

1	<html data-theme="dark" class="theme-dark"> ← default
2	<html data-theme="light" class="theme-light"> ← after toggle

1	/* Reset */
2	, ::before, *::after { box-sizing: border-box; }
3	* { margin: 0; padding: 0; }
4
5	/* Base */
6	body {
7	background: var(--xpulse-bg);
8	color: var(--xpulse-text);
9	font-family: var(--xpulse-font-mono);
10	font-size: 13px;
11	line-height: 1.7;
12	}

1	body::before {
2	content: '';
3	position: fixed;
4	inset: 0;
5	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6	pointer-events: none;
7	z-index: 9999;
8	opacity: 0.4;
9	}

1	@keyframes xpulse-fadeIn /* opacity 0→1 + translateY 8px→0 */
2	@keyframes xpulse-msgIn /* opacity 0→1 + translateY 4px→0 (subtler) */
3	@keyframes xpulse-pulse-dim /* opacity 0.4↔1, waiting states */
4	@keyframes xpulse-dots /* '' → '.' → '..' → '...' loading indicator */
5	@keyframes xpulse-shake /* horizontal shake for error feedback */
6	@keyframes xpulse-spin /* 360° rotate for spinner */
7	@keyframes xpulse-typingBounce /* typing indicator dots */

1	.xpulse-fade-in { animation: xpulse-fadeIn 0.3s ease both; }
2	.xpulse-spin { animation: xpulse-spin 1s linear infinite; }

1	.xpulse-h1 /* Heading 1 – Fraunces, large, accent */
2	.xpulse-h2 /* Heading 2 */
3	.xpulse-h3 /* Heading 3 */
4	.xpulse-label /* Uppercase label – mono, small, letter-spacing */
5	.xpulse-text /* Body text – mono, 13px, line-height 1.6 */
6	.xpulse-text-sm /* Small text – 11px */
7	.xpulse-code /* Code block – mono, surface BG, border */
8	.xpulse-code-inline /* Inline code */

1	.xpulse-container /* max-width, padding, centered */
2	.xpulse-stack /* flex-column with gap */
3	.xpulse-row /* flex-row with gap */
4	.xpulse-divider /* <hr> equivalent */

1	.xpulse-btn-primary /* accent BG, uppercase, full width */
2	.xpulse-btn-secondary /* border-only, hover → accent */
3	.xpulse-btn-danger /* border danger, hover → filled */
4	.xpulse-btn-icon /* icon-only, no border */

1	.xpulse-input /* text/password input – styled, focus → accent border */
2	.xpulse-field /* container with gap */
3	.xpulse-field-label /* uppercase, small */
4	.xpulse-field-hint /* dim, small */

1	.xpulse-card /* surface box with border, padding, border-radius */
2	.xpulse-badge /* small label element */
3	.xpulse-tag /* tag/pill */
4	.xpulse-table /* table with correct spacing */

1	.xpulse-menu-btn /* menu trigger button */
2	.xpulse-dropdown /* dropdown container */