tosijs-ui 1.5.6 → 1.5.7

package/dist/form.d.ts

@@ -96,6 +96,7 @@ export declare class TosiForm extends XinComponent {
     }, isValid: boolean) => void;
     connectedCallback(): void;
     private handleElementChange;
+    private syncFieldValues;
     private initializeNamedElements;
 }
 /** @deprecated Use TosiField instead */

package/dist/form.js

@@ -669,7 +669,8 @@ export class TosiForm extends XinComponent {
     handleSubmit = (event) => {
         event.preventDefault();
         event.stopPropagation();
-        // Access fields to ensure value is parsed from JSON string if needed
+        // Sync field values before submitting
+        this.syncFieldValues();
         const value = this.fields;
         this.submitCallback(value, this.isValid);
     };
@@ -696,13 +697,30 @@ export class TosiForm extends XinComponent {
             this.fields[name] = target.value;
         }
     };
+    syncFieldValues() {
+        const formValue = this.fields;
+        const namedElements = this.querySelectorAll('[name], [key]');
+        for (const el of namedElements) {
+            const key = el.getAttribute('name') || el.getAttribute('key');
+            if (!key)
+                continue;
+            if (formValue[key] === undefined) {
+                const val = el.value ?? el.getAttribute('value');
+                if (val != null) {
+                    formValue[key] = val;
+                }
+            }
+        }
+    }
     initializeNamedElements() {
         const formValue = this.fields;
         // Handle both 'name' (formAssociated) and 'key' (tosi-field) attributes
         const namedElements = this.querySelectorAll('[name], [key]');
         for (const el of namedElements) {
             const key = el.getAttribute('name') || el.getAttribute('key');
-            if (key && formValue[key] !== undefined) {
+            if (!key)
+                continue;
+            if (formValue[key] !== undefined) {
                 ;
                 el.value = formValue[key];
             }

package/dist/icon-data.js

@@ -68,7 +68,7 @@ export default {
     zapOff: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><polyline points=\"12.41 6.75 13 2 10.57 4.92\"></polyline><polyline points=\"18.57 12.91 21 10 15.66 10\"></polyline><polyline points=\"8 8 3 14 12 14 11 22 16 16\"></polyline><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>",
     x: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>",
     barChart: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"></line><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"></line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"></line></svg>",
-    lock: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>",
+    lock: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg> ",
     logIn: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"></path><polyline points=\"10 17 15 12 10 7\"></polyline><line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"></line></svg>",
     shoppingBag: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line><path d=\"M16 10a4 4 0 0 1-8 0\"></path></svg>",
     divide: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"6\" r=\"2\"></circle><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line><circle cx=\"12\" cy=\"18\" r=\"2\"></circle></svg>",
@@ -142,7 +142,7 @@ export default {
     rss: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M4 11a9 9 0 0 1 9 9\"></path><path d=\"M4 4a16 16 0 0 1 16 16\"></path><circle cx=\"5\" cy=\"19\" r=\"1\"></circle></svg>",
     wifi: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M5 12.55a11 11 0 0 1 14.08 0\"></path><path d=\"M1.42 9a16 16 0 0 1 21.16 0\"></path><path d=\"M8.53 16.11a6 6 0 0 1 6.95 0\"></path><line x1=\"12\" y1=\"20\" x2=\"12.01\" y2=\"20\"></line></svg>",
     watch: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"7\"></circle><polyline points=\"12 9 12 12 13.5 13.5\"></polyline><path d=\"M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83\"></path></svg>",
-    info: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>",
+    info: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"7.75\"></line></svg>",
     userX: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"8.5\" cy=\"7\" r=\"4\"></circle><line x1=\"18\" y1=\"8\" x2=\"23\" y2=\"13\"></line><line x1=\"23\" y1=\"8\" x2=\"18\" y2=\"13\"></line></svg>",
     loader: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>",
     folderPlus: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"></path><line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"></line><line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"></line></svg>",

package/dist/icons.d.ts

@@ -6,7 +6,7 @@ export declare const defineIcons: (newIcons: {
 export declare const svg2DataUrl: (icon: Element, fill?: string, stroke?: string, strokeWidth?: number) => string;
 export interface IconRule {
     prefix: string | RegExp;
-    apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | null;
+    apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
 export declare const iconRules: IconRule[];
 export declare const icons: SVGIconMap;
@@ -20,6 +20,7 @@ export declare class SvgIcon extends WebComponent {
             '--tosi-icon-stroke-linecap': string;
             '--tosi-icon-fill': string;
             display: string;
+            verticalAlign: string;
             stroke: string;
             strokeWidth: string;
             strokeLinejoin: string;

package/dist/icons.js

@@ -347,105 +347,125 @@ that, for example, treat all colored icons inside buttons the same way.
 
 ## Icon Composition & Math
 
-<tosi-icon icon="tosi$map50o" size=128></tosi-icon>
-<tosi-icon icon="lock50s75o_10y$shield" size=128></tosi-icon>
-<tosi-icon icon="unLock" size=128></tosi-icon>
+<tosi-icon icon="tosi$map50o_brandColorS" size=128></tosi-icon>
+<tosi-icon icon="lock50s75o_10y$shield_brandColorS" size=128></tosi-icon>
+<tosi-icon icon="unLock_brandColorS" size=128></tosi-icon>
 <tosi-icon icon="checkFile" size=128></tosi-icon>
-<tosi-icon icon="spin120Loader40s_20x$cloud" size=128></tosi-icon>
+<tosi-icon icon="spin120Loader40s_30x$cloud" size=128></tosi-icon>
 
-If you request an icon that doesn't exist, the system tries to compose one
-from a base icon and a prefix:
+### Why?
 
-### Prefix rules
-
-- `spin<dps><Icon>` — continuous rotation at N degrees/second, e.g. `spin360Loader` (1 rev/s)
-- `spin_<dps><Icon>` — counter-clockwise, e.g. `spin_180Star`
+I needed a pin icon for column pinning in the data table. The only pin
+in the feather set is a map pin, so I created a push-pin icon
+<tosi-icon icon="pin_brandColorS" size=24></tosi-icon>.
+But immediately I also needed unpin, pin-left, and pin-right — a lot
+of new icons for one feature. Of course I could flip the pin with CSS, but
+this is a problem *everywhere, all the time*: every directional icon
+needs 2–4 variants, every action needs a negation, every status needs
+an overlay.
 
-### Modifier overlays
+Why not fix it once and also eliminate the need to maintain trivial
+variations on every icon?
 
-- `un<Icon>` — red slash overlay (e.g. `unPin`, `unLock`)
-- `check<Icon>` — green check overlay
-- `cancel<Icon>` — red x overlay
-- `search<Icon>` — magnifier overlay
+<tosi-icon icon="pin_brandColorS" size=64></tosi-icon>
+<tosi-icon icon="pin0f_brandColorS" size=64></tosi-icon>
+<tosi-icon icon="unPin_brandColorS" size=64></tosi-icon>
 
-Modifier overlays render the base icon at reduced opacity/scale with the
-overlay icon centered on top. **Overlay icons should have a square viewBox** —
-a non-square overlay on a non-square base will produce unexpected results.
+### Icon modifier suffixes
 
-### Icon redirects
+The suffix system is inspired by tosijs's CSS variable math, where
+`borderRadius50` becomes `calc(var(--border-radius) * 0.5)` and
+`someColor50o` adjusts opacity to 50%. The same `value + letter`
+convention works for icons:
 
-Icon definitions that don't start with `<svg` are treated as redirects
-to another icon name (which can include composition prefixes):
-
-    defineIcons({
-      chevronDown: 'rot90ChevronRight',
-      sidebarRight: 'flipHSidebar',
-    })
+- `NNo` — opacity N% (e.g. `lock50o` = 50% opacity)
+- `NNs` — scale N% (e.g. `star75s` = 75% scale)
+- `NNr` — rotate N° (e.g. `chevronRight90r` = chevron pointing down)
+- `_NNr` — rotate -N° (e.g. `arrow_45r`)
+- `0f` — flip horizontally (e.g. `sidebar0f`)
+- `1f` — flip vertically
+- `NNx` — translateX N% (e.g. `plus20x` = shift right 20%)
+- `NNy` — translateY N% (e.g. `plus_20y` = shift up 20%)
+- `_<HEX>F` — fill color (e.g. `star_FF0000F` = red fill; use uppercase hex)
+- `_<HEX>S` — stroke color (e.g. `lock_00FS` = blue stroke)
+- `_<camelCase>F` — fill CSS variable (e.g. `star_brandColorF` = `var(--brand-color)`)
+- `_<camelCase>S` — stroke CSS variable (e.g. `lock_accentS` = `var(--accent)`)
+- CSS color math works too: `star_brandColor40oF` = brand color at 40% opacity
+- `NW` — stroke width (e.g. `lock4W` = stroke-width 4)
 
-### Custom rules
+Suffixes combine freely: `plus50o60s25x25y_f00F` = plus at 50% opacity,
+60% scale, shifted 25% right and down, filled red.
 
-`iconRules` is a mutable array of modifier rules. Add your own prefixes,
-modify existing ones, or replace them entirely:
+### Stacking icons
 
-    // Add a new prefix
-    iconRules.push({
-      prefix: 'add',
-      overlay: 'plus',
-      overlayStyle: { color: 'blue', opacity: '0.75' },
-      baseStyle: { opacity: '0.5', transform: 'scale(0.75)', transformOrigin: '50% 50%' },
-    })
+Use `$` to stack icons: `overlay$base`, or `top$middle$bottom` for
+multiple layers. The last segment is the base (sets the size), everything
+before it is overlaid on top. Each segment is resolved independently —
+suffixes, redirects, and rules all work:
 
-    // Override the built-in 'un' rule
-    iconRules[0] = { ...iconRules[0], overlayStyle: { color: 'orange', opacity: '0.9' } }
+    icons['tosi$map50o']()                // tosi logo on a 50% opacity map
+    icons['star45r$circle']()              // rotated star on a circle
+    icons['lock50s75o_10y$shield']()       // translucent lock on a shield
+    icons['star25o$lock50o$shield']()      // three layers
 
-    // Replace all rules
-    iconRules.length = 0
-    iconRules.push(...myCustomRules)
+### Icon redirects
 
-### Stacking icons
+Icon definitions that don't start with `<svg` are treated as redirects.
+This is how we eliminate redundant SVG files — `chevronDown` doesn't
+need its own SVG:
 
-Use `$` to stack one icon on top of another: `overlay$base`. Combine
-with opacity suffixes and transforms for layered compositions:
+    defineIcons({
+      chevronDown: 'chevronRight90r',
+      chevronLeft: 'chevronRight180r',
+      chevronUp: 'chevronRight270r',
+      userAdd: 'plus50o60s25x25y$user',
+    })
 
-    icons['tosi$map50o']()          // tosi logo on a 50% opacity map
-    icons['star45r$circle']()        // rotated star on a circle
-    icons['lock50s75o_10y$shield']() // small translucent lock on a shield
+### Prefix rules
 
-Each side of the `$` is resolved independently, so redirects, transforms,
-and modifiers all work on either side.
+Rules apply named prefixes to icons. Built-in rules use string rewrites
+that feed back into the resolution pipeline:
 
-### Style suffixes
+- `un<Icon>` — translucent slash overlay (e.g. `unPin`, `unLock`)
+- `check<Icon>` — green check overlay
+- `cancel<Icon>` — red x overlay
+- `search<Icon>` — magnifier overlay
+- `spin<dps><Icon>` — continuous rotation at N°/second (e.g. `spin360Loader`)
+- `spin_<dps><Icon>` — counter-clockwise (e.g. `spin_180Star`)
 
-Append two-digit codes to any icon name to apply transforms and opacity.
-Each suffix is a number followed by a letter:
+The overlay rules are just string rewrites — for example, `unFoo`
+becomes `slash25o$foo75s75o`. **Overlay icons should have a square
+viewBox** for best results on non-square base icons.
 
-- `NNo` — opacity N% (e.g. `lock50o` = 50% opacity)
-- `NNs` — scale N% (e.g. `star75s` = 75% scale)
-- `NNx` — translateX N% (e.g. `plus20x` = shift right 20%)
-- `NNy` — translateY N% (e.g. `plus_20y` = shift up 20%)
-- `NNr` — rotate N° (e.g. `chevronRight90r` = chevron pointing down)
-- `_NNr` — rotate -N° (e.g. `arrow_45r`)
-- `0f` — flip horizontally (e.g. `sidebar0f`)
-- `1f` — flip vertically
-- `_<hex>F` — fill color (e.g. `star_ff0000F` = red fill, `star_f00F` = shorthand)
-- `_<hex>S` — stroke color (e.g. `lock_00fS` = blue stroke)
-- `NW` — stroke width (e.g. `lock4W` = stroke-width 4)
+### Custom rules
 
-Suffixes can be combined: `plus50o60s25x25y_f00F` = plus at 50% opacity,
-60% scale, shifted 25% right and down, filled red.
+`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):
 
-This is especially powerful with stacking:
+    // String rewrite: addFoo → plus75o_0000ffS$foo75s50o
+    iconRules.push({
+      prefix: 'add',
+      apply: (baseName) => `plus75o_0000ffS$${baseName}75s50o`,
+    })
 
-    defineIcons({
-      userAdd: 'plus50o60s25x25y$user',
+    // Function rule with side effects (like spin)
+    iconRules.push({
+      prefix: /^glow(\d+)/,
+      apply: (baseName, match, parts) => {
+        const icon = resolveIcon(baseName, parts)
+        icon.style.filter = `brightness(${match[1]}%)`
+        return icon
+      },
     })
 
 ### Composites and `svg2DataUrl`
 
-Composed icons (modifiers) are wrapped in a `<span>` container, not a
-single SVG. `svg2DataUrl()` will render only the base icon and log a
-console error. Transforms (rotation/flip suffixes) and plain icons work
-normally with `svg2DataUrl`.
+Composed icons (stacked, overlay rules) are wrapped in a `<span>`, not
+a single SVG. `svg2DataUrl()` will render only the base icon and log a
+console error. Simple suffix transforms and plain icons work normally
+with `svg2DataUrl`.
 
 
 ## Missing Icons
@@ -492,7 +512,7 @@ organizations themselves. It's up to you to use them correctly.
 
 The remaining icons I have created myself using the excellent but sometimes flawed
 [Amadine](https://apps.apple.com/us/app/amadine-vector-design-art/id1339198386?mt=12)
-and generally reliable [Graphic](https://apps.apple.com/us/app/graphic/id404705039?mt=12).
+and before that [Graphic](https://apps.apple.com/us/app/graphic/id404705039?mt=12).
 
 ### Feather Icons Copyright Notice
 
@@ -553,26 +573,6 @@ export const svg2DataUrl = (icon, fill, stroke, strokeWidth) => {
     const text = encodeURIComponent(svg.outerHTML);
     return `url(data:image/svg+xml;charset=UTF-8,${text})`;
 };
-// Helper for overlay-style rules
-function overlayRule(prefix, overlay, overlayStyle, baseStyle) {
-    return {
-        prefix,
-        apply(baseName, _match, parts) {
-            const base = resolveIcon(baseName, []);
-            const over = resolveIcon(overlay, []);
-            Object.assign(base.style, baseStyle);
-            Object.assign(over.style, {
-                position: 'absolute',
-                inset: '0',
-                width: '100%',
-                height: '100%',
-                ...overlayStyle,
-            });
-            return wrapIcon(baseName, parts, base, over);
-        },
-    };
-}
-const spinKeyframesInjected = { done: false };
 export const iconRules = [
     {
         prefix: /^spin(_?\d+)/,
@@ -580,27 +580,41 @@ export const iconRules = [
             const dps = match[1].replace('_', '-');
             const duration = 360 / Math.abs(parseFloat(dps));
             const direction = dps.startsWith('-') ? 'reverse' : 'normal';
-            if (!spinKeyframesInjected.done) {
-                const style = document.createElement('style');
-                style.textContent =
-                    '@keyframes tosi-spin { to { transform: rotate(360deg) } }';
-                document.head.appendChild(style);
-                spinKeyframesInjected.done = true;
+            // Strip suffixes — apply them to the wrapper, not the inner icon
+            const parsed = parseStyleSuffixes(baseName);
+            const iconName = parsed ? parsed.baseName : baseName;
+            const icon = resolveIcon(iconName, []);
+            const el = icon;
+            if (el.animate) {
+                el.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], {
+                    duration: duration * 1000,
+                    iterations: Infinity,
+                    direction,
+                });
+            }
+            const wrapper = wrapIcon(baseName, parts, icon);
+            if (parsed) {
+                Object.assign(wrapper.style, parsed.style);
             }
-            const icon = resolveIcon(baseName, []);
-            icon.style.animation =
-                `tosi-spin ${duration}s linear infinite ${direction}`;
-            return wrapIcon(baseName, parts, icon);
+            return wrapper;
         },
     },
-    overlayRule('un', 'slash', { opacity: '0.25' }, {
-        opacity: '0.75',
-        transform: 'scale(0.75)',
-        transformOrigin: '50% 50%',
-    }),
-    overlayRule('check', 'check', { color: 'green', opacity: '0.75' }, { opacity: '0.5', transform: 'scale(0.75)', transformOrigin: '50% 50%' }),
-    overlayRule('cancel', 'x', { color: 'red', opacity: '0.75' }, { opacity: '0.5', transform: 'scale(0.75)', transformOrigin: '50% 50%' }),
-    overlayRule('search', 'search', { transform: 'scale(0.8) translate(30%, 30%)', transformOrigin: '50% 50%' }, { opacity: '0.5' }),
+    {
+        prefix: 'un',
+        apply: (baseName) => `slash25o$${baseName}75s75o`,
+    },
+    {
+        prefix: 'check',
+        apply: (baseName) => `check75o_00aa00S$${baseName}75s50o`,
+    },
+    {
+        prefix: 'cancel',
+        apply: (baseName) => `x75o_cc0000S$${baseName}75s50o`,
+    },
+    {
+        prefix: 'search',
+        apply: (baseName) => `search80s30x30y$${baseName}50o`,
+    },
 ];
 function makeIcon(spec, parts) {
     const div = elements.div();
@@ -652,6 +666,13 @@ function wrapIcon(prop, parts, ...children) {
     }
     return wrapper;
 }
+function canResolve(name) {
+    const data = iconData;
+    if (data[name])
+        return true;
+    const parsed = parseStyleSuffixes(name);
+    return parsed != null && !!data[parsed.baseName];
+}
 function composeIcon(prop, parts) {
     for (const rule of iconRules) {
         let baseName;
@@ -673,7 +694,12 @@ function composeIcon(prop, parts) {
                     prop.slice(rule.prefix.length + 1);
             match = rule.prefix;
         }
+        // Only apply if baseName can actually resolve to an icon
+        if (!canResolve(baseName))
+            continue;
         const result = rule.apply(baseName, match, parts);
+        if (typeof result === 'string')
+            return resolveIcon(result, parts);
         if (result)
             return result;
     }
@@ -683,8 +709,9 @@ const MAX_REDIRECTS = 10;
 // Style suffixes — always value then letter code:
 //   50o (opacity), 75s (scale), 20x (translateX%), _10y (translateY%)
 //   90r (rotate 90°), _45r (rotate -45°), 0f (flipH), 1f (flipV)
-//   _ff0000F (fill), _f00S (stroke), 3W (stroke-width)
-const SUFFIX_RE = /(_?\d{2,3}[osxyr]|[01]f|_[0-9a-fA-F]{3,8}[FS]|\d{1,3}W)+$/;
+//   _FF0000F (fill hex), _f00S (stroke hex), 3W (stroke-width)
+//   _brandColorF (fill var), _accentS (stroke var)
+const SUFFIX_RE = /(_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W)+$/;
 function parseStyleSuffixes(name) {
     const match = name.match(SUFFIX_RE);
     if (!match)
@@ -693,7 +720,7 @@ function parseStyleSuffixes(name) {
     if (!baseName)
         return null;
     const style = {};
-    const suffixes = match[0].match(/_?\d{2,3}[osxyr]|[01]f|_[0-9a-fA-F]{3,8}[FS]|\d{1,3}W/g);
+    const suffixes = match[0].match(/_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W/g);
     let tx = '';
     let ty = '';
     let scale = '';
@@ -701,11 +728,16 @@ function parseStyleSuffixes(name) {
     let flip = '';
     for (const s of suffixes) {
         const code = s[s.length - 1];
-        if (code === 'F') {
-            style.fill = '#' + s.slice(1, -1);
-        }
-        else if (code === 'S') {
-            style.stroke = '#' + s.slice(1, -1);
+        if (code === 'F' || code === 'S') {
+            const raw = s.slice(1, -1);
+            const isHex = /^[0-9a-fA-F]{3,8}$/.test(raw);
+            const value = isHex ? '#' + raw : vars[raw];
+            if (code === 'F') {
+                style.fill = value;
+            }
+            else {
+                style.stroke = value;
+            }
         }
         else if (code === 'W') {
             style.strokeWidth = s.slice(0, -1);
@@ -764,30 +796,34 @@ function resolveIcon(prop, parts) {
             return icon;
         }
     }
-    // Stack: foo50o$bar → overlay foo at 50% opacity on bar
+    // Stack: foo$bar$baz → baz on bottom, bar on top, foo on top
     if (prop.includes('$')) {
-        const [overlayName, baseName] = prop.split('$', 2);
-        const baseIcon = resolveIcon(baseName, []);
-        const overlayIcon = resolveIcon(overlayName, []);
-        Object.assign(overlayIcon.style, {
-            position: 'absolute',
-            inset: '0',
-            width: '100%',
-            height: '100%',
+        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 icon = resolveIcon(name, []);
+            Object.assign(icon.style, {
+                position: 'absolute',
+                inset: '0',
+                width: '100%',
+                height: '100%',
+            });
+            return icon;
         });
-        return wrapIcon(prop, parts, baseIcon, overlayIcon);
+        return wrapIcon(prop, parts, base, ...overlays);
     }
-    // Style suffixes first — strip them, resolve the base, apply after
+    // Try composition (spin, un, check, etc.)
+    const composed = composeIcon(prop, parts);
+    if (composed)
+        return composed;
+    // Style suffixes — strip them, resolve the base, apply after
     const parsed = parseStyleSuffixes(prop);
     if (parsed) {
         const icon = resolveIcon(parsed.baseName, parts);
         Object.assign(icon.style, parsed.style);
         return icon;
     }
-    // Try composition (spin, un, check, etc.)
-    const composed = composeIcon(prop, parts);
-    if (composed)
-        return composed;
     if (prop) {
         console.warn(`icon ${prop} does not exist`);
     }
@@ -809,6 +845,7 @@ export class SvgIcon extends WebComponent {
             '--tosi-icon-stroke-linecap': 'var(--icon-stroke-linecap, round)',
             '--tosi-icon-fill': 'var(--xin-icon-fill, var(--icon-fill, none))',
             display: 'inline-flex',
+            verticalAlign: 'text-bottom',
             stroke: 'currentColor',
             strokeWidth: varDefault.tosiIconStrokeWidth('2px'),
             strokeLinejoin: varDefault.tosiIconStrokeLinejoin('round'),