luxen-ui 0.9.2 → 0.10.0

package/dist/metadata/prose-editor.json

@@ -86,6 +86,14 @@
       "reflects": false,
       "description": "Placeholder shown when the editor is empty."
     },
+    {
+      "name": "emojiDataSource",
+      "attribute": "emoji-data-source",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source."
+    },
     {
       "name": "validationTarget",
       "attribute": null,

package/dist/templates/elements/avatar.md

@@ -99,6 +99,28 @@ Add the `size` attribute: `xs`, `sm`, `md` (default), `lg`, or `xl`.
 </div>
 ```
 
+### Custom size
+
+Set `--size` to any length for an arbitrary pixel size. It overrides the `size` scale and the font follows proportionally. Use it alone — not combined with a `size` token.
+
+```html
+<div class="flex items-end gap-3">
+  <l-avatar
+    style="--size: 20px"
+    name="John Doe"
+  ></l-avatar>
+  <l-avatar
+    style="--size: 44px; --appearance: circle"
+    src="https://i.pravatar.cc/150?img=58"
+    name="John Doe"
+  ></l-avatar>
+  <l-avatar
+    style="--size: 64px; --color: #2f489a"
+    name="Jane Smith"
+  ></l-avatar>
+</div>
+```
+
 ### Circle
 
 Set `--appearance: circle` for a fully circular shape. Default is a rounded square.
@@ -249,6 +271,7 @@ import 'luxen-ui/avatar';
 
 ### CSS custom properties
 
+- `--size` (default: `40px`) — Box size (any length). Set it inline (e.g. `style="--size: 20px"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.
 - `--color` — Background fill color for initials and the default icon.
 - `--text-color` — Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).
 - `--appearance` — Set to `circle` for a fully circular avatar (default is a rounded square).

package/dist/templates/elements/prose-editor.md

@@ -62,6 +62,14 @@ Set `toolbar-placement="bottom"` to move the toolbar below the content.
 ></l-prose-editor>
 ```
 
+### Emoji picker data
+
+The `emoji` toolbar button opens a picker that loads its emoji data from a CDN by default. For an offline or behind-auth app, serve an [`emojibase-data`](https://www.npmjs.com/package/emojibase-data) JSON locally and point `emoji-data-source` at it.
+
+```html
+<l-prose-editor emoji-data-source="/emoji/en/data.json"></l-prose-editor>
+```
+
 ## Examples
 
 ### Form integration
@@ -146,6 +154,9 @@ import 'luxen-ui/prose-editor';
 - **toolbar-placement**: `'top' | 'bottom'` (default: `'top'`) — Where the toolbar sits relative to the content.
 - **autofocus**: `boolean` (default: `false`) — Focus the editor on creation.
 - **placeholder**: `string` — Placeholder shown when the editor is empty.
+- **emoji-data-source**: `string` — URL the emoji picker fetches its data from. Point this at a locally served
+`emojibase-data` JSON to run fully offline (no CDN). Defaults to the
+picker's bundled CDN source.
 - **validationTarget**: `HTMLElement | undefined`
 
 ### Methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",
@@ -119,7 +119,6 @@
     "provenance": true
   },
   "dependencies": {
-    "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.6",
     "@tiptap/core": "^3.23.6",
     "@tiptap/extension-highlight": "^3.23.6",
@@ -128,7 +127,7 @@
     "@tiptap/starter-kit": "^3.23.6",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
-    "emoji-mart": "^5.6.0",
+    "emoji-picker-element": "^1.29.1",
     "iconify-icon": "^3.0.2",
     "lit": "^3.3.3"
   },