@pontive/pontkit-core 1.0.0

package/dist/components/renderers/auth/qr-code/_qr-code.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { QrCodeProps, QrCodeParts, ErrorCorrectionLevel } from './qr-code.types';
+export declare class PontQrCode extends LitElement implements QrCodeProps {
+    static readonly ROOT = "qr-code";
+    static readonly QR_CANVAS = "canvas";
+    static readonly OVERLAY = "overlay";
+    static readonly REAPPEAR_BUTTON = "reappear-button";
+    static readonly TAG: string;
+    static readonly PARTS: Record<QrCodeParts, string>;
+    seed: string;
+    customId?: string;
+    url: string;
+    timeout: number;
+    reappearButtonText: string;
+    disabled: boolean;
+    errorCorrection: ErrorCorrectionLevel;
+    private _obscured;
+    private _timer;
+    private _canvasElement;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get canvasId(): string;
+    get overlayId(): string;
+    get reappearButtonId(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _startTimer;
+    private _clearTimer;
+    private _renderQR;
+    private _handleReappear;
+    private emit;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+    private _getReappearButtonVariant;
+}

package/dist/components/renderers/auth/qr-code/index.d.ts

@@ -0,0 +1,7 @@
+import { PontQrCode } from './_qr-code';
+export { PontQrCode };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-qr-code": PontQrCode;
+    }
+}

package/dist/components/renderers/auth/qr-code/qr-code.defs.d.ts

@@ -0,0 +1,2 @@
+import { QrCodeProps } from './qr-code.types';
+export declare const QR_CODE_DEFAULT_PROPS: Omit<QrCodeProps, "seed">;

package/dist/components/renderers/auth/qr-code/qr-code.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/components/renderers/auth/qr-code/qr-code.types.d.ts

@@ -0,0 +1,11 @@
+export type ErrorCorrectionLevel = "L" | "M" | "Q" | "H";
+export type QrCodeProps = {
+    seed: string;
+    customId?: string;
+    url: string;
+    timeout: number;
+    reappearButtonText: string;
+    disabled: boolean;
+    errorCorrection: ErrorCorrectionLevel;
+};
+export type QrCodeParts = "root" | "canvas" | "overlay" | "reappearButton";

package/dist/components/renderers/auth/recovery-codes/_recovery-codes.d.ts

@@ -0,0 +1,27 @@
+import { BaseElement } from '../../..';
+import { RecoveryCodesProps, RecoveryCodesParts } from './recovery-codes.types';
+export declare class PontRecoveryCodes extends BaseElement implements RecoveryCodesProps {
+    static readonly ROOT = "recovery-codes";
+    static readonly CARD = "card";
+    static readonly TITLE = "title";
+    static readonly SUBTITLE = "subtitle";
+    static readonly CODES_LIST = "codes-list";
+    static readonly CODE_ITEM = "code-item";
+    static readonly BUTTONS = "buttons";
+    static readonly COPY_BUTTON = "copy-button";
+    static readonly DOWNLOAD_BUTTON = "download-button";
+    static readonly TOOLTIP = "tooltip";
+    static readonly TAG: string;
+    static readonly PARTS: Record<RecoveryCodesParts, string>;
+    title: string;
+    subtitle: string;
+    codes: string[];
+    disabled: boolean;
+    private _copied;
+    private _copyTimeout;
+    protected createRenderRoot(): this;
+    private _handleCopyAll;
+    private _handleDownload;
+    private emit;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/auth/recovery-codes/index.d.ts

@@ -0,0 +1,7 @@
+import { PontRecoveryCodes } from './_recovery-codes';
+export { PontRecoveryCodes };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-recovery-codes": PontRecoveryCodes;
+    }
+}

package/dist/components/renderers/auth/recovery-codes/recovery-codes.defs.d.ts

@@ -0,0 +1,2 @@
+import { RecoveryCodesProps } from './recovery-codes.types';
+export declare const RECOVERY_CODES_DEFAULT_PROPS: RecoveryCodesProps;

package/dist/components/renderers/auth/recovery-codes/recovery-codes.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/components/renderers/auth/recovery-codes/recovery-codes.types.d.ts

@@ -0,0 +1,7 @@
+export type RecoveryCodesProps = {
+    title: string;
+    subtitle: string;
+    codes: string[];
+    disabled: boolean;
+};
+export type RecoveryCodesParts = "root" | "card" | "title" | "subtitle" | "codesList" | "codeItem" | "buttons" | "copyButton" | "downloadButton" | "tooltip";

package/dist/components/renderers/auth/secret/_secret.d.ts

@@ -0,0 +1,27 @@
+import { BaseElement } from '../../..';
+import { SecretProps, SecretParts } from './secret.types';
+export declare class PontSecret extends BaseElement implements SecretProps {
+    static readonly ROOT = "secret";
+    static readonly CARD = "card";
+    static readonly TITLE = "title";
+    static readonly INPUT_GROUP = "input-group";
+    static readonly COPY_BUTTON = "copy-button";
+    static readonly METADATA = "metadata";
+    static readonly ISSUER = "issuer";
+    static readonly ACCOUNT = "account";
+    static readonly TOOLTIP = "tooltip";
+    static readonly TAG: string;
+    static readonly PARTS: Record<SecretParts, string>;
+    title: string;
+    secret: string;
+    issuer: string;
+    account: string;
+    secretLabel: string;
+    disabled: boolean;
+    private _copied;
+    private _copyTimeout;
+    protected createRenderRoot(): this;
+    private _handleCopy;
+    private emit;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/auth/secret/index.d.ts

@@ -0,0 +1,7 @@
+import { PontSecret } from './_secret';
+export { PontSecret };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-secret": PontSecret;
+    }
+}

package/dist/components/renderers/auth/secret/secret.defs.d.ts

@@ -0,0 +1,2 @@
+import { SecretProps } from './secret.types';
+export declare const SECRET_DEFAULT_PROPS: SecretProps;

package/dist/components/renderers/auth/secret/secret.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/components/renderers/auth/secret/secret.types.d.ts

@@ -0,0 +1,9 @@
+export type SecretProps = {
+    title: string;
+    secret: string;
+    issuer: string;
+    account: string;
+    secretLabel: string;
+    disabled: boolean;
+};
+export type SecretParts = "root" | "card" | "title" | "inputGroup" | "copyButton" | "metadata" | "issuer" | "account" | "tooltip";

package/dist/components/renderers/feedback/alert/_alert.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { AlertPalette, AlertPart, AlertStatus, AlertVariant, PontAlertProps as Props } from './alert.types';
+/**
+ * Displays a brief, important message for users in an unobtrusive manner.
+ *
+ * @part alert - pont-callout: root
+ * @part alert-icon - svg
+ * @part alert-title - pont-callout-title
+ * @part alert-description - pont-callout-description
+ */
+export declare class PontAlert extends LitElement implements Props {
+    static readonly ROOT = "alert";
+    static readonly ICON = "icon";
+    static readonly TITLE = "title";
+    static readonly DESCRIPTION = "description";
+    static readonly TAG: string;
+    static readonly PARTS: Record<AlertPart, string>;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * Status communicated by the alert component.
+     */
+    status: AlertStatus;
+    /**
+     * Color palette used by the alert component.
+     */
+    palette: AlertPalette;
+    /**
+     * Visual variant of the alert component.
+     */
+    variant: AlertVariant;
+    /**
+     * Text used in the title part of alert.
+     */
+    private _title?;
+    private get _defaultTitle();
+    get title(): string;
+    set title(value: string | null | undefined);
+    /**
+     * Text used in the description part of alert.
+     */
+    description?: string;
+    /**
+     * Whether the icon part of alert is rendered.
+     */
+    icon?: boolean;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get iconId(): string;
+    get titleId(): string;
+    get descriptionId(): string;
+    private get _rootVariant();
+    private _renderIcon;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/feedback/alert/alert.defs.d.ts

@@ -0,0 +1,7 @@
+import { TemplateResult } from '../../../../../node_modules/lit';
+import { AlertPalette, AlertStatus, AlertVariant, PontAlertProps } from './alert.types';
+export declare const ALERT_ICON_FRAGMENTS: Record<AlertStatus, TemplateResult<2>>;
+export declare const DEFAULT_ALERT_PROPS: Omit<PontAlertProps, "seed" | "title">;
+export declare const ALERT_STATUSES: AlertStatus[];
+export declare const ALERT_PALETTES: AlertPalette[];
+export declare const ALERT_VARIANTS: AlertVariant[];

package/dist/components/renderers/feedback/alert/alert.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Status: Story;
+export declare const Palette: Story;
+export declare const Variant: Story;
+export declare const Title: Story;
+export declare const Description: Story;
+export declare const Icon: Story;

package/dist/components/renderers/feedback/alert/alert.types.d.ts

@@ -0,0 +1,14 @@
+export type AlertPart = "root" | "icon" | "title" | "description";
+export type AlertStatus = "default" | "error" | "warning" | "success" | "info";
+export type AlertPalette = "default" | "base" | "brand";
+export type AlertVariant = "default" | "tonal" | "outline";
+export type PontAlertProps = {
+    seed: string;
+    customId?: string;
+    status: AlertStatus;
+    palette: AlertPalette;
+    variant: AlertVariant;
+    title: string;
+    description?: string;
+    icon?: boolean;
+};

package/dist/components/renderers/feedback/alert/index.d.ts

@@ -0,0 +1,7 @@
+import { PontAlert } from './_alert';
+export { PontAlert };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-alert": PontAlert;
+    }
+}

package/dist/components/renderers/feedback/countdown/_countdown.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../..';
+import { CountdownProps as Props } from './countdown.types';
+export declare class PontCountdown extends BaseElement implements Props {
+    get _containerElement(): HTMLLIElement | null;
+    content: string;
+    duration: number;
+    redirectUrl: string;
+    id: string;
+    private seconds;
+    private timerId;
+    protected createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private initializeCountdown;
+    private startTimer;
+    private completeCountdown;
+    private clearTimer;
+    private renderContent;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/feedback/countdown/countdown.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const CustomContent: Story;
+export declare const LongDuration: Story;

package/dist/components/renderers/feedback/countdown/countdown.types.d.ts

@@ -0,0 +1,6 @@
+export type CountdownProps = {
+    content?: string;
+    duration?: number;
+    redirectUrl?: string;
+    id?: string;
+};

package/dist/components/renderers/feedback/countdown/index.d.ts

@@ -0,0 +1,7 @@
+import { PontCountdown } from './_countdown';
+export { PontCountdown };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-countdown": PontCountdown;
+    }
+}

package/dist/components/renderers/feedback/index.d.ts

@@ -0,0 +1,2 @@
+export * from './alert';
+export * from './countdown';

package/dist/components/renderers/index.d.ts

@@ -0,0 +1,6 @@
+export * from './auth';
+export * from './feedback';
+export * from './layout';
+export * from './navigation';
+export * from './typography';
+export * from './visuals';

package/dist/components/renderers/layout/block/_block.d.ts

@@ -0,0 +1,41 @@
+import { BaseElement } from '../../../wrappers/base-element/base-element';
+import { BlockAlignment, BlockProps } from './block.types';
+/**
+ * The screen shell: the page canvas plus the card its content sits in.
+ *
+ * Exactly one `<pont-block>` exists per screen, always as the document's single
+ * top-level element, and it never nests. It owns page-level presentation — the
+ * viewport-height backdrop, the surface colour, the card ring and radius — via
+ * the `--pont-block-*` token family, which is why it is a distinct element rather
+ * than a flag on `<pont-container>`: a container is a repeatable layout group and
+ * shares none of those concerns.
+ */
+export declare class PontBlock extends BaseElement implements BlockProps {
+    id: string;
+    /**
+     * A block is always a column — it never switches direction the way a
+     * container does — so `align` is the horizontal axis (where its children sit
+     * across the card) and `justify` the vertical one (where the card's content
+     * sits within a viewport-tall shell).
+     *
+     * Both are rendered onto the card as data attributes rather than reflected
+     * onto the host, and block.css maps them to values. Rendering the attribute
+     * keeps it a plain function of the property, so the property and attribute
+     * paths cannot disagree.
+     */
+    align: BlockAlignment;
+    justify: BlockAlignment;
+    /**
+     * The watermark is baked into the shell rather than emitted as a `watermark`
+     * element in the render spec, because a spec element is deletable in the
+     * screen designer — the author is exactly who the entitlement gates. Whether
+     * it renders is read from context, so `pont-block` exposes no property or
+     * attribute for it. See context/branding-context.ts.
+     */
+    private branding;
+    protected createRenderRoot(): this;
+    protected firstUpdated(): Promise<void>;
+    protected updated(): Promise<void>;
+    private _renderWatermark;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/layout/block/block.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const WithNestedContainer: Story;
+export declare const WithoutWatermark: Story;
+export declare const Alignment: Story;

package/dist/components/renderers/layout/block/block.types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Where the shell places its content. A block is always a column, so `align`
+ * is the horizontal axis and `justify` the vertical one.
+ */
+export type BlockAlignment = "start" | "center" | "end";
+export type BlockProps = {
+    id?: string;
+    align?: BlockAlignment;
+    justify?: BlockAlignment;
+};

package/dist/components/renderers/layout/block/index.d.ts

@@ -0,0 +1,7 @@
+import { PontBlock } from './_block';
+export { PontBlock };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-block": PontBlock;
+    }
+}

package/dist/components/renderers/layout/container/_container.d.ts

@@ -0,0 +1,24 @@
+import { BaseElement } from '../../../wrappers/base-element/base-element';
+import { ContainerProps, ContainerType } from './container.types';
+/**
+ * A repeatable layout group: a flex row or column that nests anywhere inside a
+ * screen. The screen shell itself is `<pont-block>`, not a container with a flag.
+ */
+export declare class PontContainer extends BaseElement implements ContainerProps {
+    id: string;
+    type: ContainerType;
+    private design;
+    protected createRenderRoot(): this;
+    /**
+     * `:scope >` ensures the container finds itself before any container children.
+     */
+    private get innerElement();
+    protected firstUpdated(): Promise<void>;
+    protected updated(): Promise<void>;
+    /**
+     * Neither attribute is a reactive property, so writing them here cannot
+     * re-enter the update cycle.
+     */
+    private syncDesignState;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/layout/container/container.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Nested: Story;
+export declare const FlexRow: Story;
+/**
+ * On the designer canvas a container has to be findable and grabbable, which
+ * it is not at runtime: it draws nothing, and it is full-width, so a nested
+ * group sits exactly on top of its parent.
+ *
+ * Design mode adds a muted dotted outline — the same authoring-scaffolding
+ * treatment as the logo placeholder's dashed frame — plus a fixed inset at
+ * every level. The inset is what makes nesting legible and, more importantly,
+ * selectable: it leaves a strip of parent showing that a click or a drop can
+ * land on. Neither reaches a served screen.
+ */
+export declare const DesignMode: Story;

package/dist/components/renderers/layout/container/container.types.d.ts

@@ -0,0 +1,7 @@
+export type ContainerType = "flex_column" | "flex_row";
+export type ContainerAlignment = "start" | "center" | "end";
+export type ContainerProps = {
+    id?: string;
+    type?: ContainerType;
+    alignment?: ContainerAlignment;
+};

package/dist/components/renderers/layout/container/index.d.ts

@@ -0,0 +1,7 @@
+import { PontContainer } from './_container';
+export { PontContainer };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-container": PontContainer;
+    }
+}

package/dist/components/renderers/layout/divider/_divider.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { DividerPart, PontDividerProps as Props } from './divider.types';
+/**
+ * Visually separates sections, accepting an optional inline label.
+ *
+ * @part divider - pont-field-separator: root
+ */
+export declare class PontDivider extends LitElement implements Props {
+    static readonly ROOT = "divider";
+    static readonly TAG: string;
+    static readonly PARTS: Record<DividerPart, string>;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * Optional text used as the divider label.
+     */
+    label?: string;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/layout/divider/divider.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Label: Story;

package/dist/components/renderers/layout/divider/divider.types.d.ts

@@ -0,0 +1,6 @@
+export type DividerPart = "root";
+export type PontDividerProps = {
+    seed: string;
+    customId?: string;
+    label?: string;
+};

package/dist/components/renderers/layout/divider/index.d.ts

@@ -0,0 +1,7 @@
+import { PontDivider } from './_divider';
+export { PontDivider };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-divider": PontDivider;
+    }
+}

package/dist/components/renderers/layout/gap/_gap.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '../../..';
+import { GapProps, GapType } from './gap.types';
+export declare class PontGap extends BaseElement implements GapProps {
+    size: string;
+    type: GapType;
+    id: string;
+    protected createRenderRoot(): this;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/layout/gap/gap.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;

package/dist/components/renderers/layout/gap/gap.types.d.ts

@@ -0,0 +1,6 @@
+export type GapType = "vertical" | "horizontal";
+export type GapProps = {
+    size?: string;
+    id?: string;
+    type?: GapType;
+};

package/dist/components/renderers/layout/gap/index.d.ts

@@ -0,0 +1,7 @@
+import { PontGap } from './_gap';
+export { PontGap };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-gap": PontGap;
+    }
+}

package/dist/components/renderers/layout/header/_header.d.ts

@@ -0,0 +1,28 @@
+import { BaseElement } from '../../..';
+import { HeaderAlignment, HeaderProps } from './header.types';
+/**
+ * Groups a screen's title and subtitle into one block, so the pair moves and
+ * aligns as a unit.
+ *
+ * The group is always a column — it holds a title above a subtitle and nothing
+ * else — so it needs no direction switch the way `<pont-container>` does.
+ */
+export declare class PontHeader extends BaseElement implements HeaderProps {
+    id: string;
+    /**
+     * Where the lines sit across the header. Rendered onto the content box as a
+     * data attribute, which header.css maps to both `align-items` and
+     * `text-align`: aligning the boxes without the text inside them leaves a
+     * centred header whose own lines still read as left-aligned.
+     */
+    align: HeaderAlignment;
+    /**
+     * Keyed on the attribute rather than `part`, because `part` carries the
+     * author's element id when one is set and an id is not always a valid
+     * attribute-selector value — an id like `7f3a` made this lookup throw.
+     */
+    private get innerElement();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(): void;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/layout/header/header.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Alignment: Story;
+export declare const AuthHeader: Story;

package/dist/components/renderers/layout/header/header.types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * How the header lines sit relative to one another. A header is always a
+ * column, so this is the horizontal axis only.
+ */
+export type HeaderAlignment = "start" | "center" | "end";
+export type HeaderProps = {
+    id?: string;
+    align?: HeaderAlignment;
+};

package/dist/components/renderers/layout/header/index.d.ts

@@ -0,0 +1,7 @@
+import { PontHeader } from './_header';
+export { PontHeader };
+declare global {
+    interface HTMLElementTagNameMap {
+        "pont-header": PontHeader;
+    }
+}

package/dist/components/renderers/layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from './block';
+export * from './container';
+export * from './divider';
+export * from './gap';
+export * from './header';