@plitzi/sdk-shared 0.36.2 → 0.37.1

package/dist/style/index.d.ts

@@ -4,4 +4,5 @@ export * from './fontValidation';
 export * from './fonts';
 export * from './fontsFromCss';
 export * from './styleConstants';
+export * from './styleStates';
 export { styleConstants };

package/dist/style/index.mjs

@@ -3,4 +3,5 @@ import { fontLinkAssets as a } from "./fontAssets.mjs";
 import { SYSTEM_FONTS as o, availableFonts as s, familiesInCss as c, fontFamilyStack as l, fontUrlResolver as u, fontsToHead as d, googleCss2Url as f, googleTextSubsetUrl as p, isSafeFontUrl as m, primaryFamily as h } from "./fonts.mjs";
 import { FontValidationError as g, parseSpaceFont as _ } from "./fontValidation.mjs";
 import { fallbackForFamily as v, fontsFromCss as y } from "./fontsFromCss.mjs";
-export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, i as inheritableAttributesBase, m as isSafeFontUrl, _ as parseSpaceFont, h as primaryFamily, e as styleConstants };
+import { STYLE_STATES as b, STYLE_STATE_LABELS as x, inCascadeOrder as S, isKnownState as C } from "./styleStates.mjs";
+export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, b as STYLE_STATES, x as STYLE_STATE_LABELS, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, S as inCascadeOrder, i as inheritableAttributesBase, C as isKnownState, m as isSafeFontUrl, _ as parseSpaceFont, h as primaryFamily, e as styleConstants };

package/dist/style/styleConstants.d.ts

@@ -78,6 +78,8 @@ declare const styleConstants: {
     readonly ANIMATION_DIRECTION: "animation-direction";
     readonly ANIMATION_FILL_MODE: "animation-fill-mode";
     readonly ANIMATION_PLAY_STATE: "animation-play-state";
+    readonly ANIMATION_TIMELINE: "animation-timeline";
+    readonly ANIMATION_RANGE: "animation-range";
     readonly BOX_SHADOW: "box-shadow";
     readonly FILTER: "filter";
     readonly BACKDROP_FILTER: "backdrop-filter";
@@ -121,6 +123,8 @@ declare const styleConstants: {
     readonly OVERFLOW: "overflow";
     readonly OVERFLOW_X: "overflow-x";
     readonly OVERFLOW_Y: "overflow-y";
+    readonly SCROLLBAR_WIDTH: "scrollbar-width";
+    readonly SCROLLBAR_COLOR: "scrollbar-color";
     readonly OBJECT_FIT: "object-fit";
     readonly OBJECT_POSITION: "object-position";
     readonly COLUMN_WIDTH: "column-width";
@@ -141,6 +145,8 @@ declare const styleConstants: {
     readonly TEXT_ALIGN: "text-align";
     readonly FONT_STYLE: "font-style";
     readonly FONT_VARIANT: "font-variant";
+    readonly FONT_VARIANT_NUMERIC: "font-variant-numeric";
+    readonly FONT_FEATURE_SETTINGS: "font-feature-settings";
     readonly TEXT_DECORATION: "text-decoration";
     readonly TEXT_DECORATION_LINE: "text-decoration-line";
     readonly TEXT_DECORATION_COLOR: "text-decoration-color";
@@ -163,14 +169,15 @@ declare const styleConstants: {
     readonly LINE_CLAMP: "line-clamp";
     readonly WEBKIT_LINE_CLAMP: "-webkit-line-clamp";
     readonly WEBKIT_BOX_ORIENT: "-webkit-box-orient";
+    readonly WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color";
     readonly FILL: "fill";
     readonly STROKE: "stroke";
     readonly STROKE_WIDTH: "stroke-width";
 };
 export declare const inheritableAttributesBase: StyleCategory[];
 export declare const StyleBindingsAllowed: {
-    path: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "stroke" | "stroke-width";
-    label: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "stroke" | "stroke-width";
+    path: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
+    label: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
 }[];
 export declare const baseDefaultValue: Record<StyleCategory, StyleValue>;
 export default styleConstants;

package/dist/style/styleConstants.mjs

@@ -91,6 +91,8 @@ var e = {
 	ANIMATION_DIRECTION: "animation-direction",
 	ANIMATION_FILL_MODE: "animation-fill-mode",
 	ANIMATION_PLAY_STATE: "animation-play-state",
+	ANIMATION_TIMELINE: "animation-timeline",
+	ANIMATION_RANGE: "animation-range",
 	BOX_SHADOW: "box-shadow",
 	FILTER: "filter",
 	BACKDROP_FILTER: "backdrop-filter",
@@ -134,6 +136,8 @@ var e = {
 	OVERFLOW: "overflow",
 	OVERFLOW_X: "overflow-x",
 	OVERFLOW_Y: "overflow-y",
+	SCROLLBAR_WIDTH: "scrollbar-width",
+	SCROLLBAR_COLOR: "scrollbar-color",
 	OBJECT_FIT: "object-fit",
 	OBJECT_POSITION: "object-position",
 	COLUMN_WIDTH: "column-width",
@@ -154,6 +158,8 @@ var e = {
 	TEXT_ALIGN: "text-align",
 	FONT_STYLE: "font-style",
 	FONT_VARIANT: "font-variant",
+	FONT_VARIANT_NUMERIC: "font-variant-numeric",
+	FONT_FEATURE_SETTINGS: "font-feature-settings",
 	TEXT_DECORATION: "text-decoration",
 	TEXT_DECORATION_LINE: "text-decoration-line",
 	TEXT_DECORATION_COLOR: "text-decoration-color",
@@ -176,6 +182,7 @@ var e = {
 	LINE_CLAMP: "line-clamp",
 	WEBKIT_LINE_CLAMP: "-webkit-line-clamp",
 	WEBKIT_BOX_ORIENT: "-webkit-box-orient",
+	WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color",
 	FILL: "fill",
 	STROKE: "stroke",
 	STROKE_WIDTH: "stroke-width"
@@ -184,6 +191,8 @@ var e = {
 	t.FONT_SIZE,
 	t.FONT_STYLE,
 	t.FONT_VARIANT,
+	t.FONT_VARIANT_NUMERIC,
+	t.FONT_FEATURE_SETTINGS,
 	t.FONT_WEIGHT,
 	t.COLOR,
 	t.LINE_HEIGHT,
@@ -281,6 +290,8 @@ var e = {
 	[t.ANIMATION_DIRECTION]: "normal",
 	[t.ANIMATION_FILL_MODE]: "none",
 	[t.ANIMATION_PLAY_STATE]: "running",
+	[t.ANIMATION_TIMELINE]: "auto",
+	[t.ANIMATION_RANGE]: "normal",
 	[t.BOX_SHADOW]: "1px 1px 3px 1px black",
 	[t.FILTER]: "blur(5px)",
 	[t.BACKDROP_FILTER]: "blur(5px)",
@@ -324,6 +335,8 @@ var e = {
 	[t.OVERFLOW]: "visible",
 	[t.OVERFLOW_X]: "visible",
 	[t.OVERFLOW_Y]: "visible",
+	[t.SCROLLBAR_WIDTH]: "auto",
+	[t.SCROLLBAR_COLOR]: "auto",
 	[t.OBJECT_FIT]: "fill",
 	[t.OBJECT_POSITION]: "50% 50%",
 	[t.COLUMN_WIDTH]: "auto",
@@ -344,6 +357,8 @@ var e = {
 	[t.TEXT_ALIGN]: "left",
 	[t.FONT_STYLE]: "normal",
 	[t.FONT_VARIANT]: "normal",
+	[t.FONT_VARIANT_NUMERIC]: "normal",
+	[t.FONT_FEATURE_SETTINGS]: "normal",
 	[t.TEXT_DECORATION]: "none",
 	[t.TEXT_DECORATION_LINE]: "none",
 	[t.TEXT_DECORATION_COLOR]: "currentColor",
@@ -366,6 +381,7 @@ var e = {
 	[t.LINE_CLAMP]: "none",
 	[t.WEBKIT_LINE_CLAMP]: "none",
 	[t.WEBKIT_BOX_ORIENT]: "horizontal",
+	[t.WEBKIT_TEXT_FILL_COLOR]: "currentcolor",
 	[t.FILL]: "currentColor",
 	[t.STROKE]: "none",
 	[t.STROKE_WIDTH]: "1"

package/dist/style/styleStates.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The states a selector can react to — one list, read by the type, the style editor, the event schema and authoring.
+ *
+ * It used to be written out in each of those, and the copies drifted: the editor's `checked` and `visited` options had
+ * their label and value swapped, so choosing one stored a state nothing else recognised.
+ *
+ * `focus-visible` is the focus ring a keyboard user needs and a mouse user does not; `focus-within` dresses a
+ * container while anything inside it has focus — a field wrapper around its input.
+ */
+export declare const STYLE_STATES: readonly ["hover", "focus", "focus-visible", "focus-within", "active", "disabled", "checked", "visited"];
+export declare const STYLE_STATE_LABELS: Record<(typeof STYLE_STATES)[number], string>;
+export declare const isKnownState: (state: string) => state is (typeof STYLE_STATES)[number];
+/**
+ * A rule's states in the order they have to be written for the right one to win, whatever order they were added in.
+ * A state outside the list keeps its place after the known ones.
+ */
+export declare const inCascadeOrder: <T>(states: Record<string, T>) => [string, T][];

package/dist/style/styleStates.mjs

@@ -0,0 +1,31 @@
+//#region src/style/styleStates.ts
+var e = [
+	"hover",
+	"focus",
+	"focus-visible",
+	"focus-within",
+	"active",
+	"disabled",
+	"checked",
+	"visited"
+], t = {
+	hover: "Hover",
+	focus: "Focus",
+	"focus-visible": "Focus visible",
+	"focus-within": "Focus within",
+	active: "Active",
+	disabled: "Disabled",
+	checked: "Checked",
+	visited: "Visited"
+}, n = {
+	visited: 0,
+	checked: 1,
+	"focus-within": 2,
+	hover: 3,
+	focus: 4,
+	"focus-visible": 5,
+	active: 6,
+	disabled: 7
+}, r = (e) => Object.hasOwn(n, e), i = (t) => r(t) ? n[t] : e.length, a = (e) => Object.entries(e).sort(([e], [t]) => i(e) - i(t));
+//#endregion
+export { e as STYLE_STATES, t as STYLE_STATE_LABELS, a as inCascadeOrder, r as isKnownState };

package/dist/types/SchemaTypes.d.ts

@@ -29,7 +29,11 @@ export type DropPosition = 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'cus
 export type BindingCategory = 'attributes' | 'style' | 'initialState';
 export type BindingTransformer = {
     action: string;
-    params: Record<string, string>;
+    /**
+     * Mostly text, and not only: a param the builder draws as a checkbox (`styleVariant`'s `append`) is stored as the
+     * boolean it is, and the transformer reads it as one — `if (!append)`. Writing `"false"` there would read as true.
+     */
+    params: Record<string, string | number | boolean>;
     enabled?: boolean;
 };
 export type ElementBinding = {

package/dist/types/StoreTypes.d.ts

@@ -202,6 +202,8 @@ export type BuilderState = CommonState & {
     styleSelector?: string;
     styleVariant?: string;
     styleState?: StyleState;
+    /** The ancestor class being edited under: `styleState`/`styleVariant` are then its, and neither means always. */
+    styleAncestor?: string;
     elementHovered?: string;
     elementSelected?: string;
     setHovered: (elementId?: string) => void;

package/dist/types/StyleTypes.d.ts

@@ -1,9 +1,10 @@
 import { ColorScheme, Theme } from './ThemeTypes';
 import { default as styleConstants } from '../style/styleConstants';
+import { STYLE_STATES } from '../style/styleStates';
 export type TagType = 'class' | 'element' | 'id';
 export type DisplayMode = 'desktop' | 'tablet' | 'mobile';
 export type StyleMode = 'mobile-first' | 'desktop-first';
-export type StyleState = 'hover' | 'active' | 'focus' | 'disabled' | 'checked' | 'visited';
+export type StyleState = (typeof STYLE_STATES)[number];
 export type StyleValue = number | string;
 export type StyleCategory = (typeof styleConstants)[keyof typeof styleConstants];
 export declare enum StyleVariableCategory {
@@ -18,11 +19,25 @@ export type StyleVariableGroup = Record<string, StyleVariableValue>;
 export type StyleVariables = Record<StyleVariableCategory, StyleVariableGroup>;
 export type StyleObject = Partial<Record<StyleCategory, StyleValue>>;
 export type StyleStates = Partial<Record<StyleState, StyleObject>>;
-export type StyleVariants = Record<string, Omit<StyleBlock, 'variants'>>;
+export type StyleVariants = Record<string, Omit<StyleBlock, 'variants' | 'ancestors'>>;
+export type StyleAncestor = {
+    default?: StyleObject;
+    states?: StyleStates;
+    variants?: StyleVariants;
+};
+export type StyleAncestors = Record<string, StyleAncestor>;
 export type StyleBlock = {
     default?: StyleObject;
     states?: StyleStates;
     variants?: StyleVariants;
+    ancestors?: StyleAncestors;
+};
+export type StyleTarget = {
+    componentType?: string;
+    styleSelector?: string;
+    styleState?: StyleState;
+    styleVariant?: string;
+    styleAncestor?: string;
 };
 export type StyleAttributes = Record<string, StyleBlock>;
 export type StyleItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-shared",
-  "version": "0.36.2",
+  "version": "0.37.1",
   "license": "AGPL-3.0",
   "files": [
     "dist",
@@ -1136,6 +1136,10 @@
       "types": "./dist/style/styleConstants.d.ts",
       "import": "./dist/style/styleConstants.mjs"
     },
+    "./style/styleStates": {
+      "types": "./dist/style/styleStates.d.ts",
+      "import": "./dist/style/styleStates.mjs"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.mjs"