flet-box 1.0.6 → 1.0.8

package/src/index.d.ts

@@ -30,10 +30,48 @@ declare module 'flet-box' {
     _cleanup(): void;
   }
 
+  // =========================================================================
+  // Posicionamiento
+  // =========================================================================
+  /**
+   * Positional props accepted by every widget.
+   *
+   * `position: 'stack'` takes the widget out of normal flow and places it
+   * against its nearest positioned ancestor; the `center*` / `full*` shorthands
+   * only take effect in that mode. Numeric offsets are framework units (pixels
+   * on the 16px base, emitted as rem).
+   *
+   * A few widgets give `position` their own meaning — the toast/badge/tooltip
+   * anchor — and therefore omit this declaration, as does `Maps` for `center`.
+   */
+  export interface StackPositionProps {
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | 'stack';
+    /** Alias of `position`. */
+    pos?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | 'stack';
+    top?: Size;
+    right?: Size;
+    bottom?: Size;
+    left?: Size;
+    inset?: Size;
+    /** Logical spelling of `left`. */
+    start?: Size;
+    /** Logical spelling of `right`. */
+    end?: Size;
+    /** Alias of `zIndex`. */
+    z?: number;
+    zIndex?: number;
+    centerX?: boolean;
+    centerY?: boolean;
+    center?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    full?: boolean;
+  }
+
   // =========================================================================
   // Props comunes (heredadas by todos the widgets)
   // =========================================================================
-  export interface CommonProps {
+  export interface CommonProps extends StackPositionProps {
     width?: Size;
     height?: Size;
     // `Size`, not `number`: for a Text this is a font size and for a Button it is
@@ -49,6 +87,12 @@ declare module 'flet-box' {
     borderRadius?: number | string;
     elevation?: number;
     shadow?: string;
+    // Glass and filters. A CSS value string, not an object: `backdropFilter` is
+    // what makes a translucent card frosted rather than merely see-through, and
+    // `maskImage` is what fades a list out at its end.
+    filter?: string;
+    backdropFilter?: string;
+    maskImage?: string;
     opacity?: number;
     visible?: boolean;
     disabled?: boolean;
@@ -242,7 +286,7 @@ declare module 'flet-box' {
 
   export interface StackProps extends CommonProps {
     children?: Widget[];
-    position?: 'relative' | 'absolute';
+    position?: 'relative' | 'absolute' | 'stack';
     alignment?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
   }
   export function Stack(props: StackProps): Widget;
@@ -341,6 +385,8 @@ declare module 'flet-box' {
     height?: Size;
     fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
     circular?: boolean;
+    downloadable?: boolean;
+    downloadFileName?: string;
     onLoad?: (widget: Widget) => void;
     onError?: (widget: Widget) => void;
     onPress?: (widget: Widget) => void;
@@ -355,6 +401,8 @@ declare module 'flet-box' {
     bgColor?: Color;
     textColor?: Color;
     shape?: 'circle' | 'rounded' | 'square';
+    online?: boolean;
+    badgeColor?: Color;
     onPress?: (widget: Widget) => void;
   }
   export function Avatar(props: AvatarProps): Widget & {
@@ -485,7 +533,7 @@ declare module 'flet-box' {
     getElement(): Widget;
   };
 
-  export interface AdMobProps extends CommonProps {
+  export interface AdMobProps extends Omit<CommonProps, 'position'> {
     adId?: string;
     isTesting?: boolean;
     position?: 'top' | 'bottom';
@@ -516,7 +564,7 @@ declare module 'flet-box' {
     getPlugin(): object | null;
   };
 
-  export interface BadgeProps extends CommonProps {
+  export interface BadgeProps extends Omit<CommonProps, 'position'> {
     value: string | number;
     child: Widget;
     bgColor?: Color;
@@ -1278,9 +1326,14 @@ declare module 'flet-box' {
   };
 
   export interface InspectorProps {
+    /** The widget whose call is reconstructed and painted. */
     widget: Widget;
+    /** Starting indentation depth of the printout. */
     indent?: number;
   }
+  /** Paints the reconstructed call of a widget tree. */
+  export function Inspector(props: InspectorProps): Widget;
+  /** Rebuilds the call that made a widget, as a string. */
   export function Inspector(widget: Widget, indent?: number): string;
   export function printWidgetCode(widget: Widget): void;
   export function inspectWidget(widget: Widget): Widget;
@@ -1358,11 +1411,13 @@ declare module 'flet-box' {
     getCurrentIndex(): number;
   };
 
-  export interface TooltipProps extends CommonProps {
+  export interface TooltipProps extends Omit<CommonProps, 'position'> {
     text: string;
     child: Widget;
     position?: 'top' | 'bottom' | 'left' | 'right';
     delay?: number;
+    /** @deprecated Alias of `delay`. */
+    tooltipDelay?: number;
     bgColor?: Color;
     textColor?: Color;
     fontSize?: number;
@@ -1700,6 +1755,132 @@ declare module 'flet-box' {
     getSource(): string;
   };
 
+  // =========================================================================
+  // Maps
+  // =========================================================================
+
+  /** A point on the map: `[lat, lng]`, `{lat, lng}` or `{latitude, longitude}`. */
+  export type LatLng = [number, number] | { lat: number; lng: number } | { latitude: number; longitude: number };
+
+  /** `[[south, west], [north, east]]`, a named box, or the points to enclose. */
+  export type MapBounds = [[number, number], [number, number]] | { south: number; west: number; north: number; east: number } | LatLng[];
+
+  /** A pin. A bare `LatLng` is also accepted wherever a marker is expected. */
+  export interface MapMarker {
+    position: LatLng;
+    label?: string;
+    color?: Color;
+    /** Keeps the pooled pin node across updates; auto-generated when omitted. */
+    id?: string | number;
+    /** Degrees clockwise from north, the bearing a GPS fix reports. Turns the pin around its own tip. */
+    rotation?: number;
+    /** `false` lets a tap fall through to the map: a tracked vehicle must not block picking a point. */
+    clickable?: boolean;
+    data?: any;
+  }
+
+  /** Payload of `onMapClick`: the geographic point under the cursor. */
+  export interface MapClick {
+    lat: number;
+    lng: number;
+    zoom: number;
+  }
+
+  /** Payload of `onMoveEnd`: the view once it stops changing. */
+  export interface MapState {
+    center: { lat: number; lng: number };
+    zoom: number;
+    bounds: { south: number; west: number; north: number; east: number };
+  }
+
+  /**
+   * A stroked path — a route, a track, a boundary. Needs at least two usable
+   * points. A bare `LatLng[]` is also accepted wherever a polyline is expected.
+   */
+  export interface MapPolyline {
+    points: LatLng[];
+    /** Stroke colour. Defaults to `polylineColor`. */
+    color?: Color;
+    /** Stroke width in CSS pixels. Defaults to `4`. */
+    width?: number;
+    opacity?: number;
+    dashed?: boolean;
+    /** Identifies the line to `removePolyline()`; auto-generated when omitted. */
+    id?: string | number;
+  }
+
+  /** Payload of `onUserUpdate`: one fix from the watcher, in degrees and metres. */
+  export interface MapFix {
+    lat: number;
+    lng: number;
+    /** Radius of 68% confidence in metres, or null when the browser hides it. */
+    accuracy: number | null;
+    /** Degrees clockwise from true north, or null when the device reports none. */
+    heading: number | null;
+  }
+
+  export interface MapsProps extends Omit<CommonProps, 'center'> {
+    /** Initial view centre. Defaults to `[20, 0]`. */
+    center?: LatLng;
+    /** Integer zoom level, 0 = the whole world. Defaults to `2`. */
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Positions and/or `{position, label, color, id, data}` records. */
+    markers?: Array<MapMarker | LatLng>;
+    /** Colour of the pins that do not set their own. Defaults to `colors.primary`. */
+    markerColor?: Color;
+    /** Position lists and/or `{points, color, width, opacity, dashed, id}` records. */
+    polylines?: Array<MapPolyline | LatLng[]>;
+    /** Stroke of the lines that do not set their own. Defaults to `colors.primary`. */
+    polylineColor?: Color;
+    /** `{z}/{x}/{y}` tile template. Defaults to OpenStreetMap. */
+    tileUrl?: string;
+    /** Credit line; most providers require one. */
+    attribution?: string;
+    showAttribution?: boolean;
+    showZoomControl?: boolean;
+    /** When false the view only moves through the imperative API. */
+    interactive?: boolean;
+    scrollZoom?: boolean;
+    doubleClickZoom?: boolean;
+    /** Draws the browser position; asks for permission on the first map paint. */
+    showUserLocation?: boolean;
+    /**
+     * Keeps the view centred on the browser position. Implies the dot and asks
+     * the browser for fresh high-accuracy fixes instead of a cached one.
+     */
+    followUser?: boolean;
+    onMapClick?: (point: MapClick, event: PointerEvent) => void;
+    onMarkerClick?: (marker: MapMarker, event: MouseEvent) => void;
+    onMoveEnd?: (state: MapState) => void;
+    /** Fires on each watched fix, including the ones while `followUser` is off. */
+    onUserUpdate?: (fix: MapFix) => void;
+  }
+  export function Maps(props: MapsProps): Widget & {
+    setCenter(position: LatLng, zoom?: number): Widget;
+    getCenter(): { lat: number; lng: number };
+    getZoom(): number;
+    zoomTo(zoom: number): Widget;
+    panBy(dx: number, dy: number): Widget;
+    fitBounds(bounds: MapBounds, padding?: number): Widget;
+    getState(): MapState;
+    addMarker(marker: MapMarker | LatLng): MapMarker | null;
+    /** Replace the marker with the same id, or append it when that id is new. */
+    setMarker(marker: MapMarker | LatLng): MapMarker | null;
+    removeMarker(idOrMarker: string | number | MapMarker): Widget;
+    clearMarkers(): Widget;
+    getMarkers(): MapMarker[];
+    addPolyline(line: MapPolyline | LatLng[]): MapPolyline | null;
+    removePolyline(idOrLine: string | number | MapPolyline): Widget;
+    clearPolylines(): Widget;
+    getPolylines(): MapPolyline[];
+    setFollowUser(on: boolean): Widget;
+    locate(settings?: { setCenter?: boolean; zoom?: number; timeout?: number; maximumAge?: number; highAccuracy?: boolean }): Promise<{ lat: number; lng: number }> | null;
+    setUserPosition(position: LatLng | number[] | null, settings?: { setCenter?: boolean; zoom?: number }): Widget;
+    render(): Widget;
+  };
+
   // =========================================================================
   // Core
   // =========================================================================
@@ -1752,6 +1933,10 @@ declare module 'flet-box' {
   export const colors: Record<string, string>;
   export const palettes: Record<string, Record<string, string>>;
   export function setTheme(themeName: 'light' | 'dark'): Record<string, string>;
+  export function registerPalette(
+    themeName: string,
+    palette: Record<string, string>
+  ): Record<string, string>;
   export function getTheme(): string;
   export function toggleTheme(): string;
   export function getColor(colorName: string, opacity?: number): string;
@@ -1952,9 +2137,12 @@ declare module 'flet-box' {
     isDark(): boolean;
     isLight(): boolean;
     contrast(): string;
+    luminance(): number;
+    contrastRatio(other: string | ColorInstance): number;
+    meetsContrast(other: string | ColorInstance, minimum?: number): boolean;
   }
 
-  export const color: (value: string) => ColorInstance;
+  export const color: (value: string | ColorInstance) => ColorInstance;
   export function rgba(r: number, g: number, b: number, a?: number): string;
   export function stackPosition(widget: Widget, props: { top?: any; right?: any; bottom?: any; left?: any }): Widget;
   export function flex(grow: number | { grow?: number; shrink?: number; basis?: string }, shrink?: number, basis?: string): string;
@@ -2063,5 +2251,5 @@ declare module 'flet-box' {
   // =========================================================================
   export const highlightColors: Record<string, string>;
   export function tokenize(code: string): Array<{ type: string; value: string }>;
-  export function generateHighlightedHtml(code: string): string;
+  export function generateHighlightedHtml(code: string, palette?: Record<string, string>): string;
 }

package/src/index.js

@@ -87,6 +87,7 @@ export {
 export {
   colors,
   setTheme,
+  registerPalette,
   getTheme,
   toggleTheme,
   subscribeTheme,
@@ -175,6 +176,7 @@ export {
   TreeView,
   Chart,
   QRCode,
+  Maps,
   DraggBox,
   DroppBox,
   DataTable,

package/src/navigations/AppBar.js

@@ -59,6 +59,9 @@ import { goBack, goTo } from "./Router.js";
  *   - `setBackgroundColor(color: string)` — swap the background color or gradient.
  *   - `show()` / `hide()` — toggle bar visibility.
  */
+import { toREM } from "../utils/units.js";
+import { SHADOW_LEVELS } from "../tools/shadow.js";
+
 export const AppBar = (props) => {
   const {
     title,
@@ -119,18 +122,10 @@ export const AppBar = (props) => {
   const finalPaddingRight = paddingRight || padding;
 
   const finalBorderRadius =
-    typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    toREM(borderRadius);
 
-  // Material Design elevation → box-shadow lookup table.
-  const shadows = {
-    0: "none",
-    1: "0 1px 3px rgba(0,0,0,0.12)",
-    2: "0 3px 6px rgba(0,0,0,0.16)",
-    3: "0 6px 12px rgba(0,0,0,0.2)",
-    4: "0 10px 20px rgba(0,0,0,0.25)",
-    5: "0 15px 30px rgba(0,0,0,0.3)",
-  };
-  const boxShadow = shadow === true ? shadows[elevation] : shadow || "none";
+  // The framework's depth scale, not a local copy of it (src/tools/shadow.js).
+  const boxShadow = shadow === true ? SHADOW_LEVELS[elevation] : shadow || "none";
 
   // ========== LEADING SECTION ==========
   // Auto-create a back button if requested and no custom leading was supplied.
@@ -173,7 +168,7 @@ export const AppBar = (props) => {
     marginBottom: finalMarginBottom,
     marginLeft: finalMarginLeft,
     marginRight: finalMarginRight,
-    paddingTop: `calc(${finalPaddingTop}px + env(safe-area-inset-top, 0px))`,
+    paddingTop: `calc(${toREM(finalPaddingTop)} + env(safe-area-inset-top, 0px))`,
     paddingBottom: finalPaddingBottom,
     paddingLeft: finalPaddingLeft,
     paddingRight: finalPaddingRight,
@@ -189,15 +184,20 @@ export const AppBar = (props) => {
 
   // ========== LEFT SECTION ==========
   // Fixed minimum width ensures the center title stays visually centered
-  // even when no leading widget is present.
+  // even when no leading widget is present. That balance is only meaningful
+  // for a centered title: with `centerTitle: false` the title is flush-left,
+  // so reserving the empty 48px zone would push it past the page's content
+  // edge. Same reasoning for the title zone's 8px gutter.
+  const hasLeading = finalLeading instanceof HTMLElement;
+  const balanceZones = centerTitle || hasLeading;
   const leftSection = Container({
     display: "flex",
     alignItems: "center",
     bgColor: "transparent",
     justifyContent: "flex-start",
-    minWidth: 48,
+    minWidth: balanceZones ? 48 : 0,
     flexShrink: 0,
-    child: finalLeading instanceof HTMLElement ? finalLeading : null,
+    child: hasLeading ? finalLeading : null,
   });
   appBar.appendChild(leftSection);
 
@@ -224,9 +224,15 @@ export const AppBar = (props) => {
     // pushes the actions past the viewport edge on narrow screens.
     flex: 1,
     display: "flex",
+    // Container defaults to `flex-direction: column`, which silently rewrites
+    // the two axes: `alignItems: center` becomes horizontal centring and
+    // `justifyContent` (the flag that carries `centerTitle`) becomes vertical.
+    // A string title hid this because its Text fills the width; an
+    // auto-width widget title got centred no matter what `centerTitle` said.
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: centerTitle ? "center" : "flex-start",
-    padding: "0 8px",
+    padding: balanceZones ? "0 8px" : "0",
     bgColor: "transparent",
     overflow: "hidden",
     minWidth: 0,

package/src/navigations/BottomNavigation.js

@@ -53,6 +53,9 @@ import { getCurrentPath, subscribe, goTo } from "./Router.js";
  *   - `getActiveIndex(): number` — returns the currently active tab index.
  *   - `getCurrentRoute(): string|null` — returns the current router path (router mode only).
  */
+import { toREM } from "../utils/units.js";
+import { SHADOW_LEVELS } from "../tools/shadow.js";
+
 export const BottomNavigation = (props) => {
   const {
     items = [],
@@ -90,24 +93,16 @@ export const BottomNavigation = (props) => {
   const finalMarginLeft = marginLeft || margin;
   const finalMarginRight = marginRight || margin;
   const finalBorderRadius =
-    typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
-  const finalPadding = typeof padding === "number" ? `${padding}px` : padding;
+    toREM(borderRadius);
+  const finalPadding = toREM(padding);
 
-  // Material Design elevation → box-shadow lookup table.
-  const shadows = {
-    0: "none",
-    1: "0 1px 3px rgba(0,0,0,0.12)",
-    2: "0 3px 6px rgba(0,0,0,0.16)",
-    3: "0 6px 12px rgba(0,0,0,0.2)",
-    4: "0 10px 20px rgba(0,0,0,0.25)",
-    5: "0 15px 30px rgba(0,0,0,0.3)",
-  };
-  const boxShadow = shadow === true ? shadows[elevation] : shadow || "none";
+  // The framework's depth scale, not a local copy of it (src/tools/shadow.js).
+  const boxShadow = shadow === true ? SHADOW_LEVELS[elevation] : shadow || "none";
 
   const container = WidgetFactory({
     tag: "nav",
     display: "flex",
-    width: `calc(100% - ${finalMarginLeft}px - ${finalMarginRight}px)`,
+    width: `calc(100% - ${toREM(finalMarginLeft)} - ${toREM(finalMarginRight)})`,
     height: height,
     backgroundColor: backgroundColor,
     borderRadius: finalBorderRadius,

package/src/navigations/CollapsibleSideBar.js

@@ -42,6 +42,8 @@ import { colors } from "../utils/themes.js";
  * @returns {HTMLElement} The sidebar container element, augmented with:
  *   - `updateWidth(w: number|string)` — resize the sidebar programmatically.
  */
+import { toREM } from "../utils/units.js";
+
 export const CollapsibleSideBar = ({
   children,
   expanded = true,
@@ -63,14 +65,33 @@ export const CollapsibleSideBar = ({
   );
   let expandedState = Boolean(stateValue.valueOf());
 
+  /**
+   * Paint the expanded/collapsed state onto the elements built below.
+   *
+   * The toggle has to do more than record the state: the width, the chevron
+   * glyph and the content's interactivity are all written once at build time,
+   * so without this the bar never moved.
+   *
+   * @param {boolean} isExpanded
+   * @returns {void}
+   */
+  const paint = (isExpanded) => {
+    container.style.width = toREM(isExpanded ? widthExpanded : widthCollapsed);
+    chevron.textContent = isExpanded ? "chevron_left" : "chevron_right";
+    contentWrapper.style.opacity = isExpanded ? "1" : "0";
+    contentWrapper.style.pointerEvents = isExpanded ? "auto" : "none";
+  };
+
   /**
    * Toggle the sidebar between expanded and collapsed states.
-   * Updates the persisted state and fires the `onToggle` callback.
+   * Updates the persisted state, repaints the bar and fires the `onToggle`
+   * callback.
    */
   const toggle = () => {
     const newState = !expandedState;
     expandedState = newState;
     setIsExpanded(newState);
+    paint(newState);
     if (onToggle) onToggle(newState);
   };
 
@@ -81,7 +102,7 @@ export const CollapsibleSideBar = ({
     tag: "div",
     id,
     width:
-      typeof currentWidth === "number" ? `${currentWidth}px` : currentWidth,
+      toREM(currentWidth),
     height: "100%",
     display: "flex",
     flexDirection: "column",
@@ -95,15 +116,16 @@ export const CollapsibleSideBar = ({
 
   // Toggle button — always visible so the user can expand/collapse regardless
   // of the current state. The icon flips direction to reflect the state.
+  const chevron = Icon({
+    name: expandedState ? "chevron_left" : "chevron_right",
+    size: iconSize,
+    color: colors.textSecondary,
+  });
   const toggleButton = Container({
     padding: 16,
     cursor: "pointer",
     onclick: toggle,
-    child: Icon({
-      name: expandedState ? "chevron_left" : "chevron_right",
-      size: iconSize,
-      color: colors.textSecondary,
-    }),
+    child: chevron,
   });
   container.appendChild(toggleButton);
 
@@ -130,7 +152,7 @@ export const CollapsibleSideBar = ({
    */
   container.updateWidth = (newWidth) => {
     container.style.width =
-      typeof newWidth === "number" ? `${newWidth}px` : newWidth;
+      toREM(newWidth);
   };
 
   return container;

package/src/navigations/Drawer.js

@@ -58,6 +58,8 @@ let drawerInstance = null;
  * @param {DrawerProps} [props={}]
  * @returns {DrawerInstance}
  */
+import { toREM } from "../utils/units.js";
+
 export const Drawer = (props = {}) => {
   const {
     header,
@@ -107,9 +109,9 @@ export const Drawer = (props = {}) => {
   // Sliding drawer panel.
   const drawerPanel = document.createElement("div");
   drawerPanel.style.position = "absolute";
-  drawerPanel.style.top = `${margin}px`;
-  drawerPanel.style.bottom = `${margin}px`;
-  drawerPanel.style.height = `calc(100% - ${margin * 2}px)`;
+  drawerPanel.style.top = toREM(margin);
+  drawerPanel.style.bottom = toREM(margin);
+  drawerPanel.style.height = `calc(100% - ${toREM(margin * 2)})`;
   drawerPanel.style.display = "flex";
   drawerPanel.style.flexDirection = "column";
   drawerPanel.style.backgroundColor = bgColor;
@@ -118,22 +120,22 @@ export const Drawer = (props = {}) => {
   // Apply border radius only to the corners that face away from the screen edge.
   // A left drawer gets rounded right corners; a right drawer gets rounded left corners.
   if (position === "left") {
-    drawerPanel.style.left = `${margin}px`;
+    drawerPanel.style.left = toREM(margin);
     drawerPanel.style.right = "auto";
-    drawerPanel.style.borderTopRightRadius = `${borderRadius}px`;
-    drawerPanel.style.borderBottomRightRadius = `${borderRadius}px`;
+    drawerPanel.style.borderTopRightRadius = toREM(borderRadius);
+    drawerPanel.style.borderBottomRightRadius = toREM(borderRadius);
     drawerPanel.style.borderTopLeftRadius = "0";
     drawerPanel.style.borderBottomLeftRadius = "0";
   } else {
-    drawerPanel.style.right = `${margin}px`;
+    drawerPanel.style.right = toREM(margin);
     drawerPanel.style.left = "auto";
-    drawerPanel.style.borderTopLeftRadius = `${borderRadius}px`;
-    drawerPanel.style.borderBottomLeftRadius = `${borderRadius}px`;
+    drawerPanel.style.borderTopLeftRadius = toREM(borderRadius);
+    drawerPanel.style.borderBottomLeftRadius = toREM(borderRadius);
     drawerPanel.style.borderTopRightRadius = "0";
     drawerPanel.style.borderBottomRightRadius = "0";
   }
 
-  drawerPanel.style.width = typeof width === "number" ? `${width}px` : width;
+  drawerPanel.style.width = toREM(width);
   // Start the panel off-screen so the entrance animation slides it in.
   drawerPanel.style.transform =
     position === "left" ? "translateX(-100%)" : "translateX(100%)";
@@ -160,8 +162,8 @@ export const Drawer = (props = {}) => {
       header &&
         Container({
           flexShrink: 0,
-          borderTopLeftRadius: position === "right" ? `${borderRadius}px` : "0",
-          borderTopRightRadius: position === "left" ? `${borderRadius}px` : "0",
+          borderTopLeftRadius: position === "right" ? toREM(borderRadius) : "0",
+          borderTopRightRadius: position === "left" ? toREM(borderRadius) : "0",
           overflow: "hidden",
           child: header,
         }),
@@ -173,16 +175,24 @@ export const Drawer = (props = {}) => {
           paddingBottom: 8,
           overflow: "auto",
           backgroundColor: bgColor,
-          children: body,
+          // This body is a scroll container inside a fixed-height flex column,
+          // and every child defaults to `flex-shrink: 1`. Left alone, a short
+          // drawer squeezed its rows down to their own padding (a DrawerItem
+          // collapsed to ~24px) instead of overflowing. Pinning the children
+          // keeps them at content height so the body scrolls as intended.
+          children: body.map((child) => {
+            if (child && child.style) child.style.flexShrink = "0";
+            return child;
+          }),
         }),
 
       footer &&
         Container({
           flexShrink: 0,
           borderBottomLeftRadius:
-            position === "right" ? `${borderRadius}px` : "0",
+            position === "right" ? toREM(borderRadius) : "0",
           borderBottomRightRadius:
-            position === "left" ? `${borderRadius}px` : "0",
+            position === "left" ? toREM(borderRadius) : "0",
           overflow: "hidden",
           child: footer,
         }),

package/src/navigations/DrawerItem.js

@@ -143,6 +143,8 @@ export const DrawerItem = (props) => {
    * Order of operations: mark selected → fire callbacks → navigate → close drawer.
    */
   const handleClick = () => {
+    // `onSelect` marks the transition into the selected state — it is what an
+    // app counts to open a section once. `onPress` fires on every tap.
     if (!isSelected) {
       isSelected = true;
       updateUI();
@@ -150,8 +152,8 @@ export const DrawerItem = (props) => {
       selectionEvent.dispatchEvent(
         new CustomEvent("drawer-item-selected", { detail: { id: label } }),
       );
+      if (onSelect) onSelect();
     }
-    if (onSelect) onSelect();
     if (onPress) onPress();
     if (route) goTo(route);
     if (closeOnPress) closeDrawer();