thekselect 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Thekster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,338 @@
+# ThekSelect
+
+A lightweight, framework-agnostic, and accessible select library with native drag-and-drop tag reordering.
+
+## Features
+
+- Headless core with renderer/state separation
+- Search with debounce support
+- Single and multi-select modes
+- User-created tags (`canCreate`)
+- Remote async options (`loadOptions`)
+- Native HTML5 drag-and-drop for selected tags
+- Keyboard-friendly and ARIA-aware behavior
+- Height control via `height` option (`number` or CSS string)
+
+## Installation
+
+```bash
+npm install thekselect
+```
+
+## Release
+
+Before publishing:
+
+1. Ensure the package name and version in `package.json` are correct.
+2. Add an `NPM_TOKEN` repository secret in GitHub.
+3. Push the commit you want to publish.
+
+Verify the package locally:
+
+```bash
+npm run release:check
+```
+
+Publish through GitHub Actions:
+
+1. Bump `package.json` to the version you want to publish.
+2. Push the version commit to GitHub.
+3. Trigger one of these:
+   - Create and publish a GitHub Release.
+   - Open `Actions` -> `Publish to npm` -> `Run workflow`.
+
+Manual fallback from a local terminal:
+
+```bash
+npm run release:check
+npm publish --access public
+```
+
+`prepublishOnly` runs the same release checks before `npm publish`.
+
+## CSS Themes
+
+Import one of the distributed theme files:
+
+```js
+import 'thekselect/css/base.css';
+// or
+import 'thekselect/css/dark.css';
+// or
+import 'thekselect/css/forest.css';
+// or
+import 'thekselect/css/red.css';
+// or
+import 'thekselect/css/blue.css';
+// or
+import 'thekselect/css/gray.css';
+// or
+import 'thekselect/css/bootstrap.css';
+// or
+import 'thekselect/css/tailwind.css';
+// or
+import 'thekselect/css/material.css';
+```
+
+`base.css` is the system theme: light defaults with automatic dark-mode tokens via `prefers-color-scheme`.
+
+Customize tokens with plain CSS:
+
+```css
+:root {
+  --thek-primary: #1d4ed8;
+  --thek-border-radius: 12px;
+  --thek-height-md: 44px;
+}
+```
+
+## Quick Start
+
+```html
+<select id="my-select">
+  <option value="">Choose one...</option>
+  <option value="react">React</option>
+  <option value="vue">Vue</option>
+</select>
+```
+
+```js
+import { ThekSelect } from 'thekselect';
+
+const select = ThekSelect.init('#my-select', {
+  placeholder: 'Select an option...'
+});
+```
+
+### Browser `<script>` Tag (No Bundler)
+
+```html
+<link rel="stylesheet" href="./dist/css/base.css" />
+<script src="./dist/thekselect.umd.min.cjs"></script>
+
+<select id="my-select">
+  <option value="react">React</option>
+  <option value="vue">Vue</option>
+</select>
+
+<script>
+  const { ThekSelect } = window.ThekSelect;
+  ThekSelect.init('#my-select');
+</script>
+```
+
+If your static server does not serve `.cjs` files as JavaScript, rename the UMD output to `.js` for browser delivery.
+
+### Initialize From Existing `<select>`
+
+If options already exist in your native `<select>`, initialize directly from it:
+
+```html
+<select id="country-select" multiple>
+  <option value="us" selected>United States</option>
+  <option value="de">Germany</option>
+  <option value="jp" disabled>Japan (disabled)</option>
+</select>
+```
+
+```js
+import { ThekSelect } from 'thekselect';
+
+ThekSelect.init('#country-select');
+```
+
+`ThekSelect` reads existing `<option>` values, labels, `selected`, `disabled`, and `multiple` automatically.
+
+### Large Datasets (Virtualization)
+
+```html
+<div id="big-list"></div>
+```
+
+```js
+ThekSelect.init('#big-list', {
+  options: hugeOptions,
+  searchable: true,
+  virtualize: true,
+  virtualThreshold: 80,
+  virtualItemHeight: 40,
+  virtualOverscan: 4
+});
+```
+
+### Global Defaults (App-wide)
+
+```html
+<div id="first"></div>
+<div id="second"></div>
+```
+
+```js
+import { ThekSelect } from 'thekselect';
+
+ThekSelect.setDefaults({
+  height: 40,
+  virtualize: true
+});
+
+// Uses global defaults
+ThekSelect.init('#first');
+
+// Instance options still override globals
+ThekSelect.init('#second', { height: 52 });
+
+// Optional cleanup (tests, app teardown, etc.)
+ThekSelect.resetDefaults();
+```
+
+## Development (Repo)
+
+```bash
+npm install
+npm test
+```
+
+### Scripts
+
+| Script             | Purpose                                                           |
+| ------------------ | ----------------------------------------------------------------- |
+| `npm run dev`      | Start Vite dev server for local development/showcase.             |
+| `npm run build`    | Build library outputs into `dist/` and emit types.                |
+| `npm run preview`  | Preview built output with Vite. Optional for library development. |
+| `npm test`         | Run test suite in watch mode.                                     |
+| `npm run coverage` | Run tests with coverage report.                                   |
+
+Notes:
+
+- `preview` is optional for day-to-day library work.
+- For this repo, tests are the primary correctness check when bundle preview is unavailable.
+
+## Showcase
+
+The demo page is `showcase/index.html` and is intended to run through Vite during development.
+
+```bash
+npm run dev
+```
+
+Then open the local URL printed by Vite.
+
+## Configuration
+
+| Option              | Type                                     | Default                  | Description                                            |
+| ------------------- | ---------------------------------------- | ------------------------ | ------------------------------------------------------ |
+| `options`           | `ThekSelectOption[]`                     | `[]`                     | Initial options list.                                  |
+| `multiple`          | `boolean`                                | `false`                  | Enable multi-select mode.                              |
+| `searchable`        | `boolean`                                | `true`                   | Enable search input and filtering.                     |
+| `disabled`          | `boolean`                                | `false`                  | Disable interaction.                                   |
+| `placeholder`       | `string`                                 | `'Select...'`            | Placeholder text.                                      |
+| `canCreate`         | `boolean`                                | `false`                  | Allow creating new options from input.                 |
+| `createText`        | `string`                                 | `"Create '{%t}'..."`     | Create row label template (`{%t}` = typed text).       |
+| `height`            | `number \| string`                       | `40`                     | Control control/dropdown input height (`number` = px). |
+| `debounce`          | `number`                                 | `300`                    | Debounce delay for `loadOptions`.                      |
+| `maxSelectedLabels` | `number`                                 | `3`                      | Max visible tags before summary text.                  |
+| `displayField`      | `string`                                 | `'label'`                | Field used for rendering text.                         |
+| `valueField`        | `string`                                 | `'value'`                | Field used as internal value key.                      |
+| `maxOptions`        | `number \| null`                         | `null`                   | Limit rendered dropdown items.                         |
+| `virtualize`        | `boolean`                                | `false`                  | Enable virtualized option rendering for large lists.   |
+| `virtualItemHeight` | `number`                                 | `40`                     | Row height (px) used by virtualization calculations.   |
+| `virtualOverscan`   | `number`                                 | `4`                      | Extra rows rendered above and below viewport.          |
+| `virtualThreshold`  | `number`                                 | `80`                     | Minimum option count before virtualization activates.  |
+| `loadOptions`       | `(query) => Promise<ThekSelectOption[]>` | `undefined`              | Async loader for remote search.                        |
+| `renderOption`      | `(option) => string \| HTMLElement`      | `(o) => o[displayField]` | Custom dropdown renderer.                              |
+| `renderSelection`   | `(option) => string \| HTMLElement`      | `(o) => o[displayField]` | Custom selected-item renderer.                         |
+
+## Option Shape
+
+```ts
+interface ThekSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  selected?: boolean;
+  data?: any;
+  [key: string]: any;
+}
+```
+
+| Field           | Type      | Description                                                        |
+| --------------- | --------- | ------------------------------------------------------------------ |
+| `value`         | `string`  | Stable internal value used for selection state and emitted values. |
+| `label`         | `string`  | Default display text shown in dropdown and selected state.         |
+| `disabled`      | `boolean` | Prevents selecting the option when `true`.                         |
+| `selected`      | `boolean` | Marks initial selection when options are provided at init time.    |
+| `data`          | `any`     | Optional extra metadata for custom rendering and app logic.        |
+| `[key: string]` | `any`     | Allows custom fields for `displayField`/`valueField` mapping.      |
+
+When using custom fields (`valueField`, `displayField`), keep `value` and `label` available if you share the same option objects across default and custom-field instances.
+
+## API Methods
+
+- `getValue()`: Return selected value (`string`), values (`string[]`), or `undefined` when single-select has no selection.
+- `getSelectedOptions()`: Return selected option object(s), or `undefined` when single-select has no selection.
+- `setValue(value, silent = false)`: Set current selection programmatically.
+- `setHeight(height)`: Update height at runtime (`number` = px or CSS string like `'2.75rem'`).
+- `setMaxOptions(limit)`: Update dropdown item limit.
+- `setRenderOption(callback)`: Update option rendering function.
+- `ThekSelect.setDefaults(defaults)`: Set global defaults for future instances.
+- `ThekSelect.resetDefaults()`: Clear global defaults.
+- `on(event, callback)`: Subscribe to component events. Returns an unsubscribe function.
+- `destroy()`: Tear down and restore original element.
+
+## API Reference
+
+| Method                      | Parameters                                              | Returns                                               | Description                                                                                   |
+| --------------------------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `getValue()`                | none                                                    | `string \| string[] \| undefined`                     | Gets current selected value(s) from component state.                                          |
+| `getSelectedOptions()`      | none                                                    | `ThekSelectOption \| ThekSelectOption[] \| undefined` | Gets current selected option object(s).                                                       |
+| `setValue(value, silent?)`  | `value: string \| string[]`, `silent?: boolean`         | `void`                                                | Sets selected value(s). In single mode keeps first value; in multi mode de-duplicates values. |
+| `setHeight(height)`         | `height: number \| string`                              | `void`                                                | Sets control height for the instance. Numeric input is treated as px.                         |
+| `setMaxOptions(limit)`      | `limit: number \| null`                                 | `void`                                                | Limits filtered options rendered in dropdown (`null` disables limit).                         |
+| `setRenderOption(callback)` | `callback: (option) => string \| HTMLElement`           | `void`                                                | Overrides dropdown option rendering for this instance.                                        |
+| `on(event, callback)`       | `event: ThekSelectEvent`, `callback: (payload) => void` | `() => void`                                          | Subscribes to an event and returns an unsubscribe function.                                   |
+| `destroy()`                 | none                                                    | `void`                                                | Removes generated DOM/listeners and restores original element visibility.                     |
+
+| Static Method                       | Parameters                                                    | Returns      | Description                                      |
+| ----------------------------------- | ------------------------------------------------------------- | ------------ | ------------------------------------------------ |
+| `ThekSelect.init(element, config?)` | `element: string \| HTMLElement`, `config?: ThekSelectConfig` | `ThekSelect` | Creates and initializes a new instance.          |
+| `ThekSelect.setDefaults(defaults)`  | `defaults: Partial<ThekSelectConfig>`                         | `void`       | Sets process-wide defaults for future instances. |
+| `ThekSelect.resetDefaults()`        | none                                                          | `void`       | Clears global defaults.                          |
+
+## Events
+
+- `change`: Selection changed (value or values).
+- `open`: Dropdown opened.
+- `close`: Dropdown closed.
+- `search`: Search input changed.
+- `tagAdded`: Tag added in multi mode.
+- `tagRemoved`: Tag removed in multi mode.
+- `reordered`: Selected tags reordered by drag-and-drop.
+
+## Troubleshooting
+
+### `Error: spawn EPERM` on `npm run dev`, `npm run build`, or `npm run preview` (Windows)
+
+This is typically an environment policy/permissions issue around spawning build tooling (e.g. esbuild), not a ThekSelect API issue.
+
+Recommended checks:
+
+1. Reinstall dependencies:
+
+```bash
+rmdir /s /q node_modules
+npm install
+```
+
+2. Verify esbuild binary can execute:
+
+```bash
+node_modules\\@esbuild\\win32-x64\\esbuild.exe --version
+```
+
+3. If blocked, review antivirus/EDR/AppLocker/Windows Security rules for child-process execution from your workspace.
+
+4. Use `npm test` to continue validating behavior while fixing build environment constraints.
+
+## License
+
+MIT

package/dist/core/config-utils.d.ts

@@ -0,0 +1,5 @@
+import { ThekSelectConfig, ThekSelectOption, ThekSelectState } from './types.js';
+export declare const NOOP_LOAD_OPTIONS: (_query: string) => Promise<ThekSelectOption[]>;
+export declare function parseSelectOptions(select: HTMLSelectElement): ThekSelectOption[];
+export declare function buildConfig<T = unknown>(element: HTMLElement, config: ThekSelectConfig<T>, globalDefaults?: Partial<ThekSelectConfig<T>>): Required<ThekSelectConfig<T>>;
+export declare function buildInitialState<T = unknown>(config: Required<ThekSelectConfig<T>>): ThekSelectState<T>;

package/dist/core/dom-renderer.d.ts

@@ -0,0 +1,38 @@
+import { ThekSelectConfig, ThekSelectState, ThekSelectOption } from './types.js';
+export interface RendererCallbacks {
+    onSelect: (option: ThekSelectOption) => void;
+    onCreate: (label: string) => void;
+    onRemove: (option: ThekSelectOption) => void;
+    onReorder: (from: number, to: number) => void;
+}
+export declare class DomRenderer {
+    private config;
+    private id;
+    private callbacks;
+    wrapper: HTMLElement;
+    control: HTMLElement;
+    selectionContainer: HTMLElement;
+    indicatorsContainer: HTMLElement;
+    placeholderElement: HTMLElement;
+    input: HTMLInputElement;
+    dropdown: HTMLElement;
+    optionsList: HTMLElement;
+    private lastState;
+    private lastFilteredOptions;
+    constructor(config: Required<ThekSelectConfig>, id: string, callbacks: RendererCallbacks);
+    private normalizeHeight;
+    private applyHeight;
+    createDom(): void;
+    render(state: ThekSelectState, filteredOptions: ThekSelectOption[]): void;
+    private renderSelectionContent;
+    private renderOptionsContent;
+    private createSpacer;
+    private createOptionItem;
+    private handleOptionsScroll;
+    private handleOptionsWheel;
+    positionDropdown(): void;
+    private setupTagDnd;
+    setHeight(height: number | string): void;
+    updateConfig(newConfig: Partial<Required<ThekSelectConfig>>): void;
+    destroy(): void;
+}

package/dist/core/event-emitter.d.ts

@@ -0,0 +1,7 @@
+import { ThekSelectEvent } from './types.js';
+export declare class ThekSelectEventEmitter {
+    private listeners;
+    on(event: ThekSelectEvent, callback: Function): () => void;
+    off(event: ThekSelectEvent, callback: Function): void;
+    emit(event: ThekSelectEvent, data: unknown): void;
+}

package/dist/core/options-logic.d.ts

@@ -0,0 +1,4 @@
+import { ThekSelectConfig, ThekSelectOption, ThekSelectState } from './types.js';
+export declare function isRemoteMode<T = unknown>(config: Required<ThekSelectConfig<T>>): boolean;
+export declare function getFilteredOptions<T = unknown>(config: Required<ThekSelectConfig<T>>, state: ThekSelectState<T>): ThekSelectOption<T>[];
+export declare function mergeSelectedOptionsByValue<T = unknown>(valueField: string, selectedValues: string[], previous: Record<string, ThekSelectOption<T>>, latestOptions: ThekSelectOption<T>[]): Record<string, ThekSelectOption<T>>;

package/dist/core/selection-logic.d.ts

@@ -0,0 +1,20 @@
+import { ThekSelectConfig, ThekSelectOption, ThekSelectState } from './types.js';
+type TagEvent = 'tagAdded' | 'tagRemoved';
+export interface SelectionUpdate<T = unknown> {
+    selectedValues: string[];
+    selectedOptionsByValue: Record<string, ThekSelectOption<T>>;
+    inputValue?: string;
+    tagEvent?: TagEvent;
+    tagOption?: ThekSelectOption<T>;
+}
+export declare function applySelection<T = unknown>(config: Required<ThekSelectConfig<T>>, state: ThekSelectState<T>, option: ThekSelectOption<T>): SelectionUpdate<T>;
+export declare function createOptionFromLabel<T = unknown>(config: Required<ThekSelectConfig<T>>, label: string): ThekSelectOption<T>;
+export declare function removeLastSelection<T = unknown>(config: Required<ThekSelectConfig<T>>, state: ThekSelectState<T>): {
+    selectedValues: string[];
+    selectedOptionsByValue: Record<string, ThekSelectOption<T>>;
+    removedOption?: ThekSelectOption<T>;
+};
+export declare function reorderSelectedValues(state: ThekSelectState, from: number, to: number): string[];
+export declare function resolveSelectedOptions<T = unknown>(config: Required<ThekSelectConfig<T>>, state: ThekSelectState<T>): ThekSelectOption<T>[];
+export declare function buildSelectedOptionsMapFromValues<T = unknown>(config: Required<ThekSelectConfig<T>>, state: ThekSelectState<T>, values: string[]): Record<string, ThekSelectOption<T>>;
+export {};

package/dist/core/state.d.ts

@@ -0,0 +1,10 @@
+export type StateListener<T> = (state: T) => void;
+export declare class StateManager<T extends object> {
+    private state;
+    private listeners;
+    constructor(initialState: T);
+    getState(): T;
+    setState(newState: Partial<T>): void;
+    subscribe(listener: StateListener<T>): () => void;
+    private notify;
+}

package/dist/core/thekselect.d.ts

@@ -0,0 +1,42 @@
+import { ThekSelectConfig, ThekSelectOption, ThekSelectEvent } from './types.js';
+export declare class ThekSelect<T = unknown> {
+    private static globalDefaults;
+    private config;
+    private stateManager;
+    private renderer;
+    private id;
+    private events;
+    private originalElement;
+    private unsubscribeEvents;
+    private unsubscribeState?;
+    private remoteRequestId;
+    private isDestroyed;
+    private focusTimeoutId;
+    private constructor();
+    static init<T = unknown>(element: string | HTMLElement, config?: ThekSelectConfig<T>): ThekSelect<T>;
+    static setDefaults(defaults: Partial<ThekSelectConfig>): void;
+    static resetDefaults(): void;
+    private initialize;
+    private setupListeners;
+    private handleSearch;
+    private setupHandleSearch;
+    private handleKeyDown;
+    private toggleDropdown;
+    private openDropdown;
+    private closeDropdown;
+    private handleSelect;
+    private handleCreate;
+    private handleRemoveLastSelection;
+    private handleReorder;
+    private syncOriginalElement;
+    private render;
+    on(event: ThekSelectEvent, callback: Function): () => void;
+    private emit;
+    getValue(): string | string[] | undefined;
+    getSelectedOptions(): ThekSelectOption<T> | ThekSelectOption<T>[] | undefined;
+    setValue(value: string | string[], silent?: boolean): void;
+    setHeight(height: number | string): void;
+    setRenderOption(callback: (option: ThekSelectOption<T>) => string | HTMLElement): void;
+    setMaxOptions(max: number | null): void;
+    destroy(): void;
+}

package/dist/core/types.d.ts

@@ -0,0 +1,40 @@
+export interface ThekSelectOption<T = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+    data?: T;
+    [key: string]: unknown;
+}
+export interface ThekSelectConfig<T = unknown> {
+    options?: ThekSelectOption<T>[];
+    multiple?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    canCreate?: boolean;
+    createText?: string;
+    height?: number | string;
+    debounce?: number;
+    maxSelectedLabels?: number;
+    displayField?: string;
+    valueField?: string;
+    maxOptions?: number | null;
+    virtualize?: boolean;
+    virtualItemHeight?: number;
+    virtualOverscan?: number;
+    virtualThreshold?: number;
+    loadOptions?: (query: string) => Promise<ThekSelectOption<T>[]>;
+    renderOption?: (option: ThekSelectOption<T>) => string | HTMLElement;
+    renderSelection?: (option: ThekSelectOption<T>) => string | HTMLElement;
+}
+export interface ThekSelectState<T = unknown> {
+    options: ThekSelectOption<T>[];
+    selectedValues: string[];
+    selectedOptionsByValue: Record<string, ThekSelectOption<T>>;
+    isOpen: boolean;
+    focusedIndex: number;
+    inputValue: string;
+    isLoading: boolean;
+}
+export type ThekSelectEvent = 'change' | 'open' | 'close' | 'search' | 'tagAdded' | 'tagRemoved' | 'reordered';

package/dist/css/base.css

@@ -0,0 +1,37 @@
+:root {
+  --thek-primary: #0f172a;
+  --thek-primary-light: #f1f5f9;
+  --thek-bg-surface: #ffffff;
+  --thek-bg-panel: #f8fafc;
+  --thek-bg-subtle: #f1f5f9;
+  --thek-border: #e2e8f0;
+  --thek-border-strong: #cbd5e1;
+  --thek-text-main: #0f172a;
+  --thek-text-muted: #64748b;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #ef4444;
+  --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --thek-font-family: inherit;
+  --thek-border-radius: 8px;
+  --thek-height-sm: 32px;
+  --thek-height-md: 40px;
+  --thek-height-lg: 48px;
+  --thek-item-padding: 8px 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --thek-primary: #38bdf8;
+    --thek-primary-light: rgba(56, 189, 248, 0.15);
+    --thek-bg-surface: #0f172a;
+    --thek-bg-panel: #334155;
+    --thek-bg-subtle: #475569;
+    --thek-border: #334155;
+    --thek-border-strong: #475569;
+    --thek-text-main: #f8fafc;
+    --thek-text-muted: #94a3b8;
+    --thek-text-inverse: #0f172a;
+    --thek-danger: #f43f5e;
+    --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  }
+}

package/dist/css/blue.css

@@ -0,0 +1,14 @@
+html[data-thek-theme='blue'] {
+  --thek-primary: #1d4ed8;
+  --thek-primary-light: #dbeafe;
+  --thek-bg-surface: #f8fbff;
+  --thek-bg-panel: #eff6ff;
+  --thek-bg-subtle: #dbeafe;
+  --thek-border: #bfdbfe;
+  --thek-border-strong: #60a5fa;
+  --thek-text-main: #1e3a8a;
+  --thek-text-muted: #1d4ed8;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #dc2626;
+  --thek-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.3);
+}

package/dist/css/bootstrap.css

@@ -0,0 +1,15 @@
+html[data-thek-theme='bootstrap'] {
+  --thek-primary: #0d6efd;
+  --thek-primary-light: #cfe2ff;
+  --thek-bg-surface: #ffffff;
+  --thek-bg-panel: #f8f9fa;
+  --thek-bg-subtle: #e9ecef;
+  --thek-border: #dee2e6;
+  --thek-border-strong: #adb5bd;
+  --thek-text-main: #212529;
+  --thek-text-muted: #6c757d;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #dc3545;
+  --thek-shadow: 0 10px 20px -10px rgba(33, 37, 41, 0.25);
+  --thek-border-radius: 6px;
+}

package/dist/css/dark.css

@@ -0,0 +1,14 @@
+html[data-thek-theme='dark'] {
+  --thek-primary: #38bdf8;
+  --thek-primary-light: rgba(56, 189, 248, 0.15);
+  --thek-bg-surface: #0f172a;
+  --thek-bg-panel: #334155;
+  --thek-bg-subtle: #475569;
+  --thek-border: #334155;
+  --thek-border-strong: #475569;
+  --thek-text-main: #f8fafc;
+  --thek-text-muted: #94a3b8;
+  --thek-text-inverse: #0f172a;
+  --thek-danger: #f43f5e;
+  --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+}

package/dist/css/forest.css

@@ -0,0 +1,14 @@
+html[data-thek-theme='forest'] {
+  --thek-primary: #14532d;
+  --thek-primary-light: #dcfce7;
+  --thek-bg-surface: #f7fee7;
+  --thek-bg-panel: #ecfccb;
+  --thek-bg-subtle: #d9f99d;
+  --thek-border: #a3e635;
+  --thek-border-strong: #65a30d;
+  --thek-text-main: #1f2937;
+  --thek-text-muted: #4b5563;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #dc2626;
+  --thek-shadow: 0 8px 18px -6px rgba(20, 83, 45, 0.2);
+}

package/dist/css/gray.css

@@ -0,0 +1,14 @@
+html[data-thek-theme='gray'] {
+  --thek-primary: #374151;
+  --thek-primary-light: #e5e7eb;
+  --thek-bg-surface: #f9fafb;
+  --thek-bg-panel: #f3f4f6;
+  --thek-bg-subtle: #e5e7eb;
+  --thek-border: #d1d5db;
+  --thek-border-strong: #9ca3af;
+  --thek-text-main: #111827;
+  --thek-text-muted: #4b5563;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #ef4444;
+  --thek-shadow: 0 8px 18px -8px rgba(55, 65, 81, 0.22);
+}

package/dist/css/material.css

@@ -0,0 +1,15 @@
+html[data-thek-theme='material'] {
+  --thek-primary: #6750a4;
+  --thek-primary-light: #eaddff;
+  --thek-bg-surface: #fffbfe;
+  --thek-bg-panel: #f7f2fa;
+  --thek-bg-subtle: #ede7f6;
+  --thek-border: #d0c4dc;
+  --thek-border-strong: #b39ddb;
+  --thek-text-main: #1d1b20;
+  --thek-text-muted: #625b71;
+  --thek-text-inverse: #ffffff;
+  --thek-danger: #b3261e;
+  --thek-shadow: 0 10px 20px -10px rgba(103, 80, 164, 0.35);
+  --thek-border-radius: 10px;
+}