@bunnix/components 0.10.2 → 0.11.0

package/src/core/layout.mjs

@@ -102,13 +102,12 @@ const GridCore = (props, ...children) => {
   let layout = props.layout ?? "fixed";
   let columns = props.columns ?? [];
   let gap = props.gridGap;
+  let style = { ...(props.style ?? {}) };
 
   delete props.layout;
   delete props.columns;
   delete props.gridGap;
 
-  let style = {};
-
   if (gap !== undefined) {
     style["--grid-gap"] = (typeof gap === "number") ? `${gap}px` : gap;
   }

package/src/core/media.css

@@ -1,8 +1,43 @@
+@font-face {
+  font-family: "Framework7 Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../font-face/Framework7Icons-Regular.woff2") format("woff2");
+}
+
 /* Icon Base Styles */
 .icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 22px;
   height: 22px;
+  color: currentColor;
+  font-size: 22px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.f7-icons {
+  font-family: "Framework7 Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  text-align: center;
 }
 
 /* Spinner Base Styles */

package/src/core/media.mjs

@@ -5,14 +5,14 @@
  *
  * Components:
  * - Media: Generic media component that renders images or inline SVG
- * - Icon: Icon component using the icon registry
+ * - Icon: Icon component using the Framework7 icon font
  * - Spinner: Animated loading spinner with customizable size
  * - Avatar: User avatar with support for images or letter initials
  *
  * Features:
  * - Automatic style extraction (width, height, size, etc.)
  * - Flexible props normalization (supports both props object and direct children)
- * - SVG support via innerHTML for icons and spinners
+ * - Font-based icon rendering plus inline SVG support for spinners
  * - Avatar size and appearance customization
  */
 import Bunnix, { Show, useState } from "@bunnix/core";
@@ -21,9 +21,8 @@ import {
   withExtractedStyles,
   isStateLike,
 } from "./utils.mjs";
-import { iconRegistry } from "../utils/iconRegistry.generated.mjs";
 
-const { span, img } = Bunnix;
+const { span, img, i } = Bunnix;
 
 const MediaCore = (props, ...children) => {
   if ("svg" in props) {
@@ -38,15 +37,16 @@ const MediaCore = (props, ...children) => {
 const IconCore = (props, ...children) => {
   const { name, ...restProps } = props;
   if (!name) return null;
+  const style = { ...(restProps.style || {}) };
+  if (!style.fontSize && (style.width || style.height)) {
+    style.fontSize = style.width || style.height;
+  }
 
-  const svgContent = iconRegistry[name] || "";
-  if (!svgContent) return null;
-
-  return span({
+  return i({
     ...restProps,
-    innerHTML: svgContent,
-    class: `icon ${restProps.class || ""}`,
-  });
+    style,
+    class: `icon f7-icons ${restProps.class || ""}`.trim(),
+  }, name);
 };
 
 const spinnerSvg = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
@@ -113,10 +113,10 @@ export const Media = withNormalizedArgs((props, ...children) =>
 );
 
 /**
- * Icon component using the icon registry.
+ * Icon component using the Framework7 icon font ligatures.
  * 
  * @param {Object} props - Component props
- * @param {string} props.name - Icon name from the icon registry
+ * @param {string} props.name - Official Framework7 icon name
  * @param {number} [props.size=22] - Icon size in pixels
  * @param {string} [props.color] - Icon color (CSS value)
  * @param {string} [props.class] - Additional CSS classes

package/src/core/menu.css

@@ -5,40 +5,21 @@
   display: inline-block;
 }
 
+/* Popover reset + positioning
+ * Uses HTML Popover API — element lives in the CSS Top Layer,
+ * fully escaping any overflow: hidden ancestor.
+ * Browser UA stylesheet sets inset: 0 and margin: auto on [popover],
+ * so both must be reset for our fixed coordinates to take effect. */
 .menu-items {
-  position: absolute;
-  background-color: var(--color-bg-primary);
+  position: fixed;
+  inset: unset;
+  margin: 0;
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
   min-width: 160px;
-  z-index: 1000;
-  overflow: hidden;
   padding: 4px;
-}
-
-/* Anchor positions */
-.menu-items--bottomLeft {
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-}
-
-.menu-items--bottomRight {
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-}
-
-.menu-items--topLeft {
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-}
-
-.menu-items--topRight {
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 4px;
+  overflow: hidden;
 }
 
 .menu-divider {

package/src/core/menu.mjs

@@ -8,103 +8,187 @@
  *
  * Features:
  * - Automatic open/close state management
- * - Click outside to close
+ * - Popover API for overflow-safe rendering (CSS Top Layer)
+ * - Browser-native dismiss (click outside, Escape key, page scroll)
  * - Action items with optional icons
  * - Divider support for grouping items
  * - Custom trigger support
  */
-import Bunnix, { useState, useEffect, useRef, Show } from "@bunnix/core";
-import { withNormalizedArgs, withExtractedStyles } from "./utils.mjs";
+import Bunnix, { useState, useEffect, useRef, ForEach, Compute } from "@bunnix/core";
+import { withNormalizedArgs, withExtractedStyles, resolveCollectionState } from "./utils.mjs";
 import { Column, Row } from "./layout.mjs";
 import { Button } from "./buttons.mjs";
 import { Icon } from "./media.mjs";
+import { Text } from "./typography.mjs";
 import "./menu.css";
 
-const { div, button } = Bunnix;
+const { div } = Bunnix;
 
 const MenuCore = (props, ...children) => {
   const isOpen = useState(false);
-  const dropdownRef = useRef(null);
-  
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+
   // Resolve items (state or raw value)
-  let items = props.items?.get && props.items?.set
-    ? props.items.get()
-    : props.items ?? [];
-  
+  const itemsValue = resolveCollectionState(props.items, []);
+  const keyedItemsValue = Compute(itemsValue, (resolvedItems) =>
+    (resolvedItems ?? []).map((item, index) =>
+      item?.divider && (item.key === undefined || item.key === null)
+        ? { ...item, key: `divider-${index}` }
+        : item,
+    ),
+  );
+
   // Resolve trigger
   let trigger = props.trigger || "Menu";
-  
-  // Resolve anchor position
-  let anchor = props.anchor || "bottomLeft";
-  
+
+  // Resolve anchor position (support both kebab-case and camelCase for backward compatibility)
+  let anchorInput = props.anchor || "bottom-left";
+  const anchorMap = {
+    "bottom-left": "bottomLeft",
+    "bottom-right": "bottomRight",
+    "top-left": "topLeft",
+    "top-right": "topRight",
+    "bottomLeft": "bottomLeft",
+    "bottomRight": "bottomRight",
+    "topLeft": "topLeft",
+    "topRight": "topRight",
+  };
+  let anchor = anchorMap[anchorInput] || "bottomLeft";
+
   delete props.items;
   delete props.trigger;
   delete props.anchor;
-  
-  // Click outside handler
+
+  // Sync isOpen state from popover toggle events & close on scroll
+  // Handles browser auto-dismiss (click outside, Escape key) + scroll-away behavior
+  // Uses queueMicrotask to defer listener attachment until after popoverRef is assigned by bunnixToDOM
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (isOpen.get() && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        isOpen.set(false);
-      }
-    };
-    
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, isOpen);
-  
+    queueMicrotask(() => {
+      const el = popoverRef.current;
+      if (!el) return;
+
+      // Close menu when page scrolls (capture phase for early detection)
+      const handleScroll = () => {
+        el.hidePopover();
+      };
+
+      // Sync state when popover opens/closes, manage scroll listener lifecycle
+      const handleToggle = (e) => {
+        const open = e.newState === "open";
+        isOpen.set(open);
+        if (open) {
+          // Attach scroll listener when menu opens
+          window.addEventListener("scroll", handleScroll, true);
+        } else {
+          // Remove scroll listener when menu closes (click outside, Escape, item click, etc.)
+          window.removeEventListener("scroll", handleScroll, true);
+        }
+      };
+
+      el.addEventListener("toggle", handleToggle);
+      // Toggle listener lives with the element and is GC'd when element is removed
+      // Scroll listener is self-managed: attached on open, removed on close
+    });
+  });
+
+  const computeMenuPos = (rect, anchor) => {
+    const GAP = 4;
+    // clientWidth/clientHeight exclude scrollbar width — matches getBoundingClientRect() coordinate space.
+    // window.innerWidth/innerHeight include scrollbar and would produce a consistent gap on the right/bottom.
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    switch (anchor) {
+      case "bottomRight":
+        return {
+          top: `${rect.bottom + GAP}px`,
+          left: "auto",
+          bottom: "auto",
+          right: `${vw - rect.right}px`,
+        };
+      case "topLeft":
+        return {
+          top: "auto",
+          left: `${rect.left}px`,
+          bottom: `${vh - rect.top + GAP}px`,
+          right: "auto",
+        };
+      case "topRight":
+        return {
+          top: "auto",
+          left: "auto",
+          bottom: `${vh - rect.top + GAP}px`,
+          right: `${vw - rect.right}px`,
+        };
+      case "bottomLeft":
+      default:
+        return {
+          top: `${rect.bottom + GAP}px`,
+          left: `${rect.left}px`,
+          bottom: "auto",
+          right: "auto",
+        };
+    }
+  };
+
   const toggleDropdown = () => {
-    isOpen.set(!isOpen.get());
+    if (!isOpen.get()) {
+      // Measure the trigger element (first child), not the wrapper, for accurate right-edge alignment
+      const triggerEl = triggerRef.current.firstElementChild ?? triggerRef.current;
+      const rect = triggerEl.getBoundingClientRect();
+      const pos = computeMenuPos(rect, anchor);
+      if (popoverRef.current) {
+        Object.assign(popoverRef.current.style, pos);
+        popoverRef.current.showPopover();
+      }
+    } else {
+      popoverRef.current?.hidePopover();
+    }
   };
-  
+
   const handleItemClick = (item) => {
     if (item.divider) return;
-    
-    isOpen.set(false);
-    
+    popoverRef.current?.hidePopover();
     if (item.action) {
       item.action();
     }
   };
-  
+
   return div(
-    { ...props, class: `menu ${props.class || ""}`, ref: dropdownRef },
+    { ...props, class: `menu ${props.class || ""}`, ref: triggerRef },
     // Trigger
-    typeof trigger === "function" ? trigger({ isOpen: isOpen.get(), toggle: toggleDropdown }) : 
-      Button(
-        {
-          variant: "secondary",
-          click: toggleDropdown,
-        },
-        trigger
-      ),
-    // Menu
-    Show(isOpen, (open) => 
-      open && div(
-        { class: `menu-items menu-items--${anchor}` },
-        Column(
-          { gap: 0 },
-          ...items.map((item) => {
-            if (item.divider) {
-              return div({ class: "menu-divider" });
-            }
-            
-            return Button(
-              {
-                variant: "tertiary",
-                click: () => handleItemClick(item),
-                padding: false,
-              },
-              Row(
-                { fillWidth: true, alignItems: "center", gap: "small" },
-                item.icon && Icon({ name: item.icon, size: 16 }),
-                item.text || item.key,
-              ),
-            );
-          })
-        )
+    typeof trigger === "function"
+      ? trigger({ isOpen: isOpen.get(), toggle: toggleDropdown })
+      : Button(
+          {
+            variant: "secondary",
+            click: toggleDropdown,
+          },
+          trigger
+        ),
+    // Popover dropdown — always in DOM, shown/hidden via Popover API (CSS Top Layer)
+    div(
+      { class: "menu-items", popover: "auto", ref: popoverRef },
+      Column(
+        { gap: 0 },
+        ForEach(keyedItemsValue, "key", (item) => {
+          if (item.divider) {
+            return div({ class: "menu-divider" });
+          }
+
+          return Button(
+            {
+              variant: "tertiary",
+              click: () => handleItemClick(item),
+              padding: false,
+            },
+            Row(
+              { fillWidth: true, alignItems: "center", gap: "small" },
+              item.icon && Icon({ name: item.icon, size: 16 }),
+              Text({ weight: "heavy" }, item.text || item.key),
+            ),
+          );
+        })
       )
     ),
   );
@@ -113,15 +197,20 @@ const MenuCore = (props, ...children) => {
 /**
  * Menu component with trigger and action items.
  *
+ * Uses the HTML Popover API (`popover="auto"`) to render the dropdown in
+ * the CSS Top Layer — fully escaping any `overflow: hidden` ancestor.
+ * Browser provides native dismiss on click-outside and Escape key.
+ * Menu also closes automatically when the page scrolls.
+ *
  * @param {Object} props - Component props
  * @param {Array<Object>} props.items - Menu items array
  * @param {string} props.items[].key - Unique identifier for the item
  * @param {string} props.items[].text - Display text for the item
- * @param {string} [props.items[].icon] - Optional icon name from registry
+ * @param {string} [props.items[].icon] - Optional official Framework7 icon name
  * @param {Function} [props.items[].action] - Optional action to run on click
  * @param {boolean} [props.items[].divider] - If true, renders a divider
  * @param {*} [props.trigger] - Trigger element or function that receives {isOpen, toggle}
- * @param {string} [props.anchor="bottomLeft"] - Menu anchor position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight"
+ * @param {string} [props.anchor="bottom-left"] - Menu anchor position: "bottom-left" | "bottom-right" | "top-left" | "top-right" (or camelCase variants for backward compatibility)
  * @param {string} [props.class] - Additional CSS classes
  * @param {...*} children - Children elements
  * @returns {*} Menu component

package/src/core/outline.mjs

@@ -0,0 +1,100 @@
+/**
+ * Outline Component (Disclosure Widget)
+ *
+ * A collapsible section component with a clickable anchor header and expandable details region.
+ *
+ * Components:
+ * - Outline: Disclosure widget with togglable details
+ *
+ * Features:
+ * - Always-visible anchor header (any Bunnix node)
+ * - Collapsible details region (any Bunnix node)
+ * - Automatic chevron icon (up/down)
+ * - Full layout prop support (gap, padding, margin, width, etc.)
+ */
+import Bunnix, { useState, Show } from "@bunnix/core";
+import { withNormalizedArgs, withExtractedStyles } from "./utils.mjs";
+import { Column, Row } from "./layout.mjs";
+import { Icon } from "./media.mjs";
+
+const OutlineCore = (props) => {
+  let { anchor, details, showChevron = true } = props;
+  delete props.anchor;
+  delete props.details;
+  delete props.showChevron;
+
+  // Bindable state: accept external StateLike<boolean> or fallback to internal useState
+  let showingDetails =
+    props.open?.get && props.open?.set
+      ? props.open
+      : useState(props.open ?? false);
+  delete props.open;
+
+  const handleToggleDetails = () => {
+    showingDetails.set(!showingDetails.get());
+  };
+
+  return Column(
+    props,
+    Row(
+      { cursor: "pointer", click: handleToggleDetails, fillWidth: true },
+      anchor,
+      // Only render chevron if showChevron is true
+      showChevron && Show(showingDetails.map((v) => !v), () =>
+        Icon({ name: "chevron_down", size: 16, flexShrink: 0 }),
+      ),
+      showChevron && Show(showingDetails, () =>
+        Icon({ name: "chevron_up", size: 16, flexShrink: 0 }),
+      ),
+    ),
+    Show(showingDetails, () => details),
+  );
+};
+
+/**
+ * Outline disclosure component with a togglable details region.
+ *
+ * Renders a clickable anchor row that expands/collapses a details section.
+ * A chevron icon in the anchor row reflects the current open/closed state.
+ *
+ * @param {Object} props - Component props (also accepts all LayoutProps: gap, padding, margin, width, etc.)
+ * @param {*} props.anchor - Always-visible trigger content (any Bunnix node)
+ * @param {*} props.details - Collapsible content shown when expanded (any Bunnix node)
+ * @param {boolean} [props.showChevron=true] - Whether to render the chevron toggle icon
+ * @param {boolean|StateLike<boolean>} [props.open] - Controlled open/closed state; pass a Bunnix State for two-way binding
+ * @returns {*} Outline component
+ *
+ * @example
+ * // Basic usage
+ * Outline({
+ *   anchor: Row({ alignItems: "center", gap: "small" },
+ *     Icon({ name: "doc_text", size: 16 }),
+ *     Text({ weight: "heavy" }, "Section Title"),
+ *   ),
+ *   details: Column({ gap: "small", paddingTop: "small" },
+ *     Text("Expandable content goes here."),
+ *   ),
+ * });
+ *
+ * @example
+ * // With external state control
+ * const outlineState = useState(false);
+ * Outline({
+ *   open: outlineState,
+ *   anchor: Text({ weight: "heavy" }, "Click to expand"),
+ *   details: Text("Controlled from outside"),
+ * });
+ *
+ * @example
+ * // Without chevron
+ * Outline({
+ *   showChevron: false,
+ *   anchor: Text({ weight: "heavy" }, "Custom anchor"),
+ *   details: Text("No automatic chevron"),
+ * });
+ */
+export const Outline = withNormalizedArgs((props, ...children) =>
+  withExtractedStyles((finalProps, ...children) =>
+    OutlineCore(finalProps, ...children),
+  )(props, ...children),
+);