@agnos-ui/core 0.10.0-next.2 → 0.10.0-next.3

package/{accordion-DqnKGmbS.js → accordion-47EpOD36.js}

@@ -2,8 +2,8 @@ import { writablesForProps, idWithDefault, stateStores, true$, mergeConfigStores
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writable, computed, readable, asWritable } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
-import { j as createTypeEnum, e as typeString, g as typeFunction, c as typeBoolean } from "./writables-e0tyaQpe.js";
-import { n as mergeDirectives, p as createAttributesDirective, r as registrationArray, d as directiveSubscribe } from "./dom-Bcg9ORcA.js";
+import { k as createTypeEnum, e as typeString, h as typeFunction, c as typeBoolean } from "./writables-Is1bF1Vt.js";
+import { n as mergeDirectives, p as createAttributesDirective, r as registrationArray, d as directiveSubscribe } from "./dom-DD1hAVZy.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;

package/{accordion-DRIm0xHf.cjs → accordion-nxveC0GZ.cjs}

@@ -3,8 +3,8 @@ const utils_stores = require("./utils/stores.cjs");
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_func = require("./utils/func.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
-const utils_directive = require("./dom-C2gi9OCP.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const utils_directive = require("./dom-Cm9_uROp.cjs");
 const utils_widget = require("./utils/widget.cjs");
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;

package/{alert-B-jQDQcB.cjs → alert-AhaliJ17.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const common = require("./common-D3QcdJ6S.cjs");
+const common = require("./common-B5jS-Ih_.cjs");
 const utils_widget = require("./utils/widget.cjs");
 function getAlertDefaultConfig() {
   return { ...common.getCommonAlertDefaultConfig() };

package/{alert-gGz2CDS9.js → alert-anMaigvi.js}

@@ -1,4 +1,4 @@
-import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-DK0ADNTX.js";
+import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-CCxNtFNM.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function getAlertDefaultConfig() {
   return { ...getCommonAlertDefaultConfig() };

package/{collapse-BV4kD3j9.js → collapse-CrfvGo_T.js}

@@ -1,7 +1,7 @@
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writablesForProps, idWithDefault, stateStores } from "./utils/stores.js";
-import { p as createAttributesDirective, n as mergeDirectives } from "./dom-Bcg9ORcA.js";
-import { g as typeFunction, e as typeString, c as typeBoolean } from "./writables-e0tyaQpe.js";
+import { p as createAttributesDirective, n as mergeDirectives } from "./dom-DD1hAVZy.js";
+import { h as typeFunction, e as typeString, c as typeBoolean } from "./writables-Is1bF1Vt.js";
 import { computed } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
 import { createWidgetFactory } from "./utils/widget.js";

package/{collapse-gLiT080Y.cjs → collapse-Da_27YUU.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_directive = require("./dom-C2gi9OCP.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
+const utils_directive = require("./dom-Cm9_uROp.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_func = require("./utils/func.cjs");
 const utils_widget = require("./utils/widget.cjs");

package/{common-D3QcdJ6S.cjs → common-B5jS-Ih_.cjs}

@@ -2,7 +2,7 @@
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,

package/{common-DK0ADNTX.js → common-CCxNtFNM.js}

@@ -1,7 +1,7 @@
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
-import { e as typeString, c as typeBoolean, g as typeFunction } from "./writables-e0tyaQpe.js";
+import { e as typeString, c as typeBoolean, h as typeFunction } from "./writables-Is1bF1Vt.js";
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-DRIm0xHf.cjs");
+const accordion = require("../../accordion-nxveC0GZ.cjs");
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.factoryCreateAccordion = accordion.factoryCreateAccordion;

package/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { a, c, f, g } from "../../accordion-DqnKGmbS.js";
+import { a, c, f, g } from "../../accordion-47EpOD36.js";
 export {
   a as createAccordion,
   c as createAccordionItem,

package/components/alert/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const alert = require("../../alert-B-jQDQcB.cjs");
+const alert = require("../../alert-AhaliJ17.cjs");
 exports.createAlert = alert.createAlert;
 exports.getAlertDefaultConfig = alert.getAlertDefaultConfig;

package/components/alert/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../alert-gGz2CDS9.js";
+import { c, g } from "../../alert-anMaigvi.js";
 export {
   c as createAlert,
   g as getAlertDefaultConfig

package/components/carousel/index.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils_stores = require("../../utils/stores.cjs");
-const utils_directive = require("../../dom-C2gi9OCP.cjs");
+const utils_directive = require("../../dom-Cm9_uROp.cjs");
 const EmblaCarousel = require("embla-carousel");
 const tansu = require("@amadeus-it-group/tansu");
-const utils_writables = require("../../writables-DcGT98a7.cjs");
+const utils_writables = require("../../writables-Dt68gADJ.cjs");
 const services_navManager = require("../../services/navManager.cjs");
 const utils_widget = require("../../utils/widget.cjs");
 const defaultConfig = {

package/components/carousel/index.js

@@ -1,8 +1,8 @@
 import { writablesForProps, stateStores, true$ } from "../../utils/stores.js";
-import { a as bindDirective, b as browserDirective, p as createAttributesDirective, n as mergeDirectives } from "../../dom-Bcg9ORcA.js";
+import { a as bindDirective, b as browserDirective, p as createAttributesDirective, n as mergeDirectives } from "../../dom-DD1hAVZy.js";
 import EmblaCarousel from "embla-carousel";
 import { writable, computed, asReadable, readable } from "@amadeus-it-group/tansu";
-import { g as typeFunction, e as typeString, c as typeBoolean, a as typeNumber, j as createTypeEnum, f as typeStringOrNull, i as typeArray } from "../../writables-e0tyaQpe.js";
+import { h as typeFunction, e as typeString, c as typeBoolean, a as typeNumber, k as createTypeEnum, f as typeStringOrNull, j as typeArray } from "../../writables-Is1bF1Vt.js";
 import { createNavManager } from "../../services/navManager.js";
 import { createWidgetFactory } from "../../utils/widget.js";
 const defaultConfig = {

package/components/collapse/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const collapse = require("../../collapse-gLiT080Y.cjs");
+const collapse = require("../../collapse-Da_27YUU.cjs");
 exports.createCollapse = collapse.createCollapse;
 exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;

package/components/collapse/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../collapse-BV4kD3j9.js";
+import { c, g } from "../../collapse-CrfvGo_T.js";
 export {
   c as createCollapse,
   g as getCollapseDefaultConfig

package/components/drawer/drawer.d.ts

@@ -42,6 +42,13 @@ interface DrawerCommonPropsAndState extends WidgetsCommonPropsAndState {
      * @defaultValue `false`
      */
     resizable: boolean;
+    /**
+     * Size of the drawer in pixel once the user start interacting.
+     * It corresponds to the height or the width depending on the drawer orientation
+     *
+     * @defaultValue `null`
+     */
+    size: number | null;
 }
 /**
  * Interface representing the properties for the Drawer component.
@@ -92,18 +99,6 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      * @defaultValue `''`
      */
     ariaDescribedBy: string;
-    /**
-     * The width of the drawer in pixels.
-     *
-     * @defaultValue `200`
-     */
-    width: number;
-    /**
-     * The height of the drawer in pixels.
-     *
-     * @defaultValue `200`
-     */
-    height: number;
     /**
      * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
      *
@@ -135,38 +130,54 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      */
     onShown: () => void;
     /**
-     * An event emitted when the width is changed.
+     * An event emitted when the drawer size changes (width or height depending on the orientation).
      *
-     * Event payload is equal to the newly selected width.
+     * Event payload is equal to the newly selected width or height.
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onWidthChange: (width: number) => void;
+    onSizeChange: (size: number | null) => void;
     /**
-     * An event emitted when the height is changed.
+     * Event to be triggered when the visible property changes.
      *
-     * Event payload is equal to the newly selected height.
+     * @param visible - new value of the visible propery
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onHeightChange: (width: number) => void;
+    onVisibleChange: (visible: boolean) => void;
     /**
-     * Event to be triggered when the visible property changes.
+     * Event to be triggered when the minimized state changes.
      *
-     * @param visible - new value of the visible propery
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onMinimizedChange: (isMinimized: boolean) => void;
+    /**
+     * Event to be triggered when the maximized state changes.
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onVisibleChange: (visible: boolean) => void;
+    onMaximizedChange: (isMaximized: boolean) => void;
+    /**
+     * Event to be triggered when the user starts or stops resizing the drawer.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onResizingChange: (isResizing: boolean) => void;
 }
 /**
  * Represents the state of a Drawer component.
@@ -219,10 +230,6 @@ export interface DrawerDirectives {
      * Directive to put on the splitter DOM element.
      */
     splitterDirective: Directive;
-    /**
-     * Directive to put on the container DOM element in order for the drawer to size correctly.
-     */
-    containerDirective: Directive;
 }
 /**
  * Represents a Drawer widget component.

package/components/drawer/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const drawer = require("../../drawer-DP7UPojk.cjs");
+const drawer = require("../../drawer-DOi0TqZC.cjs");
 exports.createDrawer = drawer.createDrawer;
 exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;

package/components/drawer/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../drawer-D5SO73ew.js";
+import { c, g } from "../../drawer-Caz4Uypu.js";
 export {
   c as createDrawer,
   g as getDrawerDefaultConfig

package/components/modal/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../../modal-DiXZXYjR.cjs");
+const modal = require("../../modal-B_3Uxplo.cjs");
 exports.createModal = modal.createModal;
 exports.getModalDefaultConfig = modal.getModalDefaultConfig;
 exports.modalCloseButtonClick = modal.modalCloseButtonClick;

package/components/modal/index.js

@@ -1,4 +1,4 @@
-import { c, g, a, b, m } from "../../modal-CAvQW-vo.js";
+import { c, g, a, b, m } from "../../modal-cKd3qUn1.js";
 export {
   c as createModal,
   g as getModalDefaultConfig,

package/components/pagination/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const pagination = require("../../pagination-DvZ2rLsz.cjs");
+const pagination = require("../../pagination-2Vor6JPZ.cjs");
 exports.createPagination = pagination.createPagination;
 exports.getPaginationDefaultConfig = pagination.getPaginationDefaultConfig;

package/components/pagination/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../pagination-BKbMROV6.js";
+import { c, g } from "../../pagination-DlOyP_2C.js";
 export {
   c as createPagination,
   g as getPaginationDefaultConfig

package/components/progressbar/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const progressbar = require("../../progressbar-i9xfAxb7.cjs");
+const progressbar = require("../../progressbar-DyBRINco.cjs");
 exports.createProgressbar = progressbar.createProgressbar;
 exports.getProgressbarDefaultConfig = progressbar.getProgressbarDefaultConfig;

package/components/progressbar/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../progressbar-D8zIcm9n.js";
+import { c, g } from "../../progressbar-B5g76eMV.js";
 export {
   c as createProgressbar,
   g as getProgressbarDefaultConfig

package/components/rating/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rating = require("../../rating-DmG4oUkr.cjs");
+const rating = require("../../rating-C0y1j4SC.cjs");
 exports.createRating = rating.createRating;
 exports.getRatingDefaultConfig = rating.getRatingDefaultConfig;

package/components/rating/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../rating-DEXTGWCU.js";
+import { c, g } from "../../rating-C7C4-p4B.js";
 export {
   c as createRating,
   g as getRatingDefaultConfig

package/components/select/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const select = require("../../select-MFjAnIt7.cjs");
+const select = require("../../select-Dhsb9msC.cjs");
 exports.createSelect = select.createSelect;
 exports.getSelectDefaultConfig = select.getSelectDefaultConfig;

package/components/select/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../select-Bw68Xdu5.js";
+import { c, g } from "../../select-nnl00UWY.js";
 export {
   c as createSelect,
   g as getSelectDefaultConfig

package/components/slider/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-Dl4Trh32.cjs");
+const slider = require("../../slider-DTO58syz.cjs");
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-Cx50Eghd.js";
+import { c, g } from "../../slider-B4WrdTeE.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/toast/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toaster = require("../../toaster-UDglac7x.cjs");
+const toaster = require("../../toaster-CT148JSJ.cjs");
 exports.Toaster = toaster.Toaster;
 exports.createToast = toaster.createToast;
 exports.defaultToasterProps = toaster.defaultToasterProps;

package/components/toast/index.js

@@ -1,4 +1,4 @@
-import { T, c, d, g } from "../../toaster-_p1GTtHI.js";
+import { T, c, d, g } from "../../toaster-CRPErgI2.js";
 export {
   T as Toaster,
   c as createToast,

package/components/tree/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tree = require("../../tree-rGHtmCnS.cjs");
+const tree = require("../../tree-C4l2Wqny.cjs");
 exports.createTree = tree.createTree;
 exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;

package/components/tree/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../tree-DV0tfPlZ.js";
+import { c, g } from "../../tree-CHpFqJPx.js";
 export {
   c as createTree,
   g as getTreeDefaultConfig

package/{dom-C2gi9OCP.cjs → dom-Cm9_uROp.cjs}

@@ -1,12 +1,74 @@
 "use strict";
 const esmEnv = require("esm-env");
-const utils_func = require("./utils/func.cjs");
 const tansu = require("@amadeus-it-group/tansu");
-const ssrHTMLElementAttributesAndStyle = Symbol("attributesAndStyle");
+const utils_func = require("./utils/func.cjs");
+const importantSuffixRegExp = /\s*!important$/;
+const withoutImportant = (value) => value?.replace(importantSuffixRegExp, "") ?? "";
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+const getStyleKeyFromDirectProp = (str) => {
+  if (typeof str !== "string" || str.startsWith("--")) {
+    return void 0;
+  }
+  return toKebabCase(str);
+};
+const getStyleKeyFromMethods = (str) => {
+  if (!str.startsWith("--") && str !== toKebabCase(str)) {
+    return void 0;
+  }
+  return str;
+};
+const ssrHTMLElementStyle = /* @__PURE__ */ Symbol("style");
+class SSRStyle {
+  // all styles in kebab-case, including custom properties:
+  [ssrHTMLElementStyle] = {};
+  constructor() {
+    return new Proxy(this, {
+      get: (target, prop) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          return withoutImportant(target[ssrHTMLElementStyle][styleKey]);
+        } else {
+          return target[prop];
+        }
+      },
+      set: (target, prop, value) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          target.setProperty(styleKey, value);
+        } else {
+          target[prop] = value;
+        }
+        return true;
+      }
+    });
+  }
+  setProperty(property, value, priority) {
+    if (!value) {
+      this.removeProperty(property);
+      return;
+    }
+    const key = getStyleKeyFromMethods(property);
+    if (!key || priority !== "important" && priority !== "" && priority != null || importantSuffixRegExp.test(value)) {
+      return;
+    }
+    this[ssrHTMLElementStyle][key] = value + (priority ? " !important" : "");
+  }
+  removeProperty(property) {
+    const key = getStyleKeyFromMethods(property);
+    if (!key) {
+      return "";
+    }
+    const style = this[ssrHTMLElementStyle];
+    const value = style[key];
+    delete style[key];
+    return withoutImportant(value);
+  }
+}
+const ssrHTMLElementAttributesAndStyle = /* @__PURE__ */ Symbol("attributesAndStyle");
 const spaceRegExp = /\s+/;
 const ssrHTMLElement = () => {
   const attributes = {};
-  const style = {};
+  const style = new SSRStyle();
   let classNames = /* @__PURE__ */ new Set();
   const toggleClass = (className, force = !classNames.has(className)) => {
     if (force) {
@@ -41,10 +103,12 @@ const ssrHTMLElement = () => {
       }
     },
     [ssrHTMLElementAttributesAndStyle]() {
-      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style } };
+      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style[ssrHTMLElementStyle] } };
     }
   };
 };
+const cssEscapeStyleName = (styleName) => styleName.replace(/([^\w-])/gi, "\\$1");
+const cssTextFromObject = (style) => Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${cssEscapeStyleName(name)}: ${value};`).join("");
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -303,7 +367,7 @@ function directiveAttributes(...directives) {
   if (classNames.length) {
     attributes["class"] = classNames.join(" ");
   }
-  const stringStyle = Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${name}: ${value};`).join("");
+  const stringStyle = cssTextFromObject(style);
   if (stringStyle.length) {
     attributes["style"] = stringStyle;
   }
@@ -388,10 +452,16 @@ function bindAttribute(node, attributeName, value$) {
   const isClass = attributeName === "class";
   return isClass ? classNamesSubscribe(node, value$) : attributeSubscribe(node, attributeName, value$);
 }
+const isCustomProperty = (styleName) => styleName.startsWith("--");
 function bindStyle(node, styleName, value$) {
   return value$.subscribe((value) => {
     const style = node.style;
-    style[styleName] = "" + (notEmpty(value) ? value : "");
+    value = "" + (notEmpty(value) ? value : "");
+    if (isCustomProperty(styleName)) {
+      style.setProperty(styleName, value);
+    } else {
+      style[styleName] = value;
+    }
   });
 }
 function bindClassName(node, className, value$) {

package/{dom-Bcg9ORcA.js → dom-DD1hAVZy.js}

@@ -1,11 +1,73 @@
 import { BROWSER } from "esm-env";
-import { noop } from "./utils/func.js";
 import { readable, batch, asReadable, writable, computed } from "@amadeus-it-group/tansu";
-const ssrHTMLElementAttributesAndStyle = Symbol("attributesAndStyle");
+import { noop } from "./utils/func.js";
+const importantSuffixRegExp = /\s*!important$/;
+const withoutImportant = (value) => value?.replace(importantSuffixRegExp, "") ?? "";
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+const getStyleKeyFromDirectProp = (str) => {
+  if (typeof str !== "string" || str.startsWith("--")) {
+    return void 0;
+  }
+  return toKebabCase(str);
+};
+const getStyleKeyFromMethods = (str) => {
+  if (!str.startsWith("--") && str !== toKebabCase(str)) {
+    return void 0;
+  }
+  return str;
+};
+const ssrHTMLElementStyle = /* @__PURE__ */ Symbol("style");
+class SSRStyle {
+  // all styles in kebab-case, including custom properties:
+  [ssrHTMLElementStyle] = {};
+  constructor() {
+    return new Proxy(this, {
+      get: (target, prop) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          return withoutImportant(target[ssrHTMLElementStyle][styleKey]);
+        } else {
+          return target[prop];
+        }
+      },
+      set: (target, prop, value) => {
+        const styleKey = prop in target ? void 0 : getStyleKeyFromDirectProp(prop);
+        if (styleKey) {
+          target.setProperty(styleKey, value);
+        } else {
+          target[prop] = value;
+        }
+        return true;
+      }
+    });
+  }
+  setProperty(property, value, priority) {
+    if (!value) {
+      this.removeProperty(property);
+      return;
+    }
+    const key = getStyleKeyFromMethods(property);
+    if (!key || priority !== "important" && priority !== "" && priority != null || importantSuffixRegExp.test(value)) {
+      return;
+    }
+    this[ssrHTMLElementStyle][key] = value + (priority ? " !important" : "");
+  }
+  removeProperty(property) {
+    const key = getStyleKeyFromMethods(property);
+    if (!key) {
+      return "";
+    }
+    const style = this[ssrHTMLElementStyle];
+    const value = style[key];
+    delete style[key];
+    return withoutImportant(value);
+  }
+}
+const ssrHTMLElementAttributesAndStyle = /* @__PURE__ */ Symbol("attributesAndStyle");
 const spaceRegExp = /\s+/;
 const ssrHTMLElement = () => {
   const attributes = {};
-  const style = {};
+  const style = new SSRStyle();
   let classNames = /* @__PURE__ */ new Set();
   const toggleClass = (className, force = !classNames.has(className)) => {
     if (force) {
@@ -40,10 +102,12 @@ const ssrHTMLElement = () => {
       }
     },
     [ssrHTMLElementAttributesAndStyle]() {
-      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style } };
+      return { attributes: { ...attributes }, classNames: [...classNames], style: { ...style[ssrHTMLElementStyle] } };
     }
   };
 };
+const cssEscapeStyleName = (styleName) => styleName.replace(/([^\w-])/gi, "\\$1");
+const cssTextFromObject = (style) => Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${cssEscapeStyleName(name)}: ${value};`).join("");
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -302,7 +366,7 @@ function directiveAttributes(...directives) {
   if (classNames.length) {
     attributes["class"] = classNames.join(" ");
   }
-  const stringStyle = Object.entries(style).filter(([, value]) => !!value).map(([name, value]) => `${name}: ${value};`).join("");
+  const stringStyle = cssTextFromObject(style);
   if (stringStyle.length) {
     attributes["style"] = stringStyle;
   }
@@ -387,10 +451,16 @@ function bindAttribute(node, attributeName, value$) {
   const isClass = attributeName === "class";
   return isClass ? classNamesSubscribe(node, value$) : attributeSubscribe(node, attributeName, value$);
 }
+const isCustomProperty = (styleName) => styleName.startsWith("--");
 function bindStyle(node, styleName, value$) {
   return value$.subscribe((value) => {
     const style = node.style;
-    style[styleName] = "" + (notEmpty(value) ? value : "");
+    value = "" + (notEmpty(value) ? value : "");
+    if (isCustomProperty(styleName)) {
+      style.setProperty(styleName, value);
+    } else {
+      style[styleName] = value;
+    }
   });
 }
 function bindClassName(node, className, value$) {