ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
37 lines (36 loc) • 1.55 kB
TypeScript
import { EventManager } from '@/utils/builder';
import { RanElement } from '@/utils/index';
import type { RanThemeName } from '@/utils/theme';
/**
* `<r-theme-switch>` — a three-state (system / light / dark) segmented control
* wired to ranui's theme API (`setTheme`/`getTheme`, localStorage `ran-theme`).
* Multiple instances on one page stay in sync; `label-*` attributes localize
* the aria-labels. Emits a composed `change` event with `{ theme }`.
*/
export declare class ThemeSwitch extends RanElement {
static get observedAttributes(): string[];
_events: EventManager;
_shadowDom: ShadowRoot;
_group: HTMLDivElement;
constructor();
get sheet(): string;
set sheet(v: string);
/** Current selection; falls back to 'system' when nothing is forced. */
get value(): RanThemeName;
set value(v: RanThemeName);
_label(choice: RanThemeName): string;
_syncLabels(): void;
_reflect(): void;
_select(choice: RanThemeName): void;
/** Keep <meta name="theme-color"> (browser/PWA chrome) in step. Forced
* themes get the page's resolved background (no hardcoded colors); 'system'
* restores each meta's original — possibly media-qualified — content. */
_syncMeta(choice: RanThemeName): void;
_handleClick: (event: MouseEvent) => void;
_handleSync: () => void;
handlerExternalCss: () => void;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, old: string, next: string): void;
}
export default ThemeSwitch;