@revotech-group/revotech-ui-kit 0.2.4 → 0.2.6

package/dist/src/components/ui/input/_input.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
 import { InputProps, InputAutocomplete, InputType } from './input.defs';
-
 /**
  * The `<rtg-input>` component is a text input component for forms and user data
  * entry with built-in styling and accessibility features.

package/dist/src/components/ui/input/input.d.ts

@@ -1,5 +1,4 @@
 import { Input } from './_input';
-
 export { Input };
 /**
  * A text input component for forms and user data entry with built-in styling

package/dist/src/components/ui/input/input.stories.d.ts

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

package/dist/src/components/ui/input-group/_input-group-addon.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { InputGroupAddonAlign, InputGroupAddonProps } from './input-group.defs';
+/**
+ * Displays icons, text, buttons, or other content alongside inputs.
+ *
+ * @element rtg-input-group-addon
+ * @slot input-group-addon
+ */
+export declare class InputGroupAddon extends LitElement implements InputGroupAddonProps {
+    /**
+     * The position of the addon relative to the input.
+     */
+    align: InputGroupAddonAlign;
+    /**
+     * When `true`, a border is added to the top/bottom if the addon has the
+     * block-end/block-start alignment.
+     */
+    border?: boolean;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group addon.
+     */
+    private get _addonSlot();
+    /**
+     * Appends children to the input group addon slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/_input-group-button.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import { InputGroupButtonProps, InputGroupButtonSize } from './input-group.defs';
+import { ButtonType, ButtonVariant, ButtonTarget } from '../button/button.defs';
+/**
+ * Displays buttons within input groups.
+ *
+ * @element rtg-input-group-button
+ * @slot input-group-button
+ */
+export declare class InputGroupButton extends LitElement implements InputGroupButtonProps {
+    /**
+     * The visual style of the button.
+     */
+    variant: ButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size: InputGroupButtonSize;
+    /**
+     * The type of the button.
+     */
+    type: ButtonType;
+    /**
+     * When `true`, prevents the user from interacting with the button.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the button
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The URL that the button link points to. When provided, an anchor tag
+     * (`<a>`) is rendered instead of a button.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     * Optionally provided in conjunction with `href`.
+     */
+    target?: ButtonTarget;
+    /**
+     * The user-defined "on click" handler for the button.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group button.
+     */
+    private get _buttonSlot();
+    /**
+     * Appends children to the input group button slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/_input-group-input.d.ts

@@ -0,0 +1,140 @@
+import { LitElement, PropertyValues } from 'lit';
+import { InputAutocomplete, InputType } from '../input/input.defs';
+import { InputGroupInputProps } from './input-group.defs';
+/**
+ * Replacement for `<rtg-input>` when building input groups. This component has
+ * the input group styles pre-applied and uses the unified data slot for focus
+ * state handling.
+ *
+ * @element rtg-input-group-input
+ * @slot input-group-input
+ */
+export declare class InputGroupInput extends LitElement implements InputGroupInputProps {
+    /**
+     * Hint for expected file type in file upload controls. Permitted for file.
+     */
+    accept?: string;
+    /**
+     * Hint for form autofill feature.
+     */
+    autocomplete?: InputAutocomplete;
+    /**
+     * When `true`, prevents the user from interacting with the input.
+     */
+    disabled?: boolean;
+    /**
+     * The form name that the input is associated with.
+     */
+    form?: string;
+    /**
+     * A unique id for the input element.
+     */
+    id: string;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the input
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The greatest value in the range of permitted values. Permitted for date,
+     * time, and number.
+     */
+    max?: number;
+    /**
+     * The maximum string length that the user can enter into the field. Permitted
+     * for text, search, url, tel, email, and password.
+     */
+    maxlength?: number;
+    /**
+     * The most negative value in the range of permitted values. Permitted for
+     * date, time, and number.
+     */
+    min?: number;
+    /**
+     * The minimum string length that the user can enter into the field. Permitted
+     * for text, search, url, tel, email, and password.
+     */
+    minlength?: number;
+    /**
+     * When `true`, the user can enter comma separated email addresses in the
+     * `email` input or can choose more than one file with the `file` input.
+     */
+    multiple?: boolean;
+    /**
+     * The name of the input. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * Used to compile a regular expression that the input's value must match.
+     * Permitted for text, search, url, tel, email, and password.
+     */
+    pattern?: string;
+    /**
+     * The value of the placeholder text, providing a brief hint to the user.
+     * Permitted for text, search, url, tel, email, password, and number.
+     */
+    placeholder?: string;
+    /**
+     * When `true`, indicates that the user should not be able to edit the value
+     * of the input.
+     */
+    readonly?: boolean;
+    /**
+     * When `true`, indicates that the user must fill the input before the owning
+     * form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * A number that specifies the granularity that the value must adhere to.
+     * Permitted for date, time, and number.
+     */
+    step?: number;
+    /**
+     * The type of the input.
+     */
+    type: InputType;
+    /**
+     * The value of the input. When specified as a prop, it is the initial value.
+     */
+    value?: string;
+    /**
+     * The user-defined "on click" handler for the input.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * The user-defined "on input" handler for the input.
+     */
+    onInput?: (event: Event) => void;
+    /**
+     * The user-defined "on change" handler for the input.
+     */
+    onChange?: (event: Event) => void;
+    /**
+     * The user-defined "on focus" handler for the input.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * The user-defined "on blur" handler for the input.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * The id of the input element, determined by the provided `id` prop.
+     */
+    private _inputId?;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * Handles the updated callback, transferring the `id` prop's value to
+     * `_inputId` and removing it from the parent (if changed).
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Handles the first updated callback, transferring the `id` prop's value to
+     * `_inputId` and removing it from the parent.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/_input-group-text.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays text within input groups.
+ *
+ * @element rtg-input-group-text
+ * @slot input-group-text
+ */
+export declare class InputGroupText extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group text.
+     */
+    private get _textSlot();
+    /**
+     * Appends children to the input group root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/_input-group-textarea.d.ts

@@ -0,0 +1,114 @@
+import { LitElement, PropertyValues } from 'lit';
+import { TextareaAutocomplete, TextareaWrap } from '../textarea/textarea.defs';
+import { InputGroupTextareaProps } from './input-group.defs';
+/**
+ * Replacement for `<rtg-textarea>` when building input groups. This component
+ * has the textarea group styles pre-applied and uses the unified data slot for
+ * focus state handling.
+ *
+ * @element rtg-input-group-textarea
+ * @slot input-group-textarea
+ */
+export declare class InputGroupTextarea extends LitElement implements InputGroupTextareaProps {
+    /**
+     * Controls whether entered text can be automatically completed by the
+     * browser.
+     */
+    autocomplete?: TextareaAutocomplete;
+    /**
+     * The visible width of the text control, in average character widths.
+     */
+    cols?: number;
+    /**
+     * When `true`, prevents the user from interacting with the textarea.
+     */
+    disabled?: boolean;
+    /**
+     * The form name that the textarea is associated with.
+     */
+    form?: string;
+    /**
+     * A unique id for the textarea element.
+     */
+    id: string;
+    /**
+     * When `true`, sets the `aria-invalid` attribute and styles the textarea
+     * accordingly.
+     */
+    invalid?: boolean;
+    /**
+     * The maximum string length that the user can enter into the field.
+     */
+    maxlength?: number;
+    /**
+     * The minimum string length that the user can enter into the field.
+     */
+    minlength?: number;
+    /**
+     * The name of the textarea. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * The value of the placeholder text, providing a brief hint to the user.
+     */
+    placeholder?: string;
+    /**
+     * When `true`, indicates that the user should not be able to edit the value
+     * of the textarea.
+     */
+    readonly?: boolean;
+    /**
+     * When `true`, indicates that the user must fill the textarea before the
+     * owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The number of visible text lines for the control.
+     */
+    rows?: number;
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     */
+    wrap?: TextareaWrap;
+    /**
+     * The value of the textarea. When specified as a prop, it is the initial
+     * value.
+     */
+    value?: string;
+    /**
+     * The user-defined "on input" handler for the textarea.
+     */
+    onInput?: (event: Event) => void;
+    /**
+     * The user-defined "on change" handler for the textarea.
+     */
+    onChange?: (event: Event) => void;
+    /**
+     * The user-defined "on focus" handler for the textarea.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * The user-defined "on blur" handler for the textarea.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * The id of the textarea element, determined by the provided `id` prop.
+     */
+    private _textareaId?;
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * Handles the updated callback, transferring the `id` prop's value to
+     * `_textareaId` and removing it from the parent (if changed).
+     */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Handles the first updated callback, transferring the `id` prop's value to
+     * `_textareaId` and removing it from the parent.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/_input-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * The main component that wraps inputs and addons.
+ *
+ * @element rtg-input-group
+ * @slot input-group
+ */
+export declare class InputGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the input group root.
+     */
+    private get _rootSlot();
+    /**
+     * Appends children to the input group root slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/input-group/input-group.d.ts

@@ -0,0 +1,20 @@
+import { InputGroup } from './_input-group';
+import { InputGroupAddon } from './_input-group-addon';
+import { InputGroupButton } from './_input-group-button';
+import { InputGroupInput } from './_input-group-input';
+import { InputGroupText } from './_input-group-text';
+import { InputGroupTextarea } from './_input-group-textarea';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
+/**
+ * Add addons, buttons, and helper content to inputs.
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-input-group': InputGroup;
+        'rtg-input-group-addon': InputGroupAddon;
+        'rtg-input-group-button': InputGroupButton;
+        'rtg-input-group-text': InputGroupText;
+        'rtg-input-group-input': InputGroupInput;
+        'rtg-input-group-textarea': InputGroupTextarea;
+    }
+}

package/dist/src/components/ui/input-group/input-group.defs.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps, ButtonSize } from '../button/button.defs';
+import { InputProps } from '../input/input.defs';
+import { TextareaProps } from '../textarea/textarea.defs';
+export type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+export interface InputGroupAddonProps {
+    align: InputGroupAddonAlign;
+    border?: boolean;
+}
+export type InputGroupButtonSize = Extract<ButtonSize, 'xs' | 'icon-xs' | 'sm' | 'icon-sm'>;
+export interface InputGroupButtonProps extends Omit<ButtonProps, 'size'> {
+    size: InputGroupButtonSize;
+}
+export interface InputGroupInputProps extends InputProps {
+}
+export interface InputGroupTextareaProps extends TextareaProps {
+}

package/dist/src/components/ui/input-group/input-group.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const InlineStart: Story;
+export declare const InlineEnd: Story;
+export declare const BlockStart: Story;
+export declare const BlockEnd: Story;
+export declare const Icon: Story;
+export declare const Text: Story;
+export declare const Button: Story;
+export declare const Kbd: Story;
+export declare const Spinner: Story;
+export declare const Textarea: Story;

package/dist/src/components/ui/input-otp/_input-otp-group.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 /**
  * The `<rtg-input-otp-group>` component is a container for input OTP slots. An
  * input OTP may have a single group holding all the slots, or multiple groups,

package/dist/src/components/ui/input-otp/_input-otp-separator.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 /**
  * The `<rtg-input-otp-separator>` component is a separator used between input
  * OTP groups.

package/dist/src/components/ui/input-otp/_input-otp-slot.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { InputOTPSlotProps } from './input-otp.defs';
-
 /**
  * The `<rtg-input-otp-slot>` component is a decorative container of the
  * character at a certain index of the input's value.

package/dist/src/components/ui/input-otp/_input-otp.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
 import { InputOTPProps, InputOTPAutocomplete, InputOTPInputmode } from './input-otp.defs';
-
 /**
  * The `<rtg-input-otp>` component is the root input OTP container, holding the
  * input OTP groups and separators, as well as the input element.

package/dist/src/components/ui/input-otp/input-otp.d.ts

@@ -2,7 +2,6 @@ import { InputOTP } from './_input-otp';
 import { InputOTPGroup } from './_input-otp-group';
 import { InputOTPSlot } from './_input-otp-slot';
 import { InputOTPSeparator } from './_input-otp-separator';
-
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
 /**
  * Accessible one-time password component with copy paste functionality.

package/dist/src/components/ui/input-otp/input-otp.stories.d.ts

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

package/dist/src/components/ui/item/_item-actions.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Container for action buttons or other interactive elements.
+ *
+ * @element rtg-item-actions
+ * @slot item-actions
+ */
+export declare class ItemActions extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item actions.
+     */
+    private get _actionsSlot();
+    /**
+     * Appends children to the item actions slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-content.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Wraps the title and description of the item.
+ *
+ * @element rtg-item-content
+ * @slot item-content
+ */
+export declare class ItemContent extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item content.
+     */
+    private get _contentSlot();
+    /**
+     * Appends children to the item content slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-description.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays the description of the item.
+ *
+ * @element rtg-item-description
+ * @slot item-description
+ */
+export declare class ItemDescription extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item description.
+     */
+    private get _descriptionSlot();
+    /**
+     * Appends children to the item description slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-footer.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays a footer below the item content.
+ *
+ * @element rtg-item-footer
+ * @slot item-footer
+ */
+export declare class ItemFooter extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item footer.
+     */
+    private get _footerSlot();
+    /**
+     * Appends children to the item footer slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * A container that groups related items together with consistent styling.
+ *
+ * @element rtg-item-group
+ * @slot item-group
+ */
+export declare class ItemGroup extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item group.
+     */
+    private get _groupSlot();
+    /**
+     * Appends children to the item group slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/src/components/ui/item/_item-header.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Displays a header above the item content.
+ *
+ * @element rtg-item-header
+ * @slot item-header
+ */
+export declare class ItemHeader extends LitElement {
+    /**
+     * Overrides the default behaviour to render into the light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The slot of the item header.
+     */
+    private get _headerSlot();
+    /**
+     * Appends children to the item header slot.
+     */
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}