tosijs-ui 1.0.10 → 1.0.11

package/dist/live-example.d.ts

@@ -17,6 +17,7 @@ interface ExampleParts extends PartsMap {
 export declare class LiveExample extends Component<ExampleParts> {
     persistToDom: boolean;
     prettier: boolean;
+    iframe: boolean;
     prefix: string;
     storageKey: string;
     context: ExampleContext;
@@ -55,6 +56,9 @@ export declare class LiveExample extends Component<ExampleParts> {
     refreshRemote: () => void;
     updateSources: () => void;
     refresh: () => Promise<void>;
+    private refreshInline;
+    private registerComponentsInIframe;
+    private refreshInIframe;
     initFromElements(elements: HTMLElement[]): void;
     showDefaultTab(): void;
     render(): void;

package/dist/localize.d.ts

@@ -5,11 +5,11 @@ interface TranslationMap {
 }
 export declare const i18n: {
     locale: String & import("tosijs").XinProps<string>;
-    locales: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]> & import("tosijs").BoxedArrayProps<string>;
-    languages: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]> & import("tosijs").BoxedArrayProps<string>;
-    emoji: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]> & import("tosijs").BoxedArrayProps<string>;
+    locales: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]>;
+    languages: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]>;
+    emoji: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]>;
     stringMap: {
-        [x: string]: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]> & import("tosijs").BoxedArrayProps<string>;
+        [x: string]: (String & import("tosijs").XinProps<string>)[] & import("tosijs").XinProps<string[]>;
     } & import("tosijs").XinProps<TranslationMap>;
     localeOptions: ({
         icon: any;
@@ -23,11 +23,7 @@ export declare const i18n: {
         icon: any;
         caption: string;
         value: string;
-    }[]> & import("tosijs").BoxedArrayProps<{
-        icon: any;
-        caption: string;
-        value: string;
-    }>;
+    }[]>;
 } & import("tosijs").XinProps<{
     locale: string;
     locales: string[];

package/dist/tab-selector.d.ts

@@ -6,6 +6,12 @@ export declare class TabSelector extends WebComponent {
     makeTab(tabs: TabSelector, tabBody: HTMLElement, bodyId: string): HTMLElement;
     static styleSpec: {
         ':host': {
+            '--tosi-tabs-selected-color': string;
+            '--tosi-tabs-bar-color': string;
+            '--tosi-tabs-bar-height': string;
+            '--xin-tabs-selected-color': string;
+            '--xin-tabs-bar-color': string;
+            '--xin-tabs-bar-height': string;
             display: string;
             flexDirection: string;
             position: string;

package/dist/theme.d.ts

@@ -0,0 +1,52 @@
+import { Color, XinStyleSheet, XinStyleRule } from 'tosijs';
+export interface ThemeColors {
+    accent: Color;
+    background: Color;
+    text: Color;
+    accentText?: Color;
+    backgroundInset?: Color;
+    border?: Color;
+    shadow?: Color;
+    focus?: Color;
+}
+export declare const defaultColors: ThemeColors;
+export declare const baseVariables: XinStyleRule;
+/**
+ * Creates a complete theme stylesheet from colors
+ */
+export declare function createTheme(colors: ThemeColors): XinStyleSheet;
+/**
+ * Creates a dark theme by inverting luminance of all color values
+ */
+export declare function createDarkTheme(colors: ThemeColors): XinStyleSheet;
+/**
+ * Applies a theme to the document
+ * @param theme - The theme stylesheet to apply
+ * @param id - Optional ID for the style element (default: 'tosi-theme')
+ */
+export declare function applyTheme(theme: XinStyleSheet, id?: string): void;
+export declare const baseTheme: XinStyleSheet;
+export declare const baseDarkTheme: XinStyleSheet;
+/**
+ * Creates CSS variable aliases for backward compatibility with --xin- prefix
+ * Add this to your theme if migrating from older xinjs-ui versions
+ */
+export declare const legacyAliases: XinStyleRule;
+/**
+ * Creates a theme with legacy aliases included
+ */
+export declare function createThemeWithLegacy(colors: ThemeColors): XinStyleSheet;
+/**
+ * Helper to create component-specific variables that derive from base variables
+ *
+ * Example usage in a component:
+ * ```typescript
+ * const selectVars = componentVars('select', {
+ *   gap: varDefault.tosiSpacingSm('8px'),
+ *   touchSize: varDefault.tosiTouchSize('44px'),
+ * })
+ * ```
+ */
+export declare function componentVars<T extends Record<string, string>>(componentName: string, defaults: T): {
+    [K in keyof T]: string;
+};

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.0.9";
+export declare const version = "1.0.11";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-ui",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "simple robust web-components for use with xinjs or anything else",
   "scripts": {
     "start": "bun --watch bin/dev.ts",
@@ -34,9 +34,10 @@
     "bun-types": "latest",
     "chokidar": "^4.0.3",
     "eslint": "^8.57.1",
+    "happy-dom": "^20.3.1",
+    "playwright": "^1.57.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.9.3",
-    "playwright": "^1.57.0"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "marked": "^16.4.2",
@@ -44,6 +45,7 @@
   },
   "files": [
     "/dist",
+    "/bin/docs.ts",
     "/LICENSE",
     "/README.md"
   ],