tosijs-ui 1.2.2 → 1.3.0

package/README.md

@@ -1,8 +1,5 @@
 # tosijs-ui
 
-> `xinjs-ui` has been renamed `tosijs-ui`. Updating the documentation and links is a
-> work in progress. The goal is for the API to remain stable during the transition.
-
 <!--{ "pin": "top" }-->
 
 [ui.tosijs.net live demo](https://ui.tosijs.net) | [tosijs](https://tosijs.net) | [discord](https://discord.gg/ramJ9rgky5) | [github](https://github.com/tonioloewald/tosijs-ui#readme) | [npm](https://www.npmjs.com/package/tosijs-ui)
@@ -12,10 +9,10 @@
 [![tosijs on jsdelivr](https://data.jsdelivr.com/v1/package/npm/tosijs-ui/badge)](https://www.jsdelivr.com/package/npm/tosijs-ui)
 
 <center>
-  <xin-lottie
+  <tosi-lottie
     style="width: 280px; height: 280px; background: #da1167; border-radius: 40px;"
     src="/tosi-ui.json"
-  ></xin-lottie>
+  ></tosi-lottie>
 </center>
 
 Copyright ©2023-2025 Tonio Loewald
@@ -23,11 +20,40 @@ Copyright ©2023-2025 Tonio Loewald
 ## the tosijs-ui library
 
 A set of [web-components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-created with [xinjs](https://xinjs.net), designed to augment what the browser gives you
+created with [tosijs](https://tosijs.net), designed to augment what the browser gives you
 for free rather than replace it.
 
 It works beautifully with other web-component libraries, such as [shoelace.style](https://shoelace.style/).
 
+## Migrating to v1.3.0
+
+v1.3.0 completes the rename from `xinjs-ui` to `tosijs-ui`. All custom element
+tags now use the `tosi-` prefix and all exports use `Tosi*`/`tosi*` names.
+
+### Breaking changes
+
+- **Custom element tags** have changed from `<xin-*>` to `<tosi-*>`.
+  For example: `<xin-select>` is now `<tosi-select>`, `<xin-icon>` is now
+  `<tosi-icon>`, `<xin-example>` is now `<tosi-example>`, etc.
+- **CSS selectors** targeting old tag names (e.g. `xin-select { ... }`) must
+  be updated.
+- **CSS custom properties** in component `styleSpec` objects retain `--xin-*`
+  fallbacks for backward compatibility, but new code should use `--tosi-*`.
+
+### Deprecated exports still work
+
+The old `xin*` JavaScript exports (`xinSelect`, `xinTabs`, `xinTable`, etc.)
+remain available and will continue to work. Most log a runtime deprecation
+warning; a few are silent aliases marked with JSDoc `@deprecated`. They will
+be removed in a future major version.
+
+### Migration checklist
+
+1. Search your HTML for `<xin-` and replace with `<tosi-`
+2. Search your CSS for `xin-` selectors and update to `tosi-`
+3. Search your JS/TS for `xinSelect`, `xinTabs`, etc. and switch to `tosiSelect`, `tosiTabs`, etc.
+4. Search for `--xin-` CSS variable overrides and switch to `--tosi-`
+
 ## Quick Start
 
 ### Using npm and a bundler
@@ -38,33 +64,28 @@ Add tosijs-ui to your project, e.g.
 npm add tosijs-ui
 ```
 
-Then you can import the component `elementCreator` and create the element any way you
-like, the easiest way being to use the `elementCreator` itself. A `tosijs` `elementCreator`
-is syntax sugar around `document.createElement()`.
+Then import the component `elementCreator` and create elements. A `tosijs`
+`elementCreator` is syntax sugar around `document.createElement()`.
 
 ```ts
-import { dataTable } from 'tosijs-ui'
+import { tosiTable } from 'tosijs-ui'
 
-document.body.append(dataTable())
+document.body.append(tosiTable())
 ```
 
 ### Using the iife via cdn
 
 The `tosijs-ui` iife build bundles `tosijs`, `tosijs-ui`, and `marked` into
-a single minified javascript source file. You can access `tosijs` and `xinjsui`
+a single minified javascript source file. You can access `xinjs` and `xinjsui`
 as globals which contain all the things exported by `tosijs` and `tosijs-ui`.
 
-> iife support is new so it may not have propagated to the cdn yet. This
-> example loads the library from ui.xinjs.net for now.
-
 ```
-<script src="https://ui.xinjs.net/iife.js"></script>
-<button id="menu">Menu <xin-icon icon="chevronDown"></xin-icon></button>
+<script src="https://ui.tosijs.net/iife.js"></script>
+<button id="menu">Menu <tosi-icon icon="chevronDown"></tosi-icon></button>
 <script>
-  import { elements } from 'tosijs'
-  import { popMenu, icons } from 'tosijs-ui'
-
-  const button = { elements }
+  const { elements } = xinjs
+  const { popMenu, icons } = xinjsui
+  const { button } = elements
 
   const showMenu = (target) => {
     popMenu({
@@ -80,7 +101,7 @@ as globals which contain all the things exported by `tosijs` and `tosijs-ui`.
         {
           caption: 'Version',
           action() {
-            alert(`xinjs ${xinjs.version}\nxinjs-ui ${xinjsui.version}`)
+            alert(`tosijs ${xinjs.version}\ntosijs-ui ${xinjsui.version}`)
           }
         }
       ]
@@ -101,7 +122,7 @@ as globals which contain all the things exported by `tosijs` and `tosijs-ui`.
 </script>
 ```
 
-[Click here to see a simple iife demo](https://ui.xinjs.net/iife.html)
+[Click here to see a simple iife demo](https://ui.tosijs.net/iife.html)
 
 ## custom-elements
 
@@ -111,15 +132,15 @@ use HTML or the `ElementCreator` function exported.
 E.g. to use the markdown viewer:
 
 ```
-import { markdownViewer } from 'tosijs-ui'
-document.body.append(markdownViewer('# hello world\nthis is a test'))
+import { tosiMd } from 'tosijs-ui'
+document.body.append(tosiMd('# hello world\nthis is a test'))
 ```
 
 ```js
-import { markdownViewer } from 'tosijs-ui'
+import { tosiMd } from 'tosijs-ui'
 
 preview.append(
-  markdownViewer(`
+  tosiMd(`
 ## hello world
 here is some markdown
 `)
@@ -129,15 +150,15 @@ here is some markdown
 Assuming you import the module somewhere, the HTML will work as well.
 
 ```
-<xin-md>
+<tosi-md>
 ## hello world
 here is some markdown
-</xin-md>
+</tosi-md>
 ```
 
-The big difference with using the `markdownViewer()` function is that the `tosijs` `Component`
+The big difference with using the `tosiMd()` function is that the `tosijs` `Component`
 class will automatically pick a new tag if the expected tag is taken (e.g. by a previously
-defined custom-element from another library). `markdownViewer()` will create an element of
+defined custom-element from another library). `tosiMd()` will create an element of
 the correct type.
 
 The other thing is that `tosijs` `ElementCreator` functions are convenient and composable,
@@ -149,16 +170,16 @@ JSX, TSX, or HTML.
 In general, `tosijs` strives to work _with_ the browser rather than trying to _replace_ it.
 
 In a similar vein, `tosijs-ui` comprises a collection of [web-components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-with the goal of augmenting what _already_ works well, and the components are intended be interoperable as
-similar as possible to things that you already use, such as `<input>` or `<select>` elements.
+with the goal of augmenting what _already_ works well, and the components are intended to be
+as similar as possible to things that you already use, such as `<input>` or `<select>` elements.
 E.g. where appropriate, the `value` of an element is its malleable `state`, and when this changes,
 the element emits a `change` event.
 
-Similarly, the xinjs base `Component` class and the components in this collection strive to
+Similarly, the tosijs base `Component` class and the components in this collection strive to
 be as similar in operation as possible to DOM elements as makes sense. E.g. binary attributes
 work as expected. Adding the `hidden` attribute makes them disappear. If a component subclass
 has a `value` property then it will be rendered if the value changes (similarly it will be
-rendered if an initialized attribute is changed). Intinsic properties of components will
+rendered if an initialized attribute is changed). Intrinsic properties of components will
 default to `null` rather than `undefined`.
 
 Similarly, because web-components are highly interoperable, there's no reason to reinvent
@@ -170,7 +191,7 @@ and accessible.
 The goal here is to provide useful components and other utilities that add to what's built
 into HTML5 and CSS3 and to make custom-elements work as much as possible like drop-in replacements
 for an `<input>` or `<textarea>` (while mitigating the historical pathologies of things like
-`<select>` and `<input type="radio">`). E.g. the `<xin-select>` does not suffer from a
+`<select>` and `<input type="radio">`). E.g. the `<tosi-select>` does not suffer from a
 race-condition between having its value set and being given an `<option>` with the intended value
 and you can differentiate between the user picking a value (`action`) and the value changing (`change`).
 

package/dist/carousel.d.ts

@@ -1,5 +1,5 @@
 import { Component as WebComponent, ElementCreator } from 'tosijs';
-export declare class XinCarousel extends WebComponent {
+export declare class TosiCarousel extends WebComponent {
     static initAttributes: {
         dots: boolean;
         arrows: boolean;
@@ -111,4 +111,8 @@ export declare class XinCarousel extends WebComponent {
     disconnectedCallback(): void;
     render(): void;
 }
-export declare const xinCarousel: ElementCreator<XinCarousel>;
+/** @deprecated Use TosiCarousel instead */
+export declare const XinCarousel: typeof TosiCarousel;
+export declare const tosiCarousel: ElementCreator<TosiCarousel>;
+/** @deprecated Use tosiCarousel instead */
+export declare const xinCarousel: ElementCreator<TosiCarousel>;

package/dist/data-table.d.ts

@@ -17,7 +17,7 @@ export interface TableData {
 }
 export type ArrayFilter = (array: any[]) => any[];
 export type SelectCallback = (selected: any[]) => void;
-export declare class DataTable extends WebComponent {
+export declare class TosiTable extends WebComponent {
     static initAttributes: {
         rowHeight: number;
         charWidth: number;
@@ -78,5 +78,10 @@ export declare class DataTable extends WebComponent {
     private dropColumn;
     render(): void;
 }
-export declare const dataTable: ElementCreator<DataTable>;
-export declare const xinTable: ElementCreator<DataTable>;
+/** @deprecated Use TosiTable instead */
+export declare const DataTable: typeof TosiTable;
+export declare const tosiTable: ElementCreator<TosiTable>;
+/** @deprecated Use tosiTable instead */
+export declare const dataTable: ElementCreator<TosiTable>;
+/** @deprecated Use tosiTable instead */
+export declare const xinTable: ElementCreator<TosiTable>;

package/dist/float.d.ts

@@ -1,6 +1,6 @@
 import { Component as WebComponent, ElementCreator } from 'tosijs';
-export declare class XinFloat extends WebComponent {
-    static floats: Set<XinFloat>;
+export declare class TosiFloat extends WebComponent {
+    static floats: Set<TosiFloat>;
     static initAttributes: {
         drag: boolean;
         remainOnResize: "hide" | "remove" | "remain";
@@ -16,4 +16,8 @@ export declare class XinFloat extends WebComponent {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
-export declare const xinFloat: ElementCreator<XinFloat>;
+/** @deprecated Use TosiFloat instead */
+export declare const XinFloat: typeof TosiFloat;
+export declare const tosiFloat: ElementCreator<TosiFloat>;
+/** @deprecated Use tosiFloat instead */
+export declare const xinFloat: ElementCreator<TosiFloat>;