@fairfox/polly 0.72.0 → 0.73.0

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

@@ -396,18 +396,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 +419,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 +435,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 +801,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,
@@ -510,6 +527,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 +709,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 +860,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 +875,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 +1069,7 @@ function Cluster(props) {
   if (className)
     parts.push(className);
   return createElement3(as, {
+    ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
     style,
@@ -1060,11 +1089,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 +1109,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 +1787,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 +1806,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 +2100,4 @@ export {
   ActionForm
 };
 
-//# debugId=05E49C730A24E5F464756E2164756E21
+//# debugId=7DA35338ECD4891D64756E2164756E21