@fairfox/polly 0.71.0 → 0.73.0

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

@@ -0,0 +1,18 @@
+/**
+ * Code — inline monospace code span.
+ *
+ * Renders a `<code>` with the `--polly-font-mono` stack, a faint sunken
+ * tint, and snug padding so a consumer never hand-rolls a `.mono` class
+ * for inline code, identifiers, or keyboard hints. For multi-line code
+ * blocks, pass `block`, which switches to a pre-wrapped <pre><code>.
+ */
+import type { ComponentChildren, JSX } from "preact";
+import { type PassthroughAttrs } from "./internal/passthrough.ts";
+export type CodeProps = PassthroughAttrs & {
+    children: ComponentChildren;
+    /** Render as a block (<pre><code>) instead of an inline span. */
+    block?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function Code(props: CodeProps): JSX.Element;

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

@@ -18,7 +18,9 @@ type Border = "none" | "default" | "strong";
 type BorderWidth = "none" | "default" | "medium" | "thick";
 type BorderSides = "all" | "block-start" | "block-end" | "inline-start" | "inline-end" | "block" | "inline";
 type Shadow = "none" | "sm" | "md" | "lg";
-type Position = "static" | "relative" | "sticky" | "fixed";
+type Position = "static" | "relative" | "absolute" | "sticky" | "fixed";
+type BorderStyle = "solid" | "dashed";
+type Overflow = "visible" | "hidden" | "auto" | "scroll";
 /**
  * Arbitrary `data-*` and `aria-*` attributes forwarded to the rendered element
  * so consumers (Modal, Toast, Card, etc.) can compose Surface without losing
@@ -42,16 +44,25 @@ export type SurfaceProps = SurfaceDataAttrs & {
     border?: Border;
     borderWidth?: BorderWidth;
     borderSides?: BorderSides;
+    /** Border line style. Default: `'solid'`. */
+    borderStyle?: BorderStyle;
     shadow?: Shadow;
     /** display: inline-block — Surface flows inline with surrounding text. */
     inline?: boolean;
     width?: string;
     height?: string;
     minHeight?: string;
+    /** Maximum block size — a Surface that shrinks to content but is capped. */
+    maxHeight?: string;
     maxInlineSize?: string;
+    /** Overflow behaviour. `'auto'` makes a height-capped Surface scroll. */
+    overflow?: Overflow;
     position?: Position;
     /** Any CSS inset value (`'0'`, `'auto auto 1rem 1rem'`, `'1rem'`, …). */
     inset?: string;
+    /** CSS transform — e.g. `'translateX(-50%)'` to centre a fixed banner
+     * paired with `inset: '… auto … 50%'`. The sanctioned transform escape. */
+    transform?: string;
     zIndex?: number;
     className?: string;
     /**

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

@@ -0,0 +1,43 @@
+/**
+ * Text — typographic primitive for secondary, sized, and status copy.
+ *
+ * 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";
+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 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' 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;
+};
+export declare function Text(props: TextProps): JSX.Element;

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

@@ -55,6 +55,191 @@
   }
 }
 
+/* src/polly-ui/Dropdown.module.css */
+@layer polly-components {
+  .dropdown_HX48zA {
+    position: relative;
+    display: inline-block;
+  }
+
+  .trigger_HX48zA {
+    display: inline-block;
+  }
+
+  .menu_HX48zA {
+    position: absolute;
+    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);
+    background-color: var(--polly-surface);
+    box-shadow: var(--polly-shadow-md);
+    box-sizing: border-box;
+    overflow-y: auto;
+    min-width: 160px;
+    max-height: 280px;
+    top: 100%;
+    left: 0;
+  }
+
+  .alignRight_HX48zA {
+    left: auto;
+    right: 0;
+  }
+}
+
+/* src/polly-ui/Layout.module.css */
+@layer polly-components {
+  .layout_QgwWPg {
+    --l-cols: none;
+    --l-rows: none;
+    --l-gap: 0;
+    --l-p: 0;
+    --l-h: auto;
+    --l-mh: auto;
+    --l-mis: none;
+    --l-ji: stretch;
+    --l-ai: start;
+    --l-jc: normal;
+    --l-ac: normal;
+    --l-js: auto;
+    --l-as: auto;
+    --l-flow: row;
+    --l-arows: auto;
+    --l-acols: auto;
+    --l-col: auto;
+    display: grid;
+    box-sizing: border-box;
+    max-inline-size: var(--l-mis);
+    grid-template-columns: var(--l-cols);
+    grid-template-rows: var(--l-rows);
+    gap: var(--l-gap);
+    padding: var(--l-p);
+    height: var(--l-h);
+    min-height: var(--l-mh);
+    justify-items: var(--l-ji);
+    align-items: var(--l-ai);
+    justify-content: var(--l-jc);
+    align-content: var(--l-ac);
+    justify-self: var(--l-js);
+    align-self: var(--l-as);
+    grid-auto-flow: var(--l-flow);
+    grid-auto-rows: var(--l-arows);
+    grid-auto-columns: var(--l-acols);
+    grid-column: var(--l-col);
+    inline-size: 100%;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+
+  .inline_QgwWPg {
+    display: inline-grid;
+    inline-size: auto;
+  }
+
+  @media (max-width: 640px) {
+    .stackOnMobile_QgwWPg {
+      grid-template-columns: 1fr;
+      grid-auto-flow: row;
+      grid-column: auto;
+    }
+  }
+}
+
+/* src/polly-ui/Select.module.css */
+@layer polly-components {
+  .select_daofbw {
+    display: inline-block;
+  }
+
+  .label_daofbw {
+    display: block;
+    margin-bottom: var(--polly-space-xs);
+    font-size: var(--polly-text-sm);
+    font-weight: var(--polly-weight-medium);
+    color: var(--polly-text-muted);
+  }
+
+  .trigger_daofbw {
+    display: inline-block;
+    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);
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 140px;
+  }
+
+  .trigger_daofbw:disabled {
+    opacity: var(--polly-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .placeholder_daofbw {
+    color: var(--polly-text-muted);
+  }
+
+  .actions_daofbw {
+    padding: var(--polly-space-xs) var(--polly-space-sm);
+    border-bottom: var(--polly-border-width-default) solid var(--polly-border);
+  }
+
+  .actionBtn_daofbw {
+    display: inline-block;
+    padding: var(--polly-space-xs) var(--polly-space-sm);
+    border-radius: var(--polly-radius-sm);
+    font-family: inherit;
+    font-size: var(--polly-text-xs);
+    color: var(--polly-accent);
+    cursor: pointer;
+    text-align: center;
+    background: none;
+    border: none;
+    width: 100%;
+  }
+
+  .actionBtn_daofbw:hover {
+    background-color: var(--polly-surface-sunken);
+  }
+
+  .option_daofbw {
+    display: block;
+    padding: var(--polly-space-sm) var(--polly-space-md);
+    font-family: inherit;
+    font-size: var(--polly-text-sm);
+    color: var(--polly-text);
+    text-align: left;
+    cursor: pointer;
+    background: none;
+    border: none;
+    width: 100%;
+  }
+
+  .option_daofbw:hover {
+    background-color: var(--polly-surface-sunken);
+  }
+
+  .optionSelected_daofbw {
+    background-color: color-mix(in srgb, var(--polly-accent) 8%, var(--polly-surface));
+  }
+
+  .optionCheck_daofbw {
+    accent-color: var(--polly-accent);
+    margin-right: var(--polly-space-sm);
+    vertical-align: middle;
+    pointer-events: none;
+  }
+}
+
 /* src/polly-ui/Badge.module.css */
 @layer polly-components {
   .badge_cZd0Aw {
@@ -203,64 +388,6 @@
   }
 }
 
-/* src/polly-ui/Layout.module.css */
-@layer polly-components {
-  .layout_QgwWPg {
-    --l-cols: none;
-    --l-rows: none;
-    --l-gap: 0;
-    --l-p: 0;
-    --l-h: auto;
-    --l-mh: auto;
-    --l-mis: none;
-    --l-ji: stretch;
-    --l-ai: start;
-    --l-jc: normal;
-    --l-ac: normal;
-    --l-js: auto;
-    --l-as: auto;
-    --l-flow: row;
-    --l-arows: auto;
-    --l-acols: auto;
-    --l-col: auto;
-    display: grid;
-    box-sizing: border-box;
-    max-inline-size: var(--l-mis);
-    grid-template-columns: var(--l-cols);
-    grid-template-rows: var(--l-rows);
-    gap: var(--l-gap);
-    padding: var(--l-p);
-    height: var(--l-h);
-    min-height: var(--l-mh);
-    justify-items: var(--l-ji);
-    align-items: var(--l-ai);
-    justify-content: var(--l-jc);
-    align-content: var(--l-ac);
-    justify-self: var(--l-js);
-    align-self: var(--l-as);
-    grid-auto-flow: var(--l-flow);
-    grid-auto-rows: var(--l-arows);
-    grid-auto-columns: var(--l-acols);
-    grid-column: var(--l-col);
-    inline-size: 100%;
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-  }
-
-  .inline_QgwWPg {
-    display: inline-grid;
-    inline-size: auto;
-  }
-
-  @media (max-width: 640px) {
-    .stackOnMobile_QgwWPg {
-      grid-template-columns: 1fr;
-      grid-auto-flow: row;
-      grid-column: auto;
-    }
-  }
-}
-
 /* src/polly-ui/Surface.module.css */
 @layer polly-components {
   .surface_pQCFqA {
@@ -269,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);
@@ -288,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);
   }
 
@@ -301,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);
   }
 }
 
@@ -361,6 +493,55 @@
   }
 }
 
+/* src/polly-ui/Cluster.module.css */
+@layer polly-components {
+  .cluster_pNLz5g {
+    --c-gap: 0;
+    --c-p: 0;
+    --c-jc: flex-start;
+    --c-ai: center;
+    display: flex;
+    box-sizing: border-box;
+    gap: var(--c-gap);
+    padding: var(--c-p);
+    justify-content: var(--c-jc);
+    align-items: var(--c-ai);
+    flex-wrap: wrap;
+  }
+
+  .inline_pNLz5g {
+    display: inline-flex;
+  }
+}
+
+/* src/polly-ui/Code.module.css */
+@layer polly-components {
+  .code_Vc8yiw {
+    font-family: var(--polly-font-mono);
+    font-size: var(--polly-text-sm);
+    padding: .1em var(--polly-space-xs);
+    border-radius: var(--polly-radius-sm);
+    background-color: var(--polly-surface-sunken);
+    color: var(--polly-text);
+    word-break: break-word;
+  }
+
+  .block_Vc8yiw {
+    padding: var(--polly-space-md);
+    border-radius: var(--polly-radius-md);
+    background-color: var(--polly-surface-sunken);
+    overflow-x: auto;
+    margin: 0;
+  }
+
+  .block_Vc8yiw code {
+    font-family: var(--polly-font-mono);
+    font-size: var(--polly-text-sm);
+    color: var(--polly-text);
+    white-space: pre;
+  }
+}
+
 /* src/polly-ui/Collapsible.module.css */
 @layer polly-components {
   .collapsible_sEhnPw {
@@ -530,133 +711,6 @@
   }
 }
 
-/* src/polly-ui/Dropdown.module.css */
-@layer polly-components {
-  .dropdown_HX48zA {
-    position: relative;
-    display: inline-block;
-  }
-
-  .trigger_HX48zA {
-    display: inline-block;
-  }
-
-  .menu_HX48zA {
-    position: absolute;
-    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);
-    background-color: var(--polly-surface);
-    box-shadow: var(--polly-shadow-md);
-    box-sizing: border-box;
-    overflow-y: auto;
-    min-width: 160px;
-    max-height: 280px;
-    top: 100%;
-    left: 0;
-  }
-
-  .alignRight_HX48zA {
-    left: auto;
-    right: 0;
-  }
-}
-
-/* src/polly-ui/Select.module.css */
-@layer polly-components {
-  .select_daofbw {
-    display: inline-block;
-  }
-
-  .label_daofbw {
-    display: block;
-    margin-bottom: var(--polly-space-xs);
-    font-size: var(--polly-text-sm);
-    font-weight: var(--polly-weight-medium);
-    color: var(--polly-text-muted);
-  }
-
-  .trigger_daofbw {
-    display: inline-block;
-    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);
-    text-align: left;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 140px;
-  }
-
-  .trigger_daofbw:disabled {
-    opacity: var(--polly-opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  .placeholder_daofbw {
-    color: var(--polly-text-muted);
-  }
-
-  .actions_daofbw {
-    padding: var(--polly-space-xs) var(--polly-space-sm);
-    border-bottom: var(--polly-border-width-default) solid var(--polly-border);
-  }
-
-  .actionBtn_daofbw {
-    display: inline-block;
-    padding: var(--polly-space-xs) var(--polly-space-sm);
-    border-radius: var(--polly-radius-sm);
-    font-family: inherit;
-    font-size: var(--polly-text-xs);
-    color: var(--polly-accent);
-    cursor: pointer;
-    text-align: center;
-    background: none;
-    border: none;
-    width: 100%;
-  }
-
-  .actionBtn_daofbw:hover {
-    background-color: var(--polly-surface-sunken);
-  }
-
-  .option_daofbw {
-    display: block;
-    padding: var(--polly-space-sm) var(--polly-space-md);
-    font-family: inherit;
-    font-size: var(--polly-text-sm);
-    color: var(--polly-text);
-    text-align: left;
-    cursor: pointer;
-    background: none;
-    border: none;
-    width: 100%;
-  }
-
-  .option_daofbw:hover {
-    background-color: var(--polly-surface-sunken);
-  }
-
-  .optionSelected_daofbw {
-    background-color: color-mix(in srgb, var(--polly-accent) 8%, var(--polly-surface));
-  }
-
-  .optionCheck_daofbw {
-    accent-color: var(--polly-accent);
-    margin-right: var(--polly-space-sm);
-    vertical-align: middle;
-    pointer-events: none;
-  }
-}
-
 /* src/polly-ui/Skeleton.module.css */
 @layer polly-components {
   @keyframes pollyShimmer_gpBHJA {
@@ -736,6 +790,78 @@
   }
 }
 
+/* src/polly-ui/Text.module.css */
+@layer polly-components {
+  .text_75HKdQ {
+    color: var(--polly-text);
+    font-family: inherit;
+  }
+
+  .muted_75HKdQ {
+    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);
+  }
+
+  .sm_75HKdQ {
+    font-size: var(--polly-text-sm);
+  }
+
+  .md_75HKdQ {
+    font-size: var(--polly-text-md);
+  }
+
+  .lg_75HKdQ {
+    font-size: var(--polly-text-lg);
+  }
+
+  .xl_75HKdQ {
+    font-size: var(--polly-text-xl);
+  }
+
+  .normal_75HKdQ {
+    font-weight: var(--polly-weight-normal);
+  }
+
+  .medium_75HKdQ {
+    font-weight: var(--polly-weight-medium);
+  }
+
+  .bold_75HKdQ {
+    font-weight: var(--polly-weight-bold);
+  }
+}
+
 /* src/polly-ui/TextInput.module.css */
 @layer polly-components {
   .input_ez4_Vg {