webstudio 0.260.2 → 0.261.0

package/lib/cli.js

@@ -2644,7 +2644,7 @@ var toValue = (styleValue, transformValue) => {
       case "oklch":
         return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
       // Fall back to color() function for less common color spaces.
-      // colorjs uses internal short names that differ from CSS predefined color space identifiers.
+      // Webstudio uses colorjs internal names; map to CSS predefined color space names.
       case "p3":
         return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
       case "a98rgb":
@@ -4643,7 +4643,7 @@ __export(normalize_css_exports, {
   address: () => address$1,
   article: () => article$1,
   aside: () => aside$1,
-  b: () => b$6,
+  b: () => b$5,
   body: () => body$1,
   button: () => button$1,
   checkbox: () => checkbox$1,
@@ -4770,14 +4770,14 @@ var hr$1 = [
   { property: "color", value: { type: "keyword", value: "inherit" } },
   { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
 ];
-var b$6 = [
+var b$5 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
   },
   { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
 ];
-var strong = b$6;
+var strong = b$5;
 var code$1 = [
   {
     property: "font-family",
@@ -7045,7 +7045,7 @@ var hr = [
   { property: "color", value: { type: "keyword", value: "inherit" } },
   { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
 ];
-var b$5 = [
+var b$4 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -7262,7 +7262,7 @@ const n$6 = {
 const t$e = {
   tag: { required: false, control: "text", type: "string" }
 };
-const m$9 = {
+const m$8 = {
   presetStyle: {
     h1,
     h2,
@@ -7345,7 +7345,7 @@ const e$s = {
 const o$D = {};
 const p$6 = {
   label: "Bold Text",
-  presetStyle: { b: b$5 },
+  presetStyle: { b: b$4 },
   initialProps: ["id", "class"],
   props: o$D
 };
@@ -7745,7 +7745,7 @@ const r$a = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, m$8 = {
+}, m$7 = {
   label: "Radio",
   icon: RadioCheckedIcon,
   presetStyle: r$a,
@@ -7768,7 +7768,7 @@ const t$9 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, m$7 = {
+}, m$6 = {
   icon: CheckboxCheckedIcon,
   presetStyle: t$9,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
@@ -8252,7 +8252,7 @@ const e$f = {
   xmlns: { required: false, control: "text", type: "string" },
   "xmlns:xhtml": { required: false, control: "text", type: "string" }
 };
-const m$6 = {
+const m$5 = {
   category: "xml",
   order: 6,
   icon: XmlIcon,
@@ -8761,7 +8761,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Bold: p$6,
   Box: g$3,
   Button: e$q,
-  Checkbox: m$7,
+  Checkbox: m$6,
   CodeText: c$3,
   Form: c$4,
   Fragment: t$i,
@@ -8769,7 +8769,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   HeadMeta: e$c,
   HeadSlot: r$8,
   HeadTitle: r$7,
-  Heading: m$9,
+  Heading: m$8,
   HtmlEmbed: a$6,
   Image: i$7,
   Input: l$5,
@@ -8781,7 +8781,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   MarkdownEmbed: a$5,
   Option: a$1,
   Paragraph: i$8,
-  RadioButton: m$8,
+  RadioButton: m$7,
   RemixForm: p$4,
   RichTextLink: a$3,
   Select: p$2,
@@ -8798,26 +8798,26 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   VimeoPlayButton: c$2,
   VimeoPreviewImage: i$5,
   VimeoSpinner: c$1,
-  XmlNode: m$6,
+  XmlNode: m$5,
   XmlTime: a$2,
   YouTube: s$2
 }, Symbol.toStringTag, { value: "Module" }));
 //! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
 const l$1 = (n2) => new Proxy({}, { get(w2, t2) {
   return `${n2}${t2}`;
-} }), i$3 = l$1("@webstudio-is/sdk-components-animation:"), c = { category: "animations", description: "Animation Group component is designed to animate its children.", icon: AnimationGroupIcon, order: 0, label: "Animation Group", contentModel: { category: "instance", children: ["instance", i$3.AnimateText, i$3.StaggerAnimation, i$3.VideoAnimation] }, initialProps: ["action"], props: { action: { required: false, control: "animationAction", type: "animationAction", description: "Animation Action" } } }, d$2 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
+} }), i$3 = l$1("@webstudio-is/sdk-components-animation:"), c = { category: "animations", description: "Animation Group component is designed to animate its children.", icon: AnimationGroupIcon, order: 0, label: "Animation Group", contentModel: { category: "instance", children: ["instance", i$3.AnimateText, i$3.StaggerAnimation, i$3.VideoAnimation] }, initialProps: ["action"], props: { action: { required: false, control: "animationAction", type: "animationAction", description: "Animation Action" } } }, d$1 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
 - 0: Typewriter effect (no animation).
 - (0..1]: Animates one part of the text at a time.
-- (1..n]: Animates multiple parts of the text within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 5 }, splitBy: { description: "Defines how the text is split for animation (e.g., by character, space, or symbol).", required: false, control: "select", type: "string", defaultValue: "char", options: ["char", "space", 'symbol "#"', 'symbol "~"'] } }, p$1 = { category: "animations", description: "Text animation allows you to split text by char or by word to animate it.", icon: TextAnimationIcon, order: 1, label: "Text Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing", "splitBy"], props: d$2 }, m$5 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
+- (1..n]: Animates multiple parts of the text within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 5 }, splitBy: { description: "Defines how the text is split for animation (e.g., by character, space, or symbol).", required: false, control: "select", type: "string", defaultValue: "char", options: ["char", "space", 'symbol "#"', 'symbol "~"'] } }, p$1 = { category: "animations", description: "Text animation allows you to split text by char or by word to animate it.", icon: TextAnimationIcon, order: 1, label: "Text Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing", "splitBy"], props: d$1 }, m$4 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
 - 0: Typewriter effect (no animation).
 - (0..1]: Animates one child at a time.
-- (1..n]: Animates multiple children within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 1 } }, u$1 = { category: "animations", description: "Stagger animation allows you to animate children elements with a sliding window.", icon: StaggerAnimationIcon, order: 4, label: "Stagger Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing"], props: m$5 }, g$2 = { timeline: { required: false, control: "boolean", type: "boolean" } }, h$2 = { icon: PlayIcon, label: "Video Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, props: g$2, initialProps: ["timeline"] };
+- (1..n]: Animates multiple children within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 1 } }, u$1 = { category: "animations", description: "Stagger animation allows you to animate children elements with a sliding window.", icon: StaggerAnimationIcon, order: 4, label: "Stagger Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing"], props: m$4 }, g$2 = { timeline: { required: false, control: "boolean", type: "boolean" } }, h$3 = { icon: PlayIcon, label: "Video Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, props: g$2, initialProps: ["timeline"] };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AnimateChildren: c,
   AnimateText: p$1,
   StaggerAnimation: u$1,
-  VideoAnimation: h$2
+  VideoAnimation: h$3
 }, Symbol.toStringTag, { value: "Module" }));
 const r$6 = (t2) => new Proxy(
   {},
@@ -8843,31 +8843,43 @@ const o$c = {
     description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
   }
 }, e$b = {}, t$7 = {};
-const g$1 = {
+const C$3 = {
   icon: CollapsibleIcon,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [n$4.CollapsibleTrigger, n$4.CollapsibleContent]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
   initialProps: ["open"],
   props: o$c
-}, m$4 = {
+}, b$3 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   props: e$b
-}, d$1 = {
+}, g$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
@@ -8897,7 +8909,7 @@ const o$a = (r2, t2, p2) => ({
 }), d = (r2, t2, p2, l2) => ({
   property: r2,
   value: { type: "rgb", alpha: 1, r: t2, g: p2, b: l2 }
-}), b$4 = [
+}), b$2 = [
   {
     property: "background-color",
     value: { type: "keyword", value: "transparent" }
@@ -8923,23 +8935,31 @@ const o$a = (r2, t2, p2) => ({
   o$a("padding-bottom", 0, "px"),
   o$a("padding-left", 0, "px")
 ];
-const S$1 = {
+const u = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   props: t$6
-}, b$3 = {
+}, v$2 = {
   icon: OverlayIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.DialogContent]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { div },
   props: e$a
-}, O = {
+}, S$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
@@ -8950,6 +8970,10 @@ const S$1 = {
       n$4.DialogClose
     ]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { div },
   props: n$3
 }, B = {
@@ -8976,7 +9000,7 @@ const S$1 = {
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    button: [b$4, button].flat()
+    button: [b$2, button].flat()
   },
   props: s$1
 }, P$1 = {
@@ -9045,26 +9069,34 @@ const e$8 = {
     options: ["always", "optimized"]
   }
 }, r$5 = {};
-const C$3 = {
+const C$2 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   props: o$9
-}, y$1 = {
+}, b$1 = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.PopoverClose]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$5
-}, h$1 = {
+}, y$1 = {
   icon: PopoverIcon,
   contentModel: {
     category: "instance",
@@ -9073,7 +9105,7 @@ const C$3 = {
   },
   initialProps: ["open"],
   props: e$8
-}, u = {
+}, h$2 = {
   icon: ButtonElementIcon,
   label: "Close Button",
   contentModel: {
@@ -9081,7 +9113,7 @@ const C$3 = {
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    button: [b$4, button].flat()
+    button: [b$2, button].flat()
   },
   props: r$5
 };
@@ -9164,6 +9196,11 @@ const g = {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
   props: o$8
 }, T = {
   icon: ContentIcon,
@@ -9171,6 +9208,11 @@ const g = {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
   presetStyle: { div },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
   props: t$4
@@ -9243,7 +9285,7 @@ Mainly so arrow navigation is done accordingly (left & right vs. up & down)
     description: "Current value of the element"
   }
 };
-const y = {
+const h$1 = {
   icon: TabsIcon,
   contentModel: {
     category: "instance",
@@ -9252,7 +9294,7 @@ const y = {
   },
   presetStyle: { div },
   props: e$6
-}, f$2 = {
+}, y = {
   icon: HeaderIcon,
   contentModel: {
     category: "none",
@@ -9261,7 +9303,7 @@ const y = {
   },
   presetStyle: { div },
   props: t$3
-}, x$1 = {
+}, f$2 = {
   icon: TriggerIcon,
   label: "Tab Trigger",
   indexWithinAncestor: n$4.Tabs,
@@ -9269,12 +9311,15 @@ const y = {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [{ label: "Active", selector: "[data-state=active]" }],
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
   presetStyle: {
-    button: [button, b$4].flat()
+    button: [button, b$2].flat()
   },
   props: o$7
-}, C$2 = {
+}, x$1 = {
   label: "Tab Content",
   icon: ContentIcon,
   indexWithinAncestor: n$4.Tabs,
@@ -9282,6 +9327,10 @@ const y = {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
   presetStyle: { div },
   props: r$4
 };
@@ -9349,7 +9398,7 @@ const e$5 = {
     description: "Current value of the element"
   }
 }, t$2 = {}, r$3 = {}, n$2 = {};
-const v$1 = {
+const C$1 = {
   icon: AccordionIcon,
   contentModel: {
     category: "instance",
@@ -9359,7 +9408,7 @@ const v$1 = {
   presetStyle: { div },
   initialProps: ["value", "collapsible"],
   props: e$5
-}, x = {
+}, v$1 = {
   label: "Item",
   icon: ItemIcon,
   indexWithinAncestor: n$4.Accordion,
@@ -9368,10 +9417,14 @@ const v$1 = {
     children: ["instance"],
     descendants: [n$4.AccordionHeader, n$4.AccordionContent]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { div },
   initialProps: ["value"],
   props: o$5
-}, f$1 = {
+}, x = {
   label: "Item Header",
   icon: HeaderIcon,
   contentModel: {
@@ -9379,6 +9432,10 @@ const v$1 = {
     children: ["instance"],
     descendants: [n$4.AccordionTrigger]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     h3: [
       ...h3,
@@ -9393,16 +9450,19 @@ const v$1 = {
     ]
   },
   props: t$2
-}, C$1 = {
+}, f$1 = {
   label: "Item Trigger",
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [{ label: "Open", selector: "[data-state=open]" }],
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    button: [button, b$4].flat()
+    button: [button, b$2].flat()
   },
   props: r$3
 }, H = {
@@ -9412,6 +9472,10 @@ const v$1 = {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
@@ -9456,7 +9520,7 @@ const e$4 = {
 }, i$1 = {
   active: { required: false, control: "boolean", type: "boolean" }
 }, a = {};
-const L = {
+const I = {
   icon: NavigationMenuIcon,
   contentModel: {
     category: "instance",
@@ -9467,7 +9531,7 @@ const L = {
     div
   },
   props: e$4
-}, h = {
+}, L = {
   icon: ListIcon,
   label: "Menu List",
   contentModel: {
@@ -9479,7 +9543,7 @@ const L = {
     div
   },
   props: t$1
-}, b$2 = {
+}, h = {
   icon: ListItemIcon,
   label: "Menu Item",
   indexWithinAncestor: n$4.NavigationMenu,
@@ -9496,15 +9560,19 @@ const L = {
     div
   },
   props: o$4
-}, k$3 = {
+}, C = {
   icon: TriggerIcon,
   label: "Menu Trigger",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   props: a
-}, w$1 = {
+}, k$3 = {
   icon: ContentIcon,
   label: "Menu Content",
   contentModel: {
@@ -9512,11 +9580,15 @@ const L = {
     children: ["instance"],
     descendants: [n$4.NavigationMenuLink]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
   props: n$1
-}, C = {
+}, w$1 = {
   icon: BoxIcon,
   label: "Accessible Link Wrapper",
   contentModel: {
@@ -9531,6 +9603,10 @@ const L = {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     div
   },
@@ -9640,7 +9716,7 @@ const e$3 = {
     description: "Current value of the element"
   }
 }, l = {}, s = {};
-const b$1 = {
+const V = {
   icon: SelectIcon,
   contentModel: {
     category: "instance",
@@ -9649,16 +9725,20 @@ const b$1 = {
   },
   initialProps: ["name", "value", "open", "required"],
   props: e$3
-}, f = {
+}, k$2 = {
   icon: TriggerIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.SelectValue]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { button },
   props: t
-}, w = {
+}, f = {
   label: "Value",
   icon: FormTextFieldIcon,
   contentModel: {
@@ -9668,16 +9748,20 @@ const b$1 = {
   presetStyle: { span },
   initialProps: ["placeholder"],
   props: o$3
-}, v = {
+}, w = {
   icon: ContentIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.SelectViewport]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { div },
   props: r$1
-}, P = {
+}, v = {
   icon: ViewportIcon,
   contentModel: {
     category: "none",
@@ -9686,13 +9770,17 @@ const b$1 = {
   },
   presetStyle: { div },
   props: n
-}, k$2 = {
+}, P = {
   icon: ItemIcon,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [n$4.SelectItemIndicator, n$4.SelectItemText]
   },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
   presetStyle: { div },
   initialProps: ["value"],
   props: i
@@ -9705,7 +9793,7 @@ const b$1 = {
   },
   presetStyle: { span },
   props: l
-}, q = {
+}, O = {
   label: "Item Text",
   icon: TextIcon,
   contentModel: {
@@ -9737,11 +9825,11 @@ const m$1 = {
     descendants: [n$4.SwitchThumb]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
-    button: [button, b$4].flat()
+    button: [button, b$2].flat()
   },
   initialProps: ["id", "class", "name", "value", "checked", "required"],
   props: e$2
@@ -9752,8 +9840,8 @@ const m$1 = {
     children: ["instance"]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     span
@@ -9782,11 +9870,12 @@ const m = {
     descendants: [n$4.CheckboxIndicator]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
   ],
   presetStyle: {
-    button: [button, b$4].flat()
+    button: [button, b$2].flat()
   },
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$1
@@ -9796,6 +9885,11 @@ const m = {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
+  ],
   presetStyle: {
     span
   },
@@ -9886,11 +9980,11 @@ const R = {
     descendants: [n$4.RadioGroupIndicator]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
-    button: [button, b$4].flat()
+    button: [button, b$2].flat()
   },
   initialProps: ["value"],
   props: o
@@ -9901,8 +9995,8 @@ const R = {
     children: ["instance"]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     span
@@ -9911,52 +10005,52 @@ const R = {
 };
 const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Accordion: v$1,
+  Accordion: C$1,
   AccordionContent: H,
-  AccordionHeader: f$1,
-  AccordionItem: x,
-  AccordionTrigger: C$1,
+  AccordionHeader: x,
+  AccordionItem: v$1,
+  AccordionTrigger: f$1,
   Checkbox: m,
   CheckboxIndicator: k$1,
-  Collapsible: g$1,
-  CollapsibleContent: d$1,
-  CollapsibleTrigger: m$4,
+  Collapsible: C$3,
+  CollapsibleContent: g$1,
+  CollapsibleTrigger: b$3,
   Dialog: P$1,
   DialogClose: H$1,
-  DialogContent: O,
+  DialogContent: S$1,
   DialogDescription: E,
-  DialogOverlay: b$3,
+  DialogOverlay: v$2,
   DialogTitle: B,
-  DialogTrigger: S$1,
+  DialogTrigger: u,
   Label: m$2,
-  NavigationMenu: L,
-  NavigationMenuContent: w$1,
-  NavigationMenuItem: b$2,
-  NavigationMenuLink: C,
-  NavigationMenuList: h,
-  NavigationMenuTrigger: k$3,
+  NavigationMenu: I,
+  NavigationMenuContent: k$3,
+  NavigationMenuItem: h,
+  NavigationMenuLink: w$1,
+  NavigationMenuList: L,
+  NavigationMenuTrigger: C,
   NavigationMenuViewport: S,
-  Popover: h$1,
-  PopoverClose: u,
-  PopoverContent: y$1,
-  PopoverTrigger: C$3,
+  Popover: y$1,
+  PopoverClose: h$2,
+  PopoverContent: b$1,
+  PopoverTrigger: C$2,
   RadioGroup: R,
   RadioGroupIndicator: k,
   RadioGroupItem: G,
-  Select: b$1,
-  SelectContent: v,
-  SelectItem: k$2,
+  Select: V,
+  SelectContent: w,
+  SelectItem: P,
   SelectItemIndicator: F,
-  SelectItemText: q,
-  SelectTrigger: f,
-  SelectValue: w,
-  SelectViewport: P,
+  SelectItemText: O,
+  SelectTrigger: k$2,
+  SelectValue: f,
+  SelectViewport: v,
   Switch: m$1,
   SwitchThumb: b,
-  Tabs: y,
-  TabsContent: C$2,
-  TabsList: f$2,
-  TabsTrigger: x$1,
+  Tabs: h$1,
+  TabsContent: x$1,
+  TabsList: y,
+  TabsTrigger: f$2,
   Tooltip: m$3,
   TooltipContent: T,
   TooltipTrigger: g
@@ -10868,7 +10962,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.260.2";
+const version = "0.261.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.260.2",
+  "version": "0.261.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -71,16 +71,16 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.260.2",
-    "@webstudio-is/http-client": "0.260.2",
-    "@webstudio-is/image": "0.260.2",
-    "@webstudio-is/react-sdk": "0.260.2",
-    "@webstudio-is/sdk-components-animation": "0.260.2",
-    "@webstudio-is/sdk-components-react": "0.260.2",
-    "@webstudio-is/sdk": "0.260.2",
-    "@webstudio-is/sdk-components-react-radix": "0.260.2",
-    "@webstudio-is/sdk-components-react-remix": "0.260.2",
-    "@webstudio-is/sdk-components-react-router": "0.260.2",
+    "@webstudio-is/react-sdk": "0.261.0",
+    "@webstudio-is/sdk": "0.261.0",
+    "@webstudio-is/http-client": "0.261.0",
+    "@webstudio-is/sdk-components-animation": "0.261.0",
+    "@webstudio-is/sdk-components-react": "0.261.0",
+    "@webstudio-is/sdk-components-react-remix": "0.261.0",
+    "@webstudio-is/sdk-components-react-router": "0.261.0",
+    "@webstudio-is/css-engine": "0.261.0",
+    "@webstudio-is/image": "0.261.0",
+    "@webstudio-is/sdk-components-react-radix": "0.261.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.260.2",
-    "@webstudio-is/react-sdk": "0.260.2",
-    "@webstudio-is/sdk": "0.260.2",
-    "@webstudio-is/sdk-components-react": "0.260.2",
-    "@webstudio-is/sdk-components-animation": "0.260.2",
-    "@webstudio-is/sdk-components-react-radix": "0.260.2",
-    "@webstudio-is/sdk-components-react-remix": "0.260.2",
+    "@webstudio-is/image": "0.261.0",
+    "@webstudio-is/react-sdk": "0.261.0",
+    "@webstudio-is/sdk": "0.261.0",
+    "@webstudio-is/sdk-components-react": "0.261.0",
+    "@webstudio-is/sdk-components-animation": "0.261.0",
+    "@webstudio-is/sdk-components-react-radix": "0.261.0",
+    "@webstudio-is/sdk-components-react-remix": "0.261.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@webstudio-is/image": "0.260.2",
-    "@webstudio-is/react-sdk": "0.260.2",
-    "@webstudio-is/sdk": "0.260.2",
-    "@webstudio-is/sdk-components-animation": "0.260.2",
-    "@webstudio-is/sdk-components-react-radix": "0.260.2",
-    "@webstudio-is/sdk-components-react-router": "0.260.2",
-    "@webstudio-is/sdk-components-react": "0.260.2",
+    "@webstudio-is/image": "0.261.0",
+    "@webstudio-is/react-sdk": "0.261.0",
+    "@webstudio-is/sdk": "0.261.0",
+    "@webstudio-is/sdk-components-animation": "0.261.0",
+    "@webstudio-is/sdk-components-react-radix": "0.261.0",
+    "@webstudio-is/sdk-components-react-router": "0.261.0",
+    "@webstudio-is/sdk-components-react": "0.261.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.260.2",
-    "@webstudio-is/react-sdk": "0.260.2",
-    "@webstudio-is/sdk": "0.260.2",
-    "@webstudio-is/sdk-components-react": "0.260.2",
-    "@webstudio-is/sdk-components-animation": "0.260.2",
-    "@webstudio-is/sdk-components-react-radix": "0.260.2",
+    "@webstudio-is/image": "0.261.0",
+    "@webstudio-is/react-sdk": "0.261.0",
+    "@webstudio-is/sdk": "0.261.0",
+    "@webstudio-is/sdk-components-react": "0.261.0",
+    "@webstudio-is/sdk-components-animation": "0.261.0",
+    "@webstudio-is/sdk-components-react-radix": "0.261.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"