tosijs-ui 1.5.10 → 1.5.12

package/dist/icons.d.ts

@@ -9,6 +9,10 @@ export interface IconRule {
     apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
 export declare const iconRules: IconRule[];
+/** Wrap icon elements in a composite container (for custom function rules) */
+export declare function wrapIcon(prop: string, parts: ElementPart[], ...children: Element[]): HTMLSpanElement;
+/** Resolve an icon name through the full pipeline (redirects, suffixes, rules, stacking) */
+export declare function resolveIcon(prop: string, parts: ElementPart[]): Element;
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {
     static preferredTagName: string;

package/dist/icons.js

@@ -428,7 +428,9 @@ viewBox** for best results on non-square base icons.
 `iconRules` is a mutable array. Each rule has a `prefix` (string or
 RegExp) and an `apply` function that returns a **string** (resolved
 through the full pipeline), an **Element** (used directly), or **null**
-(skip to next rule):
+(skip to next rule).
+
+String rewrites are the simplest — just return a composition string:
 
     // String rewrite: addFoo → plus75o_0000ffS$foo75s50o
     iconRules.push({
@@ -436,16 +438,24 @@ through the full pipeline), an **Element** (used directly), or **null**
       apply: (baseName) => `plus75o_0000ffS$${baseName}75s50o`,
     })
 
-    // Function rule with side effects (like spin)
+Function rules can use `resolveIcon()` and `wrapIcon()` (both exported)
+for more control:
+
+    // Function rule: glowNNFoo → foo with brightness filter
     iconRules.push({
       prefix: /^glow(\d+)/,
       apply: (baseName, match, parts) => {
         const icon = resolveIcon(baseName, parts)
         icon.style.filter = `brightness(${match[1]}%)`
-        return icon
+        return wrapIcon(baseName, parts, icon)
       },
     })
 
+- `resolveIcon(name, parts)` — resolve any icon name through the full
+  pipeline (redirects, suffixes, rules, stacking)
+- `wrapIcon(name, parts, ...children)` — wrap elements in a composite
+  container with proper sizing, `pointer-events: none`, and `data-icon`
+
 ### Building an icon vocabulary
 
 You don't need to spell out the DSL every time. The real power is in
@@ -632,7 +642,8 @@ function makeIcon(spec, parts) {
     svg.style.height = varDefault.tosiIconSize('16px');
     return svg;
 }
-function wrapIcon(prop, parts, ...children) {
+/** Wrap icon elements in a composite container (for custom function rules) */
+export function wrapIcon(prop, parts, ...children) {
     const wrapper = elements.span({
         class: 'tosi-icon-composite',
         dataIcon: prop,
@@ -783,7 +794,8 @@ function parseStyleSuffixes(name) {
     }
     return { baseName, style };
 }
-function resolveIcon(prop, parts) {
+/** Resolve an icon name through the full pipeline (redirects, suffixes, rules, stacking) */
+export function resolveIcon(prop, parts) {
     if (prop.endsWith('_'))
         prop = prop.slice(0, -1);
     const data = iconData;
@@ -813,7 +825,10 @@ function resolveIcon(prop, parts) {
         const segments = prop.split('$');
         // Last segment is the base (sets the size), rest are overlays
         const base = resolveIcon(segments[segments.length - 1], []);
-        const overlays = segments.slice(0, -1).map((name) => {
+        const overlays = segments
+            .slice(0, -1)
+            .reverse()
+            .map((name) => {
             const icon = resolveIcon(name, []);
             Object.assign(icon.style, {
                 position: 'absolute',