feat: update useSnapPoints to improve drawer snapping behavior and add new features

2026-08-03 21:11:47 +07:00
parent f444feb7b3
commit 85313c6046
37 changed files with 3216 additions and 461 deletions
@@ -8,7 +8,35 @@
 * The selectors here mirror the `data-drawer-*` attributes set in the component
 * templates and {@link ./controls} — keep them in sync.
 */
-export const DRAWER_STYLE_ID = 'robonen-drawer';
+export const DRAWER_STYLE_ID = 'drawer';
+
+let cssPropertiesRegistered = false;
+
+/**
+ * Registers the drawer's animated custom properties with `inherits: false`, so
+ * a per-frame write of `--snap-point-height` on the content invalidates only
+ * that element instead of cascading a var recompute over its whole subtree.
+ * `--initial-transform` is deliberately NOT registered: consumers may set it on
+ * an ancestor and rely on inheritance. No-op where the API is missing.
+ */
+export function registerDrawerCssProperties(): void {
+  if (cssPropertiesRegistered || typeof CSS === 'undefined' || !CSS.registerProperty)
+    return;
+
+  cssPropertiesRegistered = true;
+
+  try {
+    CSS.registerProperty({
+      name: '--snap-point-height',
+      syntax: '<length>',
+      inherits: false,
+      initialValue: '0px',
+    });
+  }
+  catch {
+    // Older engines without @property support simply keep var inheritance.
+  }
+}

 export const DRAWER_STYLES = `
 [data-drawer] {