@saasbase-io/core-elements 1.3.1 → 1.5.0

package/dist/components/renderers/_updated/form/_form-separator.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { SbFormSeparatorProps } from './form.types';
+/**
+ * Visual divider to separate sections inside a form. Accepts optional inline
+ * text content.
+ * @element sb-form-separator
+ *
+ * @slot form-separator (rtg-field-separator)
+ */
+export declare class SbFormSeparator extends LitElement implements SbFormSeparatorProps {
+    private static readonly _ROOT;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+    };
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The optional text used as the separator inline content.
+     */
+    content?: string;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/form/_form-switch.d.ts

@@ -0,0 +1,78 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { FormSwitchButtonSize, FormSwitchButtonVariant, FormSwitchVariant, SbFormSwitchProps } from './form.types';
+/**
+ * Clickable element for switching between auth widgets.
+ * @element sb-form-switch
+ *
+ * @slot form-switch (rtg-field-description/rtg-button)
+ * @slot form-switch-link (a): 'clickable' part when variant is `"default"`
+ */
+export declare class SbFormSwitch extends LitElement implements SbFormSwitchProps {
+    private static readonly _ROOT;
+    private static readonly _LINK;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        link: string;
+    };
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The variant of the form switch, determining whether a text-based link or
+     * button element is rendered.
+     */
+    variant: FormSwitchVariant;
+    /**
+     * The text used as the form switch link/button label.
+     */
+    label: string;
+    /**
+     * Optional text which precedes the switch link in a `"default"` form switch.
+     */
+    prompt?: string;
+    /**
+     * When provided, the switch element reflects a disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * The visual variant of the form switch button.
+     */
+    buttonVariant: FormSwitchButtonVariant;
+    /**
+     * The size of the form switch button.
+     */
+    buttonSize: FormSwitchButtonSize;
+    /**
+     * The event identifier/name as defined in `auth-svc`.
+     */
+    event?: string;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the link anchor element. Always derived from `rootId` with the
+     * link part segment appended.
+     */
+    get linkId(): string;
+    /**
+     * Returns the link template for a `"default"` form switch.
+     */
+    private _renderLink;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/form/form.stories/form-separator.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 Content: Story;

package/dist/components/renderers/_updated/form/form.stories/form-switch.stories.d.ts

@@ -0,0 +1,10 @@
+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 Variant: Story;
+export declare const Label: Story;
+export declare const Prompt: Story;
+export declare const Disabled: Story;
+export declare const Button: Story;

package/dist/components/renderers/_updated/form/form.types.d.ts

@@ -0,0 +1,20 @@
+import { RtgButtonBasicSize, RtgButtonBasicVariant } from '../../../../types';
+export type SbFormSeparatorProps = {
+    seed: string;
+    childId?: string;
+    content?: string;
+};
+export type FormSwitchVariant = "default" | "button";
+export type FormSwitchButtonVariant = RtgButtonBasicVariant;
+export type FormSwitchButtonSize = RtgButtonBasicSize;
+export type SbFormSwitchProps = {
+    seed: string;
+    childId?: string;
+    variant: FormSwitchVariant;
+    label: string;
+    prompt?: string;
+    disabled?: boolean;
+    buttonVariant: FormSwitchButtonVariant;
+    buttonSize: FormSwitchButtonSize;
+    event?: string;
+};

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

@@ -0,0 +1,9 @@
+import { SbFormSeparator } from './_form-separator';
+import { SbFormSwitch } from './_form-switch';
+export { SbFormSeparator, SbFormSwitch };
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-form-separator": SbFormSeparator;
+        "sb-form-switch": SbFormSwitch;
+    }
+}

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

@@ -1,3 +1,6 @@
+export * from './form';
+export * from './passkey-button';
+export * from './provider';
 export * from './sb-error';
 export * from './sb-gap';
 export * from './sb-header';
@@ -6,3 +9,4 @@ export * from './sb-otp';
 export * from './sb-subtitle';
 export * from './sb-container';
 export * from './sb-title';
+export * from './watermark';

package/dist/components/renderers/_updated/passkey-button/_passkey-button.d.ts

@@ -0,0 +1,112 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { PasskeyButtonProps, PasskeyButtonSize, PasskeyButtonSpinnerAlign, PasskeyButtonVariant } from './passkey-button.types';
+/**
+ * A button for passkey authentication.
+ * @element sb-passkey-button
+ *
+ * @part passkey-button (rtg-button)
+ * @part passkey-button-spinner (rtg-spinner): loading indicator
+ *
+ * @fires sb-passkey-button:click { id, event }
+ */
+export declare class SbPasskeyButton extends LitElement implements PasskeyButtonProps {
+    private static readonly _ROOT;
+    private static readonly _SPINNER;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        spinner: string;
+    };
+    /**
+     * The name of the custom event fired on click.
+     */
+    static get clickEventName(): string;
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The visual variant of the button.
+     */
+    variant: PasskeyButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: PasskeyButtonSize;
+    /**
+     * The text used as the button label.
+     */
+    label: string;
+    /**
+     * Whether the loading spinner should be rendered before or after the label.
+     */
+    spinnerAlign: PasskeyButtonSpinnerAlign;
+    /**
+     * When provided, the button reflects a disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * When provided, a loading state is applied.
+     */
+    loading?: boolean;
+    /**
+     * The event identifier/name as defined in auth service.
+     */
+    event?: string;
+    /**
+     * Whether the button is in a loading state.
+     */
+    private _loading;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the spinner element, derived from `rootId` with the spinner
+     * part name appended.
+     */
+    get spinnerId(): string;
+    /**
+     * The loading state, derived from the private `_loading` and `loading` prop.
+     */
+    get isLoading(): boolean | undefined;
+    /**
+     * Adds the click event listener.
+     */
+    connectedCallback(): void;
+    /**
+     * Removes the click event listener.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Defines and dispatches the click event.
+     */
+    private _dispatchClick;
+    /**
+     * Emits the provided `event` to the auth service to process.
+     */
+    private _emitClickEvent;
+    /**
+     * Handles the click event, preventing execution when disabled/loading, firing
+     * the click event, and emitting to auth service.
+     */
+    private _handleClick;
+    /**
+     * Returns the loading spinner template.
+     */
+    private _renderSpinner;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/passkey-button/index.d.ts

@@ -0,0 +1,7 @@
+import { SbPasskeyButton } from './_passkey-button';
+export { SbPasskeyButton };
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-passkey-button": SbPasskeyButton;
+    }
+}

package/dist/components/renderers/_updated/passkey-button/passkey-button.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 Variant: Story;
+export declare const Size: Story;
+export declare const Label: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const SpinnerAlign: Story;

package/dist/components/renderers/_updated/passkey-button/passkey-button.types.d.ts

@@ -0,0 +1,15 @@
+import { IconAlign, RtgButtonBasicSize, RtgButtonBasicVariant } from '../../../../types';
+export type PasskeyButtonVariant = RtgButtonBasicVariant;
+export type PasskeyButtonSize = RtgButtonBasicSize;
+export type PasskeyButtonSpinnerAlign = IconAlign;
+export type PasskeyButtonProps = {
+    seed: string;
+    childId?: string;
+    variant: PasskeyButtonVariant;
+    size: PasskeyButtonSize;
+    label: string;
+    spinnerAlign: PasskeyButtonSpinnerAlign;
+    disabled?: boolean;
+    loading?: boolean;
+    event?: string;
+};

package/dist/components/renderers/_updated/provider/_provider-button.d.ts

@@ -0,0 +1,139 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { Provider, ProviderButtonContent, ProviderButtonIconAlign, ProviderButtonProps, ProviderButtonSize, ProviderButtonVariant } from './provider.types';
+/**
+ * A button for auth provider authentication.
+ * @element sb-provider-button
+ *
+ * @part provider-button (rtg-button)
+ * @part provider-button-icon (svg/rtg-spinner): logo icon or loading indicator
+ *
+ * @fires sb-provider-button:click { id, provider, event }
+ */
+export declare class SbProviderButton extends LitElement implements ProviderButtonProps {
+    private static readonly _ROOT;
+    private static readonly _ICON;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        icon: string;
+    };
+    /**
+     * The name of the custom event fired on click.
+     */
+    static get clickEventName(): string;
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The auth provider associated to this button.
+     */
+    provider: Provider;
+    /**
+     * Whether the button content is an icon, label, or both.
+     */
+    content: ProviderButtonContent;
+    /**
+     * The visual variant of the button.
+     */
+    variant: ProviderButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: ProviderButtonSize;
+    /**
+     * The text of the button label, preceding the provider name.
+     */
+    prompt: string;
+    /**
+     * Whether the icon is rendered before or after (`"start"` or `"end"`) the
+     * button label.
+     */
+    iconAlign: ProviderButtonIconAlign;
+    /**
+     * The text of the entire button label, overriding the default `prompt` and
+     * provider name label template.
+     */
+    label?: string;
+    /**
+     * When provided, the button reflects a disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * When provided, a loading state is applied.
+     */
+    loading?: boolean;
+    /**
+     * The event identifier/name as defined in auth service.
+     */
+    event?: string;
+    /**
+     * Whether the button is in a loading state.
+     */
+    private _loading;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name, `seed`, and `provider`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the icon (logo and spinner) element, derived from `rootId` with
+     * the icon part name appended.
+     */
+    get iconId(): string;
+    /**
+     * The `class` given to the icon part handling button alignment.
+     */
+    private get iconCn();
+    /**
+     * The loading state, derived from the private `_loading` and `loading` prop.
+     */
+    get isLoading(): boolean | undefined;
+    /**
+     * Adds the click event listener.
+     */
+    connectedCallback(): void;
+    /**
+     * Removes the click event listener.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Defines and dispatches the click event.
+     */
+    private _dispatchClick;
+    /**
+     * Emits the provided `event` to the auth service to process.
+     */
+    private _emitClickEvent;
+    /**
+     * Handles the click event, preventing execution when disabled/loading, firing
+     * the click event, and emitting to auth service.
+     */
+    private _handleClick;
+    /**
+     * Returns the provider logo icon template.
+     */
+    private _renderLogo;
+    /**
+     * Returns the loading spinner icon template.
+     */
+    private _renderSpinner;
+    /**
+     * Returns the spinner template if loading, and the logo template if the
+     * `content` prop requires the icon part.
+     */
+    private _renderIcon;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,7 @@
+import { SbProviderButton } from './_provider-button';
+export { SbProviderButton };
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-provider-button": SbProviderButton;
+    }
+}

package/dist/components/renderers/_updated/provider/provider.defs.d.ts

@@ -0,0 +1,3 @@
+import { Provider } from './provider.types';
+export declare const PROVIDER_NAMES: Record<Provider, string>;
+export declare const PROVIDER_ICON_PATHS: Record<Provider, string>;

package/dist/components/renderers/_updated/provider/provider.stories/provider-button.stories.d.ts

@@ -0,0 +1,14 @@
+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 Provider: Story;
+export declare const Content: Story;
+export declare const Variant: Story;
+export declare const Size: Story;
+export declare const Prompt: Story;
+export declare const IconAlign: Story;
+export declare const Label: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;

package/dist/components/renderers/_updated/provider/provider.types.d.ts

@@ -0,0 +1,20 @@
+import { IconAlign, RtgButtonBasicSize, RtgButtonBasicVariant, SbAuthProvider } from '../../../../types';
+export type Provider = SbAuthProvider;
+export type ProviderButtonContent = "icon" | "icon-label" | "label";
+export type ProviderButtonVariant = RtgButtonBasicVariant;
+export type ProviderButtonSize = RtgButtonBasicSize;
+export type ProviderButtonIconAlign = IconAlign;
+export type ProviderButtonProps = {
+    seed: string;
+    childId?: string;
+    provider: Provider;
+    content: ProviderButtonContent;
+    variant: ProviderButtonVariant;
+    size: ProviderButtonSize;
+    prompt: string;
+    iconAlign: ProviderButtonIconAlign;
+    label?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    event?: string;
+};

package/dist/components/renderers/_updated/watermark/_watermark.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { SbWatermarkProps, WatermarkBadge, WatermarkLogoAlign, WatermarkVariant } from './watermark.types';
+/**
+ * Saasbase watermark badge used in widgets.
+ * @element sb-watermark
+ *
+ * @slot watermark (rtg-badge)
+ * @slot watermark-logo (svg): Saasbase logo
+ */
+export declare class SbWatermark extends LitElement implements SbWatermarkProps {
+    private static readonly _ROOT;
+    private static readonly _LOGO;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+        logo: string;
+    };
+    /**
+     * A unique value used as a substring in the generated part/child IDs, when
+     * the `child-id` prop is not provided.
+     */
+    seed: string;
+    /**
+     * The `id` value given to the root child/part and used as the base of other
+     * child/part IDs.
+     */
+    childId?: string;
+    /**
+     * The text used as the badge label.
+     */
+    label: string;
+    /**
+     * The visual variant of the watermark, determining font and logo styles.
+     */
+    variant: WatermarkVariant;
+    /**
+     * The variant of the root child/part badge element.
+     */
+    badge: WatermarkBadge;
+    /**
+     * Whether the Saasbase logo is rendered at the `"start"` or `"end"` of the
+     * watermark (before or after the label text).
+     */
+    logoAlign: WatermarkLogoAlign;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root badge element. Equal to `childId` when provided,
+     * otherwise derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The `id` of the logo SVG element. Always derived from `rootId` with the
+     * logo part segment appended.
+     */
+    get logoId(): string;
+    /**
+     * Returns the Saasbase logo template.
+     */
+    private _renderLogo;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,7 @@
+import { SbWatermark } from './_watermark';
+export { SbWatermark };
+declare global {
+    interface HTMLElementTagNameMap {
+        "sb-watermark": SbWatermark;
+    }
+}

package/dist/components/renderers/_updated/watermark/watermark.stories.d.ts

@@ -0,0 +1,9 @@
+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;
+export declare const Variant: Story;
+export declare const Badge: Story;
+export declare const LogoAlign: Story;

package/dist/components/renderers/_updated/watermark/watermark.types.d.ts

@@ -0,0 +1,12 @@
+import { IconAlign, RtgBadgeBasicVariant } from '../../../../types';
+export type WatermarkVariant = "brand" | "theme" | "muted";
+export type WatermarkBadge = RtgBadgeBasicVariant;
+export type WatermarkLogoAlign = IconAlign;
+export type SbWatermarkProps = {
+    seed: string;
+    childId?: string;
+    label: string;
+    variant: WatermarkVariant;
+    badge: WatermarkBadge;
+    logoAlign: WatermarkLogoAlign;
+};

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

@@ -1,4 +1,3 @@
 export * from './hint';
 export * from './linear-loader';
 export * from './spinner';
-export * from './watermark';

package/dist/constants/classes.d.ts

@@ -1,4 +1,3 @@
-export declare const watermarkDefaultClass = "";
 export declare const linearLoaderClass = "sb-relative sb-overflow-hidden sb-w-1/3 sb-h-2 sb-linear-bar";
 export declare const dashboardWidthClass = "sb-min-w-[375px] sb-max-w-[609px] sb-w-[calc(100%-30px)] sm:sb-max-w-[735px] md:sb-w-[calc(100%-32px)] md:sb-max-w-[800px] lg:sb-min-w-[800px]";
 export declare const modalWidthClass = "sb-h-[100%] sb-min-w-[375px] sb-max-w-[609px] sb-w-[calc(100vw-30px)] sm:sb-max-w-[735px] md:sb-w-[calc(100vw-32px)] md:sb-max-w-[800px] lg:sb-min-w-[800px]";