@fairfox/polly 0.72.0 → 0.73.1

package/dist/src/polly-ui/Text.d.ts

@@ -1,31 +1,43 @@
 /**
- * Text — typographic primitive for secondary and sized copy.
+ * Text — typographic primitive for secondary, sized, and status copy.
  *
- * Renders subtitles, captions, field labels, and empty-state copy
- * without the consumer reaching for a `style` attribute or a hand-rolled
- * `.muted` class. `tone` and `size` map to the semantic `--polly-text-*`
- * token family; `as` keeps the element polymorphic so the same
- * primitive backs a <span>, <p>, <label>, or <figcaption>. A no-prop
- * <Text> is an ordinary <span> at body size and default colour.
+ * Renders subtitles, captions, field labels, empty-state copy, and
+ * error/warning messages without the consumer reaching for a `style`
+ * attribute or a hand-rolled class. `tone` maps to the semantic
+ * `--polly-text-*` and `--polly-status-*` token families; `size`,
+ * `weight`, `italic`, and `leading` cover the remaining typographic
+ * axes. `as` keeps the element polymorphic so the same primitive backs a
+ * <span>, <p>, <label>, or <figcaption>. A no-prop <Text> is an ordinary
+ * <span> at body size and default colour.
+ *
+ * polly#125: arbitrary `data-*` / `aria-*` attributes are forwarded to
+ * the rendered element, so a Text that also needs a test hook or an
+ * a11y attribute stays a single element.
  */
 import { type ComponentChildren, type JSX } from "preact";
-export type TextTone = "default" | "muted";
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type TextTone = "default" | "muted" | "danger" | "warning" | "success";
 export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type TextWeight = "normal" | "medium" | "bold";
-export type TextProps = {
+export type TextLeading = "tight" | "base" | "loose";
+export type TextProps = PassthroughAttrs & {
     children: ComponentChildren;
     /** Polymorphic element (span, p, label, figcaption, …). Defaults to 'span'. */
     as?: keyof JSX.IntrinsicElements;
-    /** Colour role. 'muted' renders de-emphasised secondary text. Default: 'default'. */
+    /** Colour role. 'muted' de-emphasises; 'danger'/'warning'/'success'
+     * render status copy from the `--polly-status-*` tokens. Default: 'default'. */
     tone?: TextTone;
     /** Token-backed font size. Default: inherit from context. */
     size?: TextSize;
     /** Token-backed font weight. Default: inherit from context. */
     weight?: TextWeight;
+    /** Italic emphasis — for hints and asides — without an inline style. */
+    italic?: boolean;
+    /** Token-backed line height. 'loose' suits multi-line body copy. */
+    leading?: TextLeading;
     className?: string;
     id?: string;
     /** Forwarded so <Text as="label"> can point at a control. */
     htmlFor?: string;
-    "aria-hidden"?: boolean;
 };
 export declare function Text(props: TextProps): JSX.Element;

package/dist/src/polly-ui/index.css

@@ -67,10 +67,9 @@
   }
 
   .menu_HX48zA {
-    position: absolute;
+    position: fixed;
     inset: unset;
     z-index: var(--polly-z-raised);
-    margin: var(--polly-space-xs) 0 0;
     padding: var(--polly-space-xs) 0;
     border: var(--polly-border-width-default) solid var(--polly-border);
     border-radius: var(--polly-radius-md);
@@ -80,13 +79,7 @@
     overflow-y: auto;
     min-width: 160px;
     max-height: 280px;
-    top: 100%;
-    left: 0;
-  }
-
-  .alignRight_HX48zA {
-    left: auto;
-    right: 0;
+    margin: 0;
   }
 }
 
@@ -396,18 +389,22 @@
     --s-radius: 0;
     --s-border-color: transparent;
     --s-border-width: 0;
+    --s-border-style: solid;
     --s-shadow: none;
     --s-w: auto;
     --s-h: auto;
     --s-mh: auto;
+    --s-maxh: none;
     --s-mis: none;
+    --s-overflow: visible;
     --s-position: static;
     --s-inset: auto;
+    --s-transform: none;
     --s-z: auto;
     box-sizing: border-box;
     padding: var(--s-p);
     background: var(--s-bg);
-    border-style: solid;
+    border-style: var(--s-border-style);
     border-color: var(--s-border-color);
     border-width: var(--s-border-width);
     border-radius: var(--s-radius);
@@ -415,9 +412,12 @@
     inline-size: var(--s-w);
     block-size: var(--s-h);
     min-block-size: var(--s-mh);
+    max-block-size: var(--s-maxh);
     max-inline-size: var(--s-mis);
+    overflow: var(--s-overflow);
     position: var(--s-position);
     inset: var(--s-inset);
+    transform: var(--s-transform);
     z-index: var(--s-z);
   }
 
@@ -428,34 +428,32 @@
 
   .sides-block-start_pQCFqA {
     border-style: none;
-    border-block-start-style: solid;
+    border-block-start-style: var(--s-border-style);
   }
 
   .sides-block-end_pQCFqA {
     border-style: none;
-    border-block-end-style: solid;
+    border-block-end-style: var(--s-border-style);
   }
 
   .sides-inline-start_pQCFqA {
     border-style: none;
-    border-inline-start-style: solid;
+    border-inline-start-style: var(--s-border-style);
   }
 
   .sides-inline-end_pQCFqA {
     border-style: none;
-    border-inline-end-style: solid;
+    border-inline-end-style: var(--s-border-style);
   }
 
   .sides-block_pQCFqA {
     border-style: none;
-    border-block-start-style: solid;
-    border-block-end-style: solid;
+    border-block-style: var(--s-border-style);
   }
 
   .sides-inline_pQCFqA {
     border-style: none;
-    border-left-style: solid;
-    border-right-style: solid;
+    border-inline-style: var(--s-border-style);
   }
 }
 
@@ -796,6 +794,34 @@
     color: var(--polly-text-muted);
   }
 
+  .danger_75HKdQ {
+    color: var(--polly-status-danger-text);
+  }
+
+  .warning_75HKdQ {
+    color: var(--polly-status-warning-text);
+  }
+
+  .success_75HKdQ {
+    color: var(--polly-status-success-text);
+  }
+
+  .italic_75HKdQ {
+    font-style: italic;
+  }
+
+  .tight_75HKdQ {
+    line-height: var(--polly-line-height-tight);
+  }
+
+  .base_75HKdQ {
+    line-height: var(--polly-line-height-base);
+  }
+
+  .loose_75HKdQ {
+    line-height: var(--polly-line-height-loose);
+  }
+
   .xs_75HKdQ {
     font-size: var(--polly-text-xs);
   }

package/dist/src/polly-ui/index.js

@@ -123,6 +123,20 @@ function dispatchAction(action, data) {
   }
 }
 
+// src/polly-ui/internal/passthrough.ts
+function collectPassthrough(props) {
+  const out = {};
+  for (const key of Object.keys(props)) {
+    if (!key.startsWith("data-") && !key.startsWith("aria-"))
+      continue;
+    const value = props[key];
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
 // src/polly-ui/ActionInput.tsx
 import { jsxDEV as jsxDEV2 } from "preact/jsx-dev-runtime";
 function ActionInput(props) {
@@ -180,10 +194,12 @@ function ActionInput(props) {
     }
   };
   const className = props.className ? `${ActionInput_module_default["root"]} ${props.className}` : ActionInput_module_default["root"];
+  const passthrough = collectPassthrough(props);
   if (mode === "view") {
     const rendered = props.renderView ? props.renderView(props.value) : props.value;
     const isEmpty = props.value.length === 0;
     return /* @__PURE__ */ jsxDEV2("div", {
+      ...passthrough,
       class: `${className} ${ActionInput_module_default["view"]}`,
       "data-polly-ui": true,
       "data-polly-action-input": true,
@@ -208,6 +224,7 @@ function ActionInput(props) {
     }, undefined, false, undefined, this);
   }
   const common = {
+    ...passthrough,
     class: `${ActionInput_module_default["edit"]} ${ActionInput_module_default["root"]}`,
     "data-polly-ui": true,
     "data-polly-action-input": true,
@@ -258,8 +275,7 @@ import { useEffect as useEffect2, useRef as useRef2 } from "preact/hooks";
 var Dropdown_module_default = {
   dropdown: "dropdown_HX48zA",
   trigger: "trigger_HX48zA",
-  menu: "menu_HX48zA",
-  alignRight: "alignRight_HX48zA"
+  menu: "menu_HX48zA"
 };
 
 // src/polly-ui/Layout.tsx
@@ -375,6 +391,8 @@ function Layout(props) {
 // src/polly-ui/Dropdown.tsx
 import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
 var dropdownCounter = 0;
+var MENU_GAP = 4;
+var VIEWPORT_PADDING = 8;
 function Dropdown(props) {
   const { isOpen, trigger, children, align = "left", multiSelect = false, className, id } = props;
   const menuRef = useRef2(null);
@@ -398,6 +416,60 @@ function Dropdown(props) {
       menu.removeEventListener("overlay:close", onOverlayClose);
     };
   }, [popoverId, isOpen]);
+  useEffect2(() => {
+    const menu = menuRef.current;
+    const trigger2 = triggerRef.current;
+    if (!menu || !trigger2)
+      return;
+    const positionMenu = () => {
+      const t = trigger2.getBoundingClientRect();
+      const prevDisplay = menu.style.display;
+      menu.style.maxHeight = "";
+      menu.style.display = "block";
+      const menuWidth = menu.offsetWidth;
+      const menuHeight = menu.offsetHeight;
+      menu.style.display = prevDisplay;
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      let left = align === "right" ? t.right - menuWidth : t.left;
+      const maxLeft = Math.max(VIEWPORT_PADDING, viewportWidth - menuWidth - VIEWPORT_PADDING);
+      left = Math.min(Math.max(left, VIEWPORT_PADDING), maxLeft);
+      const spaceBelow = viewportHeight - t.bottom - MENU_GAP - VIEWPORT_PADDING;
+      const spaceAbove = t.top - MENU_GAP - VIEWPORT_PADDING;
+      let top;
+      if (menuHeight <= spaceBelow || spaceBelow >= spaceAbove) {
+        top = t.bottom + MENU_GAP;
+        if (menuHeight > spaceBelow) {
+          menu.style.maxHeight = `${Math.max(spaceBelow, 0)}px`;
+        }
+      } else {
+        const available = Math.max(spaceAbove, 0);
+        menu.style.maxHeight = `${available}px`;
+        top = t.top - MENU_GAP - Math.min(menuHeight, available);
+      }
+      menu.style.position = "fixed";
+      menu.style.margin = "0";
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+    };
+    const onBeforeToggle = (e) => {
+      if (e.newState === "open") {
+        positionMenu();
+      }
+    };
+    const onReposition = () => {
+      if (menu.matches(":popover-open"))
+        positionMenu();
+    };
+    menu.addEventListener("beforetoggle", onBeforeToggle);
+    window.addEventListener("scroll", onReposition, true);
+    window.addEventListener("resize", onReposition);
+    return () => {
+      menu.removeEventListener("beforetoggle", onBeforeToggle);
+      window.removeEventListener("scroll", onReposition, true);
+      window.removeEventListener("resize", onReposition);
+    };
+  }, [align]);
   useSignalEffect(() => {
     const menu = menuRef.current;
     if (!menu)
@@ -426,9 +498,6 @@ function Dropdown(props) {
   const parts = [Dropdown_module_default["dropdown"] ?? ""];
   if (className)
     parts.push(className);
-  const menuParts = [Dropdown_module_default["menu"] ?? ""];
-  if (align === "right")
-    menuParts.push(Dropdown_module_default["alignRight"] ?? "");
   return /* @__PURE__ */ jsxDEV3("div", {
     id,
     class: parts.filter(Boolean).join(" "),
@@ -445,7 +514,8 @@ function Dropdown(props) {
         ref: menuRef,
         id: popoverId,
         role: "listbox",
-        class: menuParts.filter(Boolean).join(" "),
+        class: Dropdown_module_default["menu"] ?? "",
+        "data-align": align,
         popover: "auto",
         "data-overlay-id": popoverId,
         onToggle: handleToggle,
@@ -510,6 +580,7 @@ function ActionSelect(props) {
   if (className)
     parts.push(className);
   return /* @__PURE__ */ jsxDEV4("div", {
+    ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
@@ -691,6 +762,7 @@ function Button(props) {
       href: disabled ? undefined : props.href,
       target: "target" in props ? props.target : undefined,
       rel: "rel" in props ? props.rel : undefined,
+      download: "download" in props ? props.download : undefined,
       "aria-disabled": disabled,
       "aria-label": ariaLabel,
       "data-polly-ui": true,
@@ -841,6 +913,7 @@ function Surface(props) {
   const position = props.position ?? v.position;
   const inset = props.inset ?? v.inset;
   const zIndex = props.zIndex ?? v.zIndex;
+  const { maxHeight, overflow, borderStyle, transform } = props;
   const borderWidth = props.borderWidth ?? v.borderWidth ?? (border && border !== "none" ? "default" : undefined);
   const style = {};
   if (padding)
@@ -855,18 +928,26 @@ function Surface(props) {
     style["--s-border-width"] = borderWidthValue(borderWidth);
   if (shadow)
     style["--s-shadow"] = shadowValue(shadow);
+  if (borderStyle)
+    style["--s-border-style"] = borderStyle;
   if (width)
     style["--s-w"] = width;
   if (height)
     style["--s-h"] = height;
   if (minHeight)
     style["--s-mh"] = minHeight;
+  if (maxHeight)
+    style["--s-maxh"] = maxHeight;
   if (maxInlineSize)
     style["--s-mis"] = maxInlineSize;
+  if (overflow)
+    style["--s-overflow"] = overflow;
   if (position)
     style["--s-position"] = position;
   if (inset)
     style["--s-inset"] = inset;
+  if (transform)
+    style["--s-transform"] = transform;
   if (zIndex !== undefined)
     style["--s-z"] = String(zIndex);
   if (props.style) {
@@ -1041,6 +1122,7 @@ function Cluster(props) {
   if (className)
     parts.push(className);
   return createElement3(as, {
+    ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
     style,
@@ -1060,11 +1142,13 @@ var Code_module_default = {
 import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
 function Code(props) {
   const { children, block, className, id } = props;
+  const passthrough = collectPassthrough(props);
   if (block) {
     const parts2 = [Code_module_default["block"]];
     if (className)
       parts2.push(className);
     return /* @__PURE__ */ jsxDEV9("pre", {
+      ...passthrough,
       id,
       class: parts2.filter(Boolean).join(" "),
       "data-polly-ui": true,
@@ -1078,6 +1162,7 @@ function Code(props) {
   if (className)
     parts.push(className);
   return /* @__PURE__ */ jsxDEV9("code", {
+    ...passthrough,
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
@@ -1755,6 +1840,13 @@ import { createElement as createElement4 } from "preact";
 var Text_module_default = {
   text: "text_75HKdQ",
   muted: "muted_75HKdQ",
+  danger: "danger_75HKdQ",
+  warning: "warning_75HKdQ",
+  success: "success_75HKdQ",
+  italic: "italic_75HKdQ",
+  tight: "tight_75HKdQ",
+  base: "base_75HKdQ",
+  loose: "loose_75HKdQ",
   xs: "xs_75HKdQ",
   sm: "sm_75HKdQ",
   md: "md_75HKdQ",
@@ -1767,23 +1859,37 @@ var Text_module_default = {
 
 // src/polly-ui/Text.tsx
 function Text(props) {
-  const { children, as = "span", tone = "default", size, weight, className, id } = props;
+  const {
+    children,
+    as = "span",
+    tone = "default",
+    size,
+    weight,
+    italic,
+    leading,
+    className,
+    id
+  } = props;
   const parts = [Text_module_default["text"]];
-  if (tone === "muted")
-    parts.push(Text_module_default["muted"]);
+  if (tone !== "default")
+    parts.push(Text_module_default[tone]);
   if (size)
     parts.push(Text_module_default[size]);
   if (weight)
     parts.push(Text_module_default[weight]);
+  if (italic)
+    parts.push(Text_module_default["italic"]);
+  if (leading)
+    parts.push(Text_module_default[leading]);
   if (className)
     parts.push(className);
   return createElement4(as, {
+    ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
     for: props.htmlFor,
     "data-polly-ui": true,
-    "data-polly-text": tone,
-    "aria-hidden": props["aria-hidden"]
+    "data-polly-text": tone
   }, children);
 }
 // src/polly-ui/internal/input-base.ts
@@ -2047,4 +2153,4 @@ export {
   ActionForm
 };
 
-//# debugId=05E49C730A24E5F464756E2164756E21
+//# debugId=1CBD05449C07223E64756E2164756E21