@fairfox/polly 0.74.1 → 0.75.1

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

@@ -8,7 +8,9 @@
  */
 import type { ComponentChildren, JSX } from "preact";
 export type CollapsibleProps = {
-    summary: string;
+    /** Disclosure header. A string for the common case, or any node —
+     * e.g. a muted, small <Text> — when the header needs styling. */
+    summary: ComponentChildren;
     children: ComponentChildren;
     defaultOpen?: boolean;
     className?: string;

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

@@ -28,7 +28,9 @@ export type DropdownProps = {
      * Class applied to the trigger <button> in place of Dropdown's own
      * default. Lets a composing component (Select, ActionSelect) style
      * the single interactive element directly, with no styled node
-     * nested inside the button.
+     * nested inside the button. The trigger also carries a
+     * `data-open="true|false"` attribute mirroring `isOpen`, so the
+     * class can style open-state affordances (e.g. a rotating caret).
      */
     triggerClassName?: string;
     /** Disables the trigger <button>. */

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

@@ -0,0 +1,25 @@
+/**
+ * FileInput — a styled trigger for the native file picker.
+ *
+ * A file is a binary object: it cannot ride a `data-action` attribute
+ * the way a string value does, so FileInput is the one input primitive
+ * that takes a callback. `onFiles` fires with the chosen FileList. The
+ * native <input type="file"> stays in the DOM — visually hidden inside
+ * the <label> — so the whole control opens the picker and remains
+ * keyboard-accessible (polly#135).
+ */
+import type { JSX } from "preact";
+export type FileInputProps = {
+    /** Fired with the chosen files whenever the selection changes. */
+    onFiles: (files: FileList) => void;
+    /** Visible trigger text. Default: 'Choose file'. */
+    label?: string;
+    /** `accept` filter forwarded to the native input (e.g. 'image/*'). */
+    accept?: string;
+    /** Allow selecting more than one file. */
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function FileInput(props: FileInputProps): JSX.Element;

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

@@ -0,0 +1,21 @@
+/**
+ * Html — render trusted, already-sanitised raw markup.
+ *
+ * The deliberate escape hatch for the rare thing polly-ui cannot
+ * express: a locally generated, already-safe SVG (a QR code), a
+ * pre-rendered diagram. The caller owns safety — `html` goes straight
+ * into `dangerouslySetInnerHTML`, so it MUST be trusted or sanitised
+ * first. For untrusted markdown use `renderMarkdown`, which sanitises;
+ * for anything a primitive already covers, use the primitive.
+ */
+import { type JSX } from "preact";
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type HtmlProps = PassthroughAttrs & {
+    /** Trusted, already-sanitised HTML. The caller owns its safety. */
+    html: string;
+    /** Polymorphic wrapper element (div, span, figure, …). Defaults to 'div'. */
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    id?: string;
+};
+export declare function Html(props: HtmlProps): JSX.Element;

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

@@ -8,7 +8,8 @@
  * any of them in media queries without touching specificity.
  */
 import { type ComponentChildren, type JSX } from "preact";
-export type LayoutProps = {
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type LayoutProps = PassthroughAttrs & {
     children: ComponentChildren;
     /** Polymorphic element (div, section, header, nav, …). Defaults to 'div'. */
     as?: keyof JSX.IntrinsicElements;

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

@@ -0,0 +1,25 @@
+/**
+ * Link — token-styled navigational anchor.
+ *
+ * The primitive for plain hyperlinks: hub app-grid cards, a file
+ * download, an external reference. <Button href> is for link-shaped
+ * BUTTONS — a call to action wearing button chrome; <Link> is for
+ * inline, textual links that read as links. `external` opens a new tab
+ * with `rel="noopener noreferrer"`; `download` offers the target as a
+ * file (an empty string keeps the resource's own filename).
+ */
+import type { ComponentChildren, JSX } from "preact";
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type LinkProps = PassthroughAttrs & {
+    children: ComponentChildren;
+    href: string;
+    /** Open in a new tab with rel="noopener noreferrer". */
+    external?: boolean;
+    /** Offer the href as a download; an empty string keeps its filename. */
+    download?: string;
+    /** Drop the underline until hover — for link grids and card links. */
+    subtle?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function Link(props: LinkProps): JSX.Element;

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

@@ -0,0 +1,26 @@
+/**
+ * Output — read-only, multi-line diagnostic text.
+ *
+ * For program output a consumer must SHOW but not edit: a mesh-state
+ * snapshot, a per-peer sync table, a recovery blob. <TextInput> and
+ * <ActionInput> are single-line and editable; <Code> is for code
+ * samples and never wraps. <Output> renders a monospace <pre> that
+ * wraps long lines by default — a diagnostic dump should stay on
+ * screen — with `scroll` to switch to a horizontal scrollbar instead.
+ *
+ * It carries the polly#125 passthrough surface, so a `data-action`
+ * for a tap-to-select-all gesture rides straight onto the <pre>
+ * (polly#135).
+ */
+import type { ComponentChildren, JSX } from "preact";
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type OutputProps = PassthroughAttrs & {
+    children: ComponentChildren;
+    /** Scroll long unbreakable lines horizontally instead of wrapping. */
+    scroll?: boolean;
+    /** Make the block focusable — pair with a `data-action` tap gesture. */
+    tabIndex?: number;
+    className?: string;
+    id?: string;
+};
+export declare function Output(props: OutputProps): JSX.Element;

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

@@ -21,14 +21,16 @@ type Shadow = "none" | "sm" | "md" | "lg";
 type Position = "static" | "relative" | "absolute" | "sticky" | "fixed";
 type BorderStyle = "solid" | "dashed";
 type Overflow = "visible" | "hidden" | "auto" | "scroll";
+type Scheme = "dark" | "light";
 /**
- * Arbitrary `data-*` and `aria-*` attributes forwarded to the rendered element
- * so consumers (Modal, Toast, Card, etc.) can compose Surface without losing
- * DOM hooks or ARIA semantics.
+ * Arbitrary `data-*`, `aria-*`, and `title` attributes forwarded to the
+ * rendered element so consumers (Modal, Toast, Card, etc.) can compose
+ * Surface without losing DOM hooks, ARIA semantics, or a native tooltip.
  */
 export type SurfaceDataAttrs = {
     [dataAttr: `data-${string}`]: string | number | boolean | undefined;
     [ariaAttr: `aria-${string}`]: string | number | boolean | undefined;
+    title?: string;
 };
 export type SurfaceProps = SurfaceDataAttrs & {
     children?: ComponentChildren;
@@ -46,7 +48,22 @@ export type SurfaceProps = SurfaceDataAttrs & {
     borderSides?: BorderSides;
     /** Border line style. Default: `'solid'`. */
     borderStyle?: BorderStyle;
+    /** Any CSS colour, overriding the token the `border` prop would pick.
+     * For one-off rings (a cutout ring, a focus halo) that no semantic
+     * border token expresses. Implies a border width when none is set. */
+    borderColor?: string;
     shadow?: Shadow;
+    /**
+     * Retint the token subtree so descendant `Text`/`Button` read the
+     * right contrast on a dark (or forced-light) Surface — error
+     * banners, camera overlays, chat bubbles. Sets `data-polly-theme`,
+     * so every `--polly-*` colour token flips for the subtree; no inline
+     * `--polly-text` override needed (polly#135).
+     */
+    scheme?: Scheme;
+    /** `'none'` makes a decorative Surface (a scan-frame overlay) ignore
+     * the pointer so clicks fall through to what is behind it. */
+    pointerEvents?: "none" | "auto";
     /** display: inline-block — Surface flows inline with surrounding text. */
     inline?: boolean;
     width?: string;

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

@@ -33,6 +33,8 @@ export type TextProps = PassthroughAttrs & {
     weight?: TextWeight;
     /** Italic emphasis — for hints and asides — without an inline style. */
     italic?: boolean;
+    /** Line-through — for completed todo items and superseded copy. */
+    strikethrough?: boolean;
     /** Token-backed line height. 'loose' suits multi-line body copy. */
     leading?: TextLeading;
     className?: string;

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

@@ -189,18 +189,23 @@
   }
 
   .caret_daofbw {
-    color: var(--polly-text-muted);
+    color: var(--polly-caret-color);
     pointer-events: none;
+    transition: transform var(--polly-motion-fast) ease;
     flex: none;
   }
 
   .caret_daofbw:before {
-    content: "▾";
+    content: var(--polly-caret-glyph);
     display: block;
-    font-size: var(--polly-text-xs);
+    font-size: var(--polly-caret-size);
     line-height: 1;
   }
 
+  .trigger_daofbw[data-open="true"] .caret_daofbw {
+    transform: rotate(180deg);
+  }
+
   .placeholder_daofbw {
     color: var(--polly-text-muted);
   }
@@ -425,6 +430,7 @@
     --s-inset: auto;
     --s-transform: none;
     --s-z: auto;
+    --s-pe: auto;
     box-sizing: border-box;
     padding: var(--s-p);
     background: var(--s-bg);
@@ -443,6 +449,7 @@
     inset: var(--s-inset);
     transform: var(--s-transform);
     z-index: var(--s-z);
+    pointer-events: var(--s-pe);
   }
 
   .inline_pQCFqA {
@@ -568,6 +575,9 @@
   }
 
   .summary_sEhnPw {
+    display: flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
     padding: var(--polly-space-sm) var(--polly-space-md);
     cursor: pointer;
     font-family: inherit;
@@ -583,16 +593,19 @@
     display: none;
   }
 
-  .summary_sEhnPw:before {
-    content: "▶";
-    display: inline-block;
-    margin-right: var(--polly-space-sm);
-    font-size: var(--polly-text-xs);
-    transition: transform var(--polly-motion-fast);
+  .summary_sEhnPw:after {
+    content: var(--polly-caret-glyph);
+    display: block;
+    font-size: var(--polly-caret-size);
+    color: var(--polly-caret-color);
+    transition: transform var(--polly-motion-fast) ease;
+    flex: none;
+    margin-inline-start: auto;
+    line-height: 1;
   }
 
-  .collapsible_sEhnPw[open] > .summary_sEhnPw:before {
-    transform: rotate(90deg);
+  .collapsible_sEhnPw[open] > .summary_sEhnPw:after {
+    transform: rotate(180deg);
   }
 
   .summary_sEhnPw:hover {
@@ -728,6 +741,96 @@
   }
 }
 
+/* src/polly-ui/FileInput.module.css */
+@layer polly-components {
+  .fileInput_esO1fA {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
+    min-block-size: var(--polly-control-height-md);
+    padding: var(--polly-space-sm) var(--polly-space-md);
+    border: var(--polly-border-width-default) solid var(--polly-border);
+    border-radius: var(--polly-radius-sm);
+    background-color: var(--polly-surface);
+    font-family: inherit;
+    font-size: var(--polly-text-md);
+    color: var(--polly-text);
+    cursor: pointer;
+  }
+
+  .fileInput_esO1fA:hover {
+    background-color: var(--polly-surface-sunken);
+  }
+
+  .fileInput_esO1fA:focus-within {
+    outline: var(--polly-border-width-medium) solid var(--polly-focus-ring);
+    outline-offset: var(--polly-border-width-medium);
+  }
+
+  .native_esO1fA {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+  }
+
+  .disabled_esO1fA {
+    opacity: var(--polly-opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+/* src/polly-ui/Link.module.css */
+@layer polly-components {
+  .link__T-0-w {
+    color: var(--polly-accent);
+    text-decoration: underline;
+    text-underline-offset: .15em;
+    border-radius: var(--polly-radius-sm);
+    cursor: pointer;
+  }
+
+  .link__T-0-w:hover {
+    color: var(--polly-accent-hover);
+  }
+
+  .subtle__T-0-w {
+    text-decoration: none;
+  }
+
+  .subtle__T-0-w:hover {
+    text-decoration: underline;
+  }
+}
+
+/* src/polly-ui/Output.module.css */
+@layer polly-components {
+  .output_wLrUbA {
+    padding: var(--polly-space-md);
+    border: var(--polly-border-width-default) solid var(--polly-border);
+    border-radius: var(--polly-radius-md);
+    background-color: var(--polly-surface-sunken);
+    font-family: var(--polly-font-mono);
+    font-size: var(--polly-text-sm);
+    color: var(--polly-text);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    max-inline-size: 100%;
+    margin: 0;
+  }
+
+  .scroll_wLrUbA {
+    white-space: pre;
+    overflow-wrap: normal;
+    overflow-x: auto;
+  }
+}
+
 /* src/polly-ui/Skeleton.module.css */
 @layer polly-components {
   @keyframes pollyShimmer_gpBHJA {
@@ -834,6 +937,10 @@
     font-style: italic;
   }
 
+  .strikethrough_75HKdQ {
+    text-decoration: line-through;
+  }
+
   .tight_75HKdQ {
     line-height: var(--polly-line-height-tight);
   }

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

@@ -19,8 +19,12 @@ export { Code, type CodeProps } from "./Code.tsx";
 export { Collapsible, type CollapsibleProps } from "./Collapsible.tsx";
 export { ConfirmDialog, type ConfirmOptions, confirm } from "./ConfirmDialog.tsx";
 export { Dropdown, type DropdownProps } from "./Dropdown.tsx";
+export { FileInput, type FileInputProps } from "./FileInput.tsx";
+export { Html, type HtmlProps } from "./Html.tsx";
 export { Layout, type LayoutProps } from "./Layout.tsx";
+export { Link, type LinkProps } from "./Link.tsx";
 export { Modal } from "./Modal.tsx";
+export { Output, type OutputProps } from "./Output.tsx";
 export { getOverlayRootNode, OverlayRoot } from "./OverlayRoot.tsx";
 export { Select, type SelectOption, type SelectProps } from "./Select.tsx";
 export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./Skeleton.tsx";