@cyberalien/svg-utils 1.1.4 → 1.1.5

package/lib/css/rules.d.ts

@@ -0,0 +1,10 @@
+import { CSSRules } from "./types.js";
+/**
+ * Split rules string into object
+ */
+declare function splitCSSRules(rules: CSSRules | string): CSSRules;
+/**
+ * Merge rules
+ */
+declare function mergeCSSRules(rules: CSSRules | string, oldRules?: CSSRules | string): CSSRules;
+export { mergeCSSRules, splitCSSRules };

package/lib/css/rules.js

@@ -0,0 +1,26 @@
+/**
+* Split rules string into object
+*/
+function splitCSSRules(rules) {
+	if (typeof rules === "string") {
+		const result = Object.create(null);
+		const parts = rules.split(";");
+		for (const part of parts) {
+			const [key, value] = part.split(":").map((s) => s.trim());
+			if (key && value) result[key] = value;
+		}
+		return result;
+	}
+	return rules;
+}
+/**
+* Merge rules
+*/
+function mergeCSSRules(rules, oldRules) {
+	return {
+		...splitCSSRules(oldRules || {}),
+		...splitCSSRules(rules)
+	};
+}
+
+export { mergeCSSRules, splitCSSRules };

package/lib/css/stringify.d.ts

@@ -7,8 +7,14 @@ declare function stringifyCSSRules(rules: CSSRules, depth?: number): string;
  * Stringify CSS selector with rules
  */
 declare function stringifyCSSSelector(selector: string, rules: string | CSSRules, depth?: number): string;
+/**
+ * Convert animation frames to CSS string
+ *
+ * Does not include @keyframes block, only the content
+ */
+declare function stringifyCSSAnimationFrames(keyframes: CSSKeyframes, depth?: number): string;
 /**
  * Stringify CSS keyframes
  */
-declare function stringifyCSSKeyframes(animationName: string, keyframes: CSSKeyframes, depth?: number): string;
-export { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };
+declare function stringifyCSSKeyframes(animationName: string, keyframes: CSSKeyframes | string, depth?: number): string;
+export { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };

package/lib/css/stringify.js

@@ -17,15 +17,18 @@ function stringifyCSSRules(rules, depth = 1) {
 * Stringify CSS selector with rules
 */
 function stringifyCSSSelector(selector, rules, depth = 0) {
-	const content = typeof rules === "string" ? rules : stringifyCSSRules(rules, depth + 1);
+	const content = typeof rules === "string" ? indent(depth + 1) + rules + "\n" : stringifyCSSRules(rules, depth + 1);
 	if (!content.length) return "";
 	const tab = indent(depth);
 	return `${tab}${selector} {\n${content}${tab}}\n`;
 }
 /**
-* Stringify CSS keyframes
+* Convert animation frames to CSS string
+*
+* Does not include @keyframes block, only the content
 */
-function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
+function stringifyCSSAnimationFrames(keyframes, depth = 0) {
+	const lines = [];
 	const prop = keyframes.prop;
 	const values = /* @__PURE__ */ new Map();
 	keyframes.frames.forEach((frame) => {
@@ -34,13 +37,18 @@ function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
 		if (item) item.push(frame.time);
 		else values.set(css, [frame.time]);
 	});
-	const lines = [];
-	lines.push(`${indent(depth)}@keyframes ${animationName} {\n`);
 	values.forEach((times, css) => {
 		lines.push(`${indent(depth + 1)}${times.map((time) => `${(time * 100).toFixed(2).replace(/\.?0+$/, "")}%`).join(", ")} {\n${css}${indent(depth + 1)}}\n`);
 	});
-	lines.push("}\n");
-	return lines.join("");
+	return lines.join("").trim();
+}
+/**
+* Stringify CSS keyframes
+*/
+function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
+	const content = typeof keyframes === "string" ? keyframes : stringifyCSSAnimationFrames(keyframes, depth);
+	if (content.includes("@keyframes")) return content;
+	return `${indent(depth)}@keyframes ${animationName} {\n${indent(depth + 1)}${content}\n}\n`;
 }
 
-export { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };
+export { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };

package/lib/css/stylesheet.d.ts

@@ -5,8 +5,6 @@ import { CSSGeneratedStylesheet, CSSRules } from "./types.js";
 declare function createEmptyStylesheet(): CSSGeneratedStylesheet;
 /**
  * Add generated selector to stylesheet
- *
- * If item exists, it will be overwritten. Class names should be hashed to avoid conflicts, so this should not cause issues.
  */
 declare function addGeneratedSelector(stylesheet: CSSGeneratedStylesheet, tree: string[], rules: CSSRules | string): void;
 /**

package/lib/css/stylesheet.js

@@ -1,4 +1,5 @@
 import { stringifyCSSKeyframes, stringifyCSSSelector } from "./stringify.js";
+import { mergeCSSRules } from "./rules.js";
 
 /**
 * Create empty stylesheet
@@ -11,17 +12,16 @@ function createEmptyStylesheet() {
 }
 /**
 * Add generated selector to stylesheet
-*
-* If item exists, it will be overwritten. Class names should be hashed to avoid conflicts, so this should not cause issues.
 */
 function addGeneratedSelector(stylesheet, tree, rules) {
+	tree = tree.filter((item, index) => item.startsWith("@") ? tree.indexOf(item) === index : true);
 	let parent = stylesheet.selectors;
 	for (let i = 0; i < tree.length; i++) {
 		const selector = tree[i];
 		if (!parent[selector]) parent[selector] = {};
 		const parentItem = parent[selector];
 		if (i === tree.length - 1) {
-			parentItem.rules = rules;
+			parentItem.rules = mergeCSSRules(rules, parentItem.rules);
 			return;
 		}
 		if (!parentItem.nested) parentItem.nested = Object.create(null);

package/lib/css/types.d.ts

@@ -28,6 +28,6 @@ interface CSSGeneratedSelector {
 type CSSGeneratedSelectors = Record<string, CSSGeneratedSelector>;
 interface CSSGeneratedStylesheet {
   selectors: CSSGeneratedSelectors;
-  keyframes: Record<string, CSSKeyframes>;
+  keyframes: Record<string, CSSKeyframes | string>;
 }
 export { CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules };

package/lib/helpers/reduce-motion.d.ts

@@ -0,0 +1,2 @@
+declare const prefersReduceMotion = "@media not (prefers-reduced-motion)";
+export { prefersReduceMotion };

package/lib/helpers/reduce-motion.js

@@ -0,0 +1,3 @@
+const prefersReduceMotion = "@media not (prefers-reduced-motion)";
+
+export { prefersReduceMotion };

package/lib/index.d.ts

@@ -5,7 +5,8 @@ import { CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CS
 import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions } from "./xml/types.js";
 import { BaseConvertSVGContentOptions, ConvertSVGContentOptions, ConvertedSVGContent } from "./svg-css/types.js";
 import { createCSSClassName } from "./css/hash.js";
-import { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { mergeCSSRules, splitCSSRules } from "./css/rules.js";
+import { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
 import { addGeneratedSelector, createEmptyStylesheet, stringifyStylesheet } from "./css/stylesheet.js";
 import { createUniqueHashContext } from "./helpers/hash/context.js";
 import { hashString } from "./helpers/hash/hash.js";
@@ -27,4 +28,11 @@ import { changeSVGIDs } from "./svg/ids/change.js";
 import { createUniqueIDs } from "./svg/ids/unique.js";
 import { convertSVGRootToCSS } from "./svg-css/root.js";
 import { convertSVGContentToCSSRules } from "./svg-css/content.js";
-export { BaseConvertSVGContentOptions, CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, HashContext, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, UniqueHashPartialOptions, UniqueIDOptions, addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };
+import { IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate } from "./svg-css/states/fallback/types.js";
+import { getIconFallback } from "./svg-css/states/fallback/stringify.js";
+import { IconStatesAdvancedState, IconStatesAdvancedStateValues, IconStatesList, IconStatesSimpleState, IconStatesState } from "./svg-css/states/types.js";
+import { getStatesFromKey } from "./svg-css/states/key.js";
+import { getObjectFromStates } from "./svg-css/states/object.js";
+import { getAdvancedStateDefaultValue, getStateValue } from "./svg-css/states/value.js";
+import { SVGCSSIcon, SVGCSSIconRules, SVGCSSStatefulIcon, SVGCSSStatefulIconRules } from "./svg-css/icon/types.js";
+export { BaseConvertSVGContentOptions, CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, HashContext, IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate, IconStatesAdvancedState, IconStatesAdvancedStateValues, IconStatesList, IconStatesSimpleState, IconStatesState, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, SVGCSSIcon, SVGCSSIconRules, SVGCSSStatefulIcon, SVGCSSStatefulIconRules, StringifyXMLOptions, UniqueHashOptions, UniqueHashPartialOptions, UniqueIDOptions, addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getAdvancedStateDefaultValue, getIconFallback, getObjectFromStates, getStateValue, getStatesFromKey, getUniqueHash, hashString, hashToString, iterateXMLContent, mergeCSSRules, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitCSSRules, splitClassName, stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/index.js

@@ -11,7 +11,8 @@ import { iterateXMLContent } from "./xml/iterate.js";
 import { parseXMLContent } from "./xml/parse.js";
 import { stringifyXMLContent } from "./xml/stringify.js";
 import { createCSSClassName } from "./css/hash.js";
-import { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { mergeCSSRules, splitCSSRules } from "./css/rules.js";
 import { addGeneratedSelector, createEmptyStylesheet, stringifyStylesheet } from "./css/stylesheet.js";
 import { classProps, defaultClassProp } from "./classname/const.js";
 import { splitClassName, toggleClassName } from "./classname/toggle.js";
@@ -22,5 +23,9 @@ import { changeSVGIDs } from "./svg/ids/change.js";
 import { createUniqueIDs } from "./svg/ids/unique.js";
 import { convertSVGRootToCSS } from "./svg-css/root.js";
 import { convertSVGContentToCSSRules } from "./svg-css/content.js";
+import { getIconFallback } from "./svg-css/states/fallback/stringify.js";
+import { getStatesFromKey } from "./svg-css/states/key.js";
+import { getAdvancedStateDefaultValue, getStateValue } from "./svg-css/states/value.js";
+import { getObjectFromStates } from "./svg-css/states/object.js";
 
-export { addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };
+export { addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getAdvancedStateDefaultValue, getIconFallback, getObjectFromStates, getStateValue, getStatesFromKey, getUniqueHash, hashString, hashToString, iterateXMLContent, mergeCSSRules, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitCSSRules, splitClassName, stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/svg-css/icon/css/basic.d.ts

@@ -0,0 +1,13 @@
+import { CSSGeneratedStylesheet } from "../../../css/types.js";
+import { SVGCSSIcon } from "../types.js";
+/**
+ * Add styles for icon to stylesheet
+ *
+ * If commonStylesheet is an object, all styles will be added to it and result
+ * will contain the same stylesheet for all classes.
+ *
+ * If commonStylesheet is not an object, styles will be separated into different
+ * stylesheets for classes and keyframes, which can be reused across icons.
+ */
+declare function renderSVGCSSIconStyle(icon: SVGCSSIcon, commonStylesheet?: CSSGeneratedStylesheet | ((selector: string) => CSSGeneratedStylesheet)): Record<string, CSSGeneratedStylesheet>;
+export { renderSVGCSSIconStyle };

package/lib/svg-css/icon/css/basic.js

@@ -0,0 +1,26 @@
+import { addGeneratedSelector, createEmptyStylesheet } from "../../../css/stylesheet.js";
+import { prefersReduceMotion } from "../../../helpers/reduce-motion.js";
+
+/**
+* Add styles for icon to stylesheet
+*
+* If commonStylesheet is an object, all styles will be added to it and result
+* will contain the same stylesheet for all classes.
+*
+* If commonStylesheet is not an object, styles will be separated into different
+* stylesheets for classes and keyframes, which can be reused across icons.
+*/
+function renderSVGCSSIconStyle(icon, commonStylesheet = createEmptyStylesheet) {
+	const stylesheets = Object.create(null);
+	const getStylesheet = (className) => {
+		if (typeof commonStylesheet === "object") return commonStylesheet;
+		if (!stylesheets[className]) stylesheets[className] = commonStylesheet(className);
+		return stylesheets[className];
+	};
+	for (const className in icon.classes) addGeneratedSelector(getStylesheet(className), [`.${className}`], icon.classes[className]);
+	for (const className in icon.animations) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, `.${className}`], icon.animations[className]);
+	for (const keyframeName in icon.keyframes) getStylesheet(keyframeName).keyframes[keyframeName] = icon.keyframes[keyframeName];
+	return stylesheets;
+}
+
+export { renderSVGCSSIconStyle };

package/lib/svg-css/icon/css/stateful.d.ts

@@ -0,0 +1,14 @@
+import { CSSGeneratedStylesheet } from "../../../css/types.js";
+import { SVGCSSStatefulIcon } from "../types.js";
+import { StatefulIconSelectorsContext } from "../../states/selector/types.js";
+/**
+ * Add styles for stateful icon to stylesheet
+ *
+ * If commonStylesheet is an object, all styles will be added to it and result
+ * will contain the same stylesheet for all classes.
+ *
+ * If commonStylesheet is not an object, styles will be separated into different
+ * stylesheets for classes and keyframes, which can be reused across icons.
+ */
+declare function renderStatefulSVGCSSIconStyle(icon: SVGCSSStatefulIcon, context: StatefulIconSelectorsContext, commonStylesheet?: CSSGeneratedStylesheet | ((selector: string) => CSSGeneratedStylesheet)): Record<string, CSSGeneratedStylesheet>;
+export { renderStatefulSVGCSSIconStyle };

package/lib/svg-css/icon/css/stateful.js

@@ -0,0 +1,45 @@
+import { addGeneratedSelector, createEmptyStylesheet } from "../../../css/stylesheet.js";
+import { prefersReduceMotion } from "../../../helpers/reduce-motion.js";
+import { getSelectorsForStateValues } from "../../states/selector/parse.js";
+
+/**
+* Add styles for stateful icon to stylesheet
+*
+* If commonStylesheet is an object, all styles will be added to it and result
+* will contain the same stylesheet for all classes.
+*
+* If commonStylesheet is not an object, styles will be separated into different
+* stylesheets for classes and keyframes, which can be reused across icons.
+*/
+function renderStatefulSVGCSSIconStyle(icon, context, commonStylesheet = createEmptyStylesheet) {
+	const stylesheets = Object.create(null);
+	const getStylesheet = (className) => {
+		if (typeof commonStylesheet === "object") return commonStylesheet;
+		if (!stylesheets[className]) stylesheets[className] = commonStylesheet(className);
+		return stylesheets[className];
+	};
+	for (const className in icon.classes) addGeneratedSelector(getStylesheet(className), [`.${className}`], icon.classes[className]);
+	for (const className in icon.animations) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, `.${className}`], icon.animations[className]);
+	for (const keyframeName in icon.keyframes) getStylesheet(keyframeName).keyframes[keyframeName] = icon.keyframes[keyframeName];
+	for (const className in icon.statefulClasses) {
+		const baseClassName = `.${className}`;
+		const stylesheet = getStylesheet(className);
+		const classData = icon.statefulClasses[className];
+		if (classData.transition) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, baseClassName], classData.transition);
+		for (const stateKey in classData.stateRules) {
+			const selectors = getSelectorsForStateValues(context, stateKey);
+			if (selectors) for (const tree of selectors) addGeneratedSelector(stylesheet, [...tree, baseClassName], classData.stateRules[stateKey]);
+		}
+		for (const stateKey in classData.stateTransition) {
+			const selectors = getSelectorsForStateValues(context, stateKey);
+			if (selectors) for (const tree of selectors) addGeneratedSelector(stylesheet, [
+				prefersReduceMotion,
+				...tree,
+				baseClassName
+			], classData.stateTransition[stateKey]);
+		}
+	}
+	return stylesheets;
+}
+
+export { renderStatefulSVGCSSIconStyle };

package/lib/svg-css/icon/types.d.ts

@@ -0,0 +1,45 @@
+import { IconViewBox } from "../../svg/viewbox/types.js";
+import { CSSKeyframes, CSSRules } from "../../css/types.js";
+import { IconStatesList } from "../states/types.js";
+/**
+ * Main properties
+ */
+interface MainProps {
+  viewBox: IconViewBox | string;
+  fallback?: string;
+  content: string;
+}
+interface StatefulMainProps extends MainProps {
+  states: IconStatesList;
+}
+/**
+ * CSS data
+ */
+interface SVGCSSIconRules {
+  classes?: Record<string, CSSRules | string>;
+  animations?: Record<string, CSSRules | string>;
+  keyframes?: Record<string, CSSKeyframes | string>;
+}
+/**
+ * Extended class interface for stateful icons
+ */
+interface ExtendedSVGCSSIconClass {
+  stateRules?: Record<string, CSSRules | string>;
+  transition?: CSSRules | string;
+  stateTransition?: Record<string, CSSRules | string>;
+}
+/**
+ * Stateful CSS data
+ */
+interface SVGCSSStatefulIconRules extends SVGCSSIconRules {
+  statefulClasses?: Record<string, ExtendedSVGCSSIconClass>;
+}
+/**
+ * Icon data
+ */
+interface SVGCSSIcon extends MainProps, SVGCSSIconRules {}
+/**
+ * Icon with states
+ */
+interface SVGCSSStatefulIcon extends StatefulMainProps, SVGCSSStatefulIconRules {}
+export { SVGCSSIcon, SVGCSSIconRules, SVGCSSStatefulIcon, SVGCSSStatefulIconRules };

package/lib/svg-css/icon/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/cleanup-values.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Clean up state values object
+ */
+declare function cleanupStateValues(states: IconStatesList, values: Record<string, boolean | string>, clone?: boolean): Record<string, string | boolean>;
+export { cleanupStateValues };

package/lib/svg-css/states/cleanup-values.js

@@ -0,0 +1,15 @@
+import { getStateValue } from "./value.js";
+
+/**
+* Clean up state values object
+*/
+function cleanupStateValues(states, values, clone = false) {
+	const result = clone ? { ...values } : values;
+	for (const state of states) {
+		const stateName = typeof state === "string" ? state : state[0];
+		result[stateName] = getStateValue(state, result[stateName]);
+	}
+	return result;
+}
+
+export { cleanupStateValues };

package/lib/svg-css/states/fallback/parse.d.ts

@@ -0,0 +1,7 @@
+import { IconFallbackTemplate } from "./types.js";
+import { IconStatesList } from "../types.js";
+/**
+ * Parse fallback template string into array of strings and states
+ */
+declare function parseIconFallbackTemplate(fallback: string, states: IconStatesList): IconFallbackTemplate | undefined;
+export { parseIconFallbackTemplate };

package/lib/svg-css/states/fallback/parse.js

@@ -0,0 +1,46 @@
+function unwrap(value) {
+	if (value.startsWith("'") && value.endsWith("'")) return value.slice(1, -1);
+	return value;
+}
+/**
+* Parse fallback template string into array of strings and states
+*/
+function parseIconFallbackTemplate(fallback, states) {
+	const chunks = [];
+	let startIndex = 0;
+	for (const match of fallback.matchAll(/{[^}]+}/g)) {
+		const matchText = match[0];
+		const matchIndex = match.index || 0;
+		if (matchIndex > startIndex) {
+			const prev = fallback.slice(startIndex, matchIndex);
+			if (prev) chunks.push(prev);
+		}
+		startIndex = matchIndex + matchText.length;
+		const textMatches = Array.from(matchText.matchAll(/[a-z0-9:'-]+/g));
+		if (!textMatches.length) return;
+		const separators = Array.from(matchText.matchAll(/[^a-z0-9:'-]/g));
+		if (separators.length !== textMatches.length + 1) return;
+		const stateName = textMatches[0][0].trim();
+		const state = states.find((s) => typeof s === "string" ? s === stateName : s[0] === stateName);
+		if (!state) return;
+		if (typeof state === "string") {
+			if (textMatches.length !== 3) return;
+			const trueValue = textMatches[1][0];
+			const falseValue = textMatches[2][0];
+			const firstSeparator = separators[1][0];
+			const secondSeparator = separators[2][0];
+			if (firstSeparator !== "?" || secondSeparator !== "|") return;
+			chunks.push({
+				state,
+				values: [unwrap(falseValue), unwrap(trueValue)]
+			});
+		} else {
+			if (textMatches.length > 1) return;
+			chunks.push({ state: stateName });
+		}
+	}
+	if (startIndex < fallback.length) chunks.push(fallback.slice(startIndex));
+	return chunks;
+}
+
+export { parseIconFallbackTemplate };

package/lib/svg-css/states/fallback/stringify.d.ts

@@ -0,0 +1,6 @@
+import { IconFallbackTemplate } from "./types.js";
+/**
+ * Generate fallback string from template and states
+ */
+declare function getIconFallback(template: IconFallbackTemplate, values: Record<string, boolean | string>): string;
+export { getIconFallback };

package/lib/svg-css/states/fallback/stringify.js

@@ -0,0 +1,8 @@
+/**
+* Generate fallback string from template and states
+*/
+function getIconFallback(template, values) {
+	return template.map((chunk) => typeof chunk === "string" ? chunk : "values" in chunk ? chunk.values[+!!values[chunk.state]] : values[chunk.state]).join("");
+}
+
+export { getIconFallback };

package/lib/svg-css/states/fallback/test.d.ts

@@ -0,0 +1,9 @@
+import { IconFallbackTemplate } from "./types.js";
+import { IconStatesList } from "../types.js";
+/**
+ * Parse and test fallback template string
+ *
+ * This will make sure template is valid and does not contain invalid characters
+ */
+declare function parseAndTestIconFallbackTemplate(fallback: string, states: IconStatesList): IconFallbackTemplate | undefined;
+export { parseAndTestIconFallbackTemplate };

package/lib/svg-css/states/fallback/test.js

@@ -0,0 +1,21 @@
+import { parseIconFallbackTemplate } from "./parse.js";
+
+const match = /^[a-z0-9:-]*$/;
+/**
+* Parse and test fallback template string
+*
+* This will make sure template is valid and does not contain invalid characters
+*/
+function parseAndTestIconFallbackTemplate(fallback, states) {
+	const template = parseIconFallbackTemplate(fallback, states);
+	if (template) {
+		for (const chunk of template) if (typeof chunk === "string") {
+			if (!chunk.match(match)) return;
+		} else if ("values" in chunk) {
+			if (!chunk.values.every((v) => v.match(match))) return;
+		}
+	}
+	return template;
+}
+
+export { parseAndTestIconFallbackTemplate };

package/lib/svg-css/states/fallback/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Fallback replacement for boolean state
+ */
+interface IconFallbackBooleanState {
+  state: string;
+  values: [string, string];
+}
+/**
+ * Fallback for named state
+ *
+ * Value should match state values
+ */
+interface IconFallbackAdvancedState {
+  state: string;
+}
+/**
+ * Template for fallback: mix of strings and states
+ */
+type IconFallbackTemplate = (string | IconFallbackBooleanState | IconFallbackAdvancedState)[];
+export { IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate };

package/lib/svg-css/states/fallback/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/focus.d.ts

@@ -0,0 +1,10 @@
+import { IconStatesList, IconStatesState } from "./types.js";
+/**
+ * Check for focus state
+ */
+declare function isFocusState(state: IconStatesState | string): boolean;
+/**
+ * Filter out focus state from states list
+ */
+declare function filterFocusState(states: IconStatesList): IconStatesList;
+export { filterFocusState, isFocusState };

package/lib/svg-css/states/focus.js

@@ -0,0 +1,14 @@
+/**
+* Check for focus state
+*/
+function isFocusState(state) {
+	return state === "focus";
+}
+/**
+* Filter out focus state from states list
+*/
+function filterFocusState(states) {
+	return states.filter((state) => !isFocusState(state));
+}
+
+export { filterFocusState, isFocusState };

package/lib/svg-css/states/generator.d.ts

@@ -0,0 +1,19 @@
+import { IconStatesList, IconStatesState } from "./types.js";
+/**
+ * Generate code for object from states
+ *
+ * Does not include starting { and ending }
+ * Last entry does not have a comma at the end
+ */
+declare function generateObjectFromStates(states: IconStatesList): string;
+/**
+ * Generate code for TypeScript interface from state
+ */
+declare function getStateInterface(state: IconStatesState, optional?: boolean): string;
+/**
+ * Generate code for TypeScript interface from states
+ *
+ * Does not include starting { and ending }
+ */
+declare function generateInterfaceFromStates(states: IconStatesList, optional?: boolean): string;
+export { generateInterfaceFromStates, generateObjectFromStates, getStateInterface };

package/lib/svg-css/states/generator.js

@@ -0,0 +1,31 @@
+import { getAdvancedStateDefaultValue } from "./value.js";
+
+/**
+* Generate code for object from states
+*
+* Does not include starting { and ending }
+* Last entry does not have a comma at the end
+*/
+function generateObjectFromStates(states) {
+	const lines = [];
+	for (const state of states) if (typeof state === "string") lines.push(`'${state}': false`);
+	else lines.push(`'${state[0]}': '${getAdvancedStateDefaultValue(state)}'`);
+	return lines.join(",\n	");
+}
+/**
+* Generate code for TypeScript interface from state
+*/
+function getStateInterface(state, optional = true) {
+	const q = optional ? "?" : "";
+	return typeof state === "string" ? `'${state}'${q}: boolean;` : `'${state[0]}'${q}: ${state[1].map((value) => `'${value}'`).join(" | ")};`;
+}
+/**
+* Generate code for TypeScript interface from states
+*
+* Does not include starting { and ending }
+*/
+function generateInterfaceFromStates(states, optional = true) {
+	return states.map((state) => getStateInterface(state, optional)).join("\n	");
+}
+
+export { generateInterfaceFromStates, generateObjectFromStates, getStateInterface };

package/lib/svg-css/states/key.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Get state values from an underscore separated list of state values
+ */
+declare function getStatesFromKey(key: string, states: IconStatesList): Record<string, string | boolean>;
+export { getStatesFromKey };

package/lib/svg-css/states/key.js

@@ -0,0 +1,22 @@
+/**
+* Get state values from an underscore separated list of state values
+*/
+function getStatesFromKey(key, states) {
+	const obj = Object.create(null);
+	const parts = key.split("_");
+	for (const state of states) {
+		if (typeof state === "string") {
+			if (parts.includes(state)) obj[state] = true;
+			continue;
+		}
+		const values = state[1];
+		const defaultValue = state[2] || values[0];
+		for (const value of values) if (value !== defaultValue && parts.includes(value)) {
+			obj[state[0]] = value;
+			break;
+		}
+	}
+	return obj;
+}
+
+export { getStatesFromKey };

package/lib/svg-css/states/object.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Create reactive object from states
+ */
+declare function getObjectFromStates(states: IconStatesList): Record<string, boolean | string>;
+export { getObjectFromStates };