@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/types/components/pds-table/pds-table-row/pds-table-row.d.ts

@@ -1,15 +1,31 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part row - Set on the `pds-table-row` element itself, so `::part(row)` matches it only from a shadow root that contains it. Style `pds-table-row` directly instead.
+ * @part row-checkbox - Exposes the row's selection checkbox for styling. Appears only when the table is `selectable`.
+ */
 export declare class PdsTableRow {
     hostElement: HTMLPdsTableRowElement;
     private tableRef;
+    private observer;
+    private bodyObserver;
     /**
-     * Indicates that the selection state is indeterminate.
-     * */
+      * Determines if the row selected is in an indeterminate state.
+      */
     indeterminate?: boolean;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
      */
     isSelected?: boolean;
+    /**
+     * Determines if the row should have a divider border.
+     * @defaultValue false
+     */
+    private hasDivider;
+    /**
+     * Determines if this is the last row in the table body.
+     * @defaultValue false
+     */
+    private isLastRow;
     /**
      * Event that is emitted when the checkbox is clicked, carrying the selected value.
      */
@@ -17,11 +33,18 @@ export declare class PdsTableRow {
         rowIndex: number;
         isSelected: boolean;
     }>;
-    private handleClick;
+    private handleCheckboxChange;
     private handleSelect;
     private classNames;
     componentWillRender(): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private cleanupObservers;
+    private setupObservers;
+    private shouldHaveDivider;
+    private updateDividerState;
+    private updateLastRowState;
     private generateUniqueId;
     render(): any;
 }

package/dist/types/components/pds-table/pds-table.d.ts

@@ -1,12 +1,31 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @part responsive-container - Exposes the horizontal scroll container for styling. Appears only when `responsive` is set.
+ * @part responsive-table - Set on the `pds-table` element itself when `responsive` is set, so `::part(responsive-table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part responsive-wrapper - Exposes the wrapper inside the scroll container for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-left - Exposes the scroll shadow at the inline-start edge for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-right - Exposes the scroll shadow at the inline-end edge for styling. Appears only when `responsive` is set.
+ * @part table - Set on the `pds-table` element itself, so `::part(table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part table-inner - Exposes the inner table element around the slotted head and body for styling. Appears only when `responsive` is set.
+ */
 export declare class PdsTable {
     el: HTMLPdsTableElement;
+    private scrollContainer;
+    private _responsiveHandleScroll;
+    private _responsiveHandleResize;
+    private _responsiveResizeObserver;
+    private _teardownResponsive;
+    private _fixedLayoutResizeObserver;
+    private _fixedLayoutHandleResize;
+    private _fixedLayoutMutationObserver;
+    private _pendingColumnWidthsRecalc;
+    private hasLoaded;
     /**
-     * Determines if table displays compact which reduces the spacing of table cells.
+     * Determines if the table displays with reduced table cell padding.
      */
     compact: boolean;
     /**
-     * A unique identifier used for the table `id` attribute.
+     * A unique identifier for this component instance. Does not set the host element's `id` attribute — set `id` directly if you need one.
      */
     componentId: string;
     /**
@@ -14,29 +33,136 @@ export declare class PdsTable {
      */
     responsive: boolean;
     /**
-     * Determines if table displays fixed column which fixes the first column of the table.
+     * Determines if the table displays a fixed first column.
      */
     fixedColumn: boolean;
     /**
-     * Determines if table displays checkboxes for selectable rows.
+     * Determines if the table displays checkboxes for selectable rows.
      */
     selectable: boolean;
+    /**
+     * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
+     * Only applies when `selectable` is true.
+     * @defaultValue false
+     */
+    disableSelectAll: boolean;
+    /**
+     * Adds divider borders between table rows. The last row will not have a bottom border.
+     * @defaultValue false
+     */
+    rowDividers: boolean;
+    /**
+     * Sets how the table sizes its columns. With `auto`, each column is sized from its content,
+     * so columns can change width when the rows change (for example after a sort). With `fixed`,
+     * columns take the `width` set on their `pds-table-head-cell` and ignore their content;
+     * columns without a `width` share the remaining space. Under `responsive`, that remaining
+     * share keeps a 120px floor on narrow viewports where the other columns' widths already fill
+     * it, growing the table instead (scrollable) -- without `responsive` there's no floor, since
+     * there would be nothing to scroll the overflow it would create. Content longer than its
+     * column overflows, so add `truncate` to cells whose content may not fit.
+     * @defaultValue 'auto'
+     */
+    tableLayout: 'auto' | 'fixed';
+    /**
+     * The name of the column to sort by on initial load.
+     * Must match the text content of a sortable column header.
+     */
+    defaultSortColumn?: string;
+    /**
+     * The direction to sort the default column on initial load.
+     * Only applies if `defaultSortColumn` is set.
+     * @defaultValue 'asc'
+     */
+    defaultSortDirection?: 'asc' | 'desc';
+    /**
+     * The name of the column being sorted.
+     * @defaultValue null
+     */
     sortingColumn: string | null;
-    sortingDirection: 'asc' | 'desc';
     /**
-     * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.
+     * The direction of sorting.
+     * @defaultValue 'asc'
      */
-    pdsTableSelect: EventEmitter<{
-        rowIndex: number;
-        isSelected: boolean;
-    }>;
+    sortingDirection: 'asc' | 'desc';
     /**
-     * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
+     * Event that is emitted by `pds-table-head` when the select all checkbox is clicked, carrying the selected value.
+     * It bubbles through the table; the table doesn't emit it itself.
      */
     pdsTableSelectAll: EventEmitter<{
         isSelected: boolean;
     }>;
-    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Applies the default sort configuration on initial load.
+     * Finds the matching column header and activates its sort state.
+     * @private
+     */
+    private applyDefaultSort;
+    /**
+     * Re-attaches the responsive scroll listeners and the fixed-layout width floor after the table
+     * reconnects (it was re-parented, reordered, or moved by a DOM morph) -- `disconnectedCallback`
+     * tears both down, and neither comes back on its own.
+     */
+    connectedCallback(): void;
+    private attachLifecycleBoundSetup;
+    disconnectedCallback(): void;
+    /**
+     * `tableLayout` or `responsive` changing at runtime is handled here, deferred to
+     * `componentDidRender` rather than done directly -- a `@Watch` runs before this component's
+     * own re-render, and both the floor's measurement and the responsive scroll setup query
+     * `.pds-table-responsive-container`, which that re-render is what creates or removes. Reading
+     * it any earlier would still see the old tree.
+     */
+    private _pendingFixedLayoutInputsSync;
+    handleFixedLayoutInputsChange(): void;
+    componentDidRender(): void;
+    /**
+     * The floor only applies with `tableLayout="fixed"` and `responsive` both set, so either one
+     * changing at runtime can turn it on or off -- and `responsive` on its own also starts or stops
+     * the (separate) scroll listeners, same as it does on first load. A head cell only reads
+     * `tableLayout` during its own render, and the floor this sets lives in inline style, not a
+     * re-render -- so turning the floor off (including live, e.g. the Storybook control) needs
+     * both cleared explicitly, not just the observers torn down. The select-all column reads
+     * `tableLayout` the same way, one level up in `pds-table-head`'s own render, since it owns that
+     * cell rather than letting it through a `<slot>`. A `fixedColumn` cell's own sticky-shadow
+     * scroll listener is bound to this same container, cached on the cell itself -- it stays in
+     * light DOM across this change and never reconnects on its own, so it needs telling directly
+     * rather than finding out the container moved.
+     * @private
+     */
+    private syncFixedLayoutInputs;
+    private allHeadCells;
+    private allBodyCells;
+    /**
+     * Measures the explicit-width columns against the available space and gives the columns with
+     * no `width` of their own (which otherwise share whatever's left) a floor so none of them
+     * squeeze below `AUTO_COLUMN_FLOOR_WIDTH_PX`. Re-run on resize, since the responsive
+     * container's available width can change after load -- and only under `responsive`: that
+     * container is the one thing in this layout the floor's own growth can't also grow, which is
+     * what keeps this from measuring its own effect and oscillating.
+     * @private
+     */
+    private recalcAutoColumnWidths;
+    private setupFixedLayoutWidths;
+    private scheduleColumnWidthsRecalc;
+    private teardownFixedLayoutWidths;
+    /**
+     * Sets up responsive scrolling behavior for the table.
+     *
+     * This method creates a horizontal scrolling system where:
+     * - The table content can scroll horizontally when it exceeds the container width
+     * - Scroll shadows appear at the inline-start/end edges to indicate scrollable content
+     * - Fixed columns remain sticky during horizontal scrolling
+     * - Shadows respect border-radius and don't appear when there's nothing to scroll
+     *
+     * Architecture:
+     * - Host element: Contains everything, respects parent constraints
+     * - Container element: Handles horizontal scrolling (overflow-x: auto)
+     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
+     *
+     * @private
+     */
+    private setupResponsiveScrolling;
     private classNames;
     private sortTable;
     handleTableSort(event: CustomEvent<{

package/dist/types/components/pds-tabs/pds-tab/pds-tab.d.ts

@@ -1,6 +1,50 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @lightDom renders-markup
+ */
 export declare class PdsTab {
     el: HTMLPdsTabElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    /**
+     * Determines the tab's disabled state.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Turns the tab into a navigation link to this URL. When set, the tab renders
+     * an `<a href>` (marked `aria-current="page"` when `active`) instead of a
+     * `role="tab"` button, so each tab is its own page/URL — for tab strips that
+     * navigate rather than switch in-page panels. Pairs with `pds-tabs` navigation
+     * mode; no `pds-tabpanel`s are needed. Apply `href` to all tabs in a
+     * `pds-tabs` or none — mixing navigation and panel tabs is not supported.
+     */
+    href?: string;
+    /**
+     * Marks this tab as the current one in navigation mode (`href` set). Applies
+     * the active treatment and `aria-current="page"`. Ignored in panel mode, where
+     * the active tab is derived from the parent's `activeTabName`.
+     * @defaultValue false
+     */
+    active?: boolean;
+    /**
+     * Where to open the linked URL, in navigation mode. Maps to the anchor's
+     * `target` attribute.
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Navigation mode: the Turbo Frame to target. Maps to `data-turbo-frame` on the
+     * anchor, so a tab can swap a single frame (e.g. a page body) while leaving the
+     * rest of the page in place.
+     */
+    turboFrame?: string;
+    /**
+     * Navigation mode: the Turbo visit action. Maps to `data-turbo-action` on the
+     * anchor (`advance` gives each tab its own history entry).
+     */
+    turboAction?: 'advance' | 'replace';
     /**
      * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property
      */
@@ -25,11 +69,22 @@ export declare class PdsTab {
      */
     /** @internal */
     selected: boolean;
+    /**
+     * Set by the parent `pds-tabs` to force navigation vs panel rendering, so tabs
+     * present when the strip initializes share one mode. Standalone (no parent), the
+     * tab falls back to whether it has an `href`.
+     */
+    /** @internal */
+    navMode?: boolean;
     /**
      * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for
      */
     /** @internal */
     pdsTabClick: EventEmitter<object>;
     private onTabClick;
+    private get hasHref();
+    private get isNav();
+    private get isActive();
+    private classNames;
     render(): any;
 }

package/dist/types/components/pds-tabs/pds-tabpanel/pds-tabpanel.d.ts

@@ -1,5 +1,12 @@
+/**
+ * @lightDom renders-markup
+ */
 export declare class PdsTabpanel {
     el: HTMLPdsTabpanelElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
     /**
      * Sets the related tab name, this name must match a `pds-tab`'s tab name property
      */
@@ -19,5 +26,10 @@ export declare class PdsTabpanel {
      */
     /** @internal */
     selected: boolean;
+    /**
+     * Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
+     */
+    /** @internal */
+    stretch: boolean;
     render(): any;
 }

package/dist/types/components/pds-tabs/pds-tabs.d.ts

@@ -1,27 +1,62 @@
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
+* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
 */
 export declare class PdsTabs {
     private tabs;
     private tabPanels;
     el: HTMLPdsTabsElement;
+    private hostKeeper;
+    private tabsSlot;
+    private tabPanelsSlot;
+    private slotChangeScheduled;
+    private activeTabNameBeforeSlotChange;
+    private lastFocusedTab;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleFocusIn;
+    private handleFocusOut;
+    componentDidLoad(): void;
     /**
      * Sets the aria-label attached to the tablist element
      */
     tablistLabel: string;
     /**
-     * A unique identifier used for the underlying component `id` attribute.
+     * A unique identifier for this component instance, passed down to its tabs and panels.
+     * Does not set the host element's `id` attribute — set `id` directly if you need one.
      */
     componentId: string;
     /**
-     * Sets tabs variant styles as outlined in Figma documentation
+     * Sets tabs variant styles as outlined in Figma documentation.
+     * Applies in both panel and nav mode; omitting it renders the primary style.
      */
-    variant: 'primary' | 'availability' | 'filter';
+    variant?: 'primary' | 'availability' | 'filter' | 'pill';
     /**
-     * Sets the starting active tab name and maintains the name as the component re-renders
+     * Adds a divider rule beneath the tab list.
+     * @defaultValue false
      */
-    activeTabName: string;
+    divider?: boolean;
+    /**
+     * Stretches the component to fill its container's height. The active tab panel keeps the height of its content.
+     * Requires the component to have a constrained height (e.g. a flex parent).
+     * @defaultValue false
+     */
+    stretch?: boolean;
+    /**
+     * Renders the tab strip as navigation instead of an in-page panel switcher: each
+     * `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
+     * on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
+     * Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
+     * @defaultValue false
+     */
+    nav?: boolean;
+    /**
+     * Sets the starting active tab name and maintains the name as the component re-renders.
+     * Panel mode only — in navigation mode (`nav`) the active tab is set per-tab via
+     * `active`, so this is not required there.
+     */
+    activeTabName?: string;
     /**
      * Sets the starting active tab index number and maintains the index number as the component re-renders
      */
@@ -29,8 +64,13 @@ export declare class PdsTabs {
     activeTabIndex: number;
     tabClickHandler(event: CustomEvent<any>): void;
     handleKeyDown(ev: KeyboardEvent): void;
+    private get isNav();
+    private warnOnNavConfig;
     private moveActiveTab;
     private findAllChildren;
+    private setupSlotChangeListeners;
+    private handleSlotChange;
+    private recollectAfterSlotChange;
     private propGeneration;
     private passPropsToChildren;
     private classNames;

package/dist/types/components/pds-text/pds-text.d.ts

@@ -0,0 +1,61 @@
+import { TextSizeType } from '../../utils/types';
+/**
+ * @part content - The text content container
+ */
+export declare class PdsText {
+    el: HTMLPdsTextElement;
+    private contentEl;
+    private truncationCleanup;
+    /**
+     * Sets the text alignment.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Sets the text color.
+     */
+    color?: string;
+    /**
+     * Sets the text decoration.
+     */
+    decoration?: 'strikethrough' | 'underline-dotted';
+    /**
+     * Set the bottom margin for the text.
+     */
+    gutter?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * If set or `true`, the text will be italic.
+     */
+    italic?: boolean;
+    /**
+     * Sets the font size.
+     */
+    size?: TextSizeType;
+    /**
+     * Sets the font weight.
+     */
+    weight?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Determines what semantic text tag to render.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'code' | 'pre' | 'strong' | 'em';
+    /**
+     * If set or `true`, the text will be truncated. Must add a `width` to the element.
+     * When text overflows, a tooltip showing the full text will appear on hover/focus.
+     * Note: While the text is overflowing, the element receives tabindex="0" so the
+     * tooltip can be reached by keyboard. Text that fits is left out of the tab order.
+     * Inside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and
+     * `pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a
+     * `max-width`, no tab stop is added; the tooltip appears when that control receives
+     * keyboard focus.
+     */
+    truncate?: boolean;
+    handleTruncateChange(newValue: boolean): void;
+    validateSize(newValue?: string): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private initTruncationTooltip;
+    private destroyTruncationTooltip;
+    render(): any;
+}

package/dist/types/components/pds-textarea/pds-textarea.d.ts

@@ -1,64 +1,189 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TextareaChangeEventDetail } from './textarea-interface';
+import { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
+/**
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
+ */
 export declare class PdsTextarea {
+    private nativeTextarea?;
+    private focusedValue?;
+    private inheritedAttributes;
+    private originalPdsInput?;
+    private internals?;
+    private resizeObserver?;
+    private characterCounter?;
+    private readonly _type;
     el: HTMLPdsTextareaElement;
+    /**
+     * Emitted when the textarea loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the textarea has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.
+     * `detail` has `value`, the current text, and `event`, the native `input` event.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsInput: EventEmitter<TextareaInputEventDetail>;
+    /**
+     * Emitted when the user changes the value and then leaves the textarea. `Enter` adds a new line, so it doesn't emit this event.
+     * `detail` has `value`, the text, and `event`, the native event behind it, usually `change`.
+     *
+     * This event will not emit when programmatically setting the `value` property, unless the field has focus at the time;
+     * then it emits when the field loses focus.
+     */
+    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    /**
+     * Emitted when a key is pressed down in the textarea.
+     */
+    pdsKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
+     * `textarea.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
     /**
-     * Indicates whether or not the textarea is disabled
+     * Determines whether or not the textarea is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Specifies the error text and provides an error-themed treatment to the field
+     * Sets the number of milliseconds to wait after each input event before emitting `pdsInput`.
+     */
+    debounce?: number;
+    /**
+     * Displays an error message below the textarea while `invalid` is set.
      */
     errorMessage?: string;
     /**
-     * Displays a hint or description of the textarea
+     * Displays a message or hint below the textarea field.
      */
     helperMessage?: string;
     /**
-     * Indicates whether or not the textarea is invalid or throws an error
+     * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+     * itself each time `pdsTextareaChange` fires, replacing a value you set.
      * @defaultValue false
      */
     invalid: boolean;
     /**
-     * Text to be displayed as the textarea label
+     * Text to be displayed as the textarea label.
      */
     label?: string;
     /**
-     * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId
+     * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.
+     * Note: When true, the action slot is also hidden to maintain a minimal UI.
+     */
+    hideLabel: boolean;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
      */
     name: string;
     /**
-     * Specifies a short hint that describes the expected value of the textarea
+     * Specifies a short hint that describes the expected value of the textarea.
      */
     placeholder?: string;
     /**
-     * Indicates whether or not the textarea is readonly
+     * Determines whether or not the textarea is readonly.
      * @defaultValue false
      */
     readonly: boolean;
     /**
-     * Indicates whether or not the textarea is required
+     * Determines whether or not the textarea is required.
      * @defaultValue false
      */
     required: boolean;
     /**
-     * Sets number of rows of text visible without needing to scroll in the textarea
+     * Sets number of rows of text visible without needing to scroll in the textarea.
      */
     rows?: number;
     /**
-     * The value of the textarea
+     * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.
      */
-    value?: string;
+    maxLength?: number;
     /**
-     * Event emitted whenever the value of the textarea changes
+     * Applies highlight styling to the textarea field.
      */
-    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    highlight?: boolean;
+    /**
+     * The value of the textarea.
+     */
+    value?: string | null;
+    hasFocus: boolean;
+    /**
+     * If true, the textarea has action content in the label area
+     */
+    hasAction: boolean;
+    /**
+     * Template for the character-counter's accessible label. Pass a translated
+     * string to localize it; `{current}` and `{max}` are interpolated.
+     * @defaultValue '{current} of {max} characters'
+     */
+    characterCountLabel: string;
+    protected debounceChanged(): void;
+    /**
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    protected maxLengthChanged(): void;
+    /**
+     * Emits an `pdsInput` event.
+     */
+    private emitInputChange;
+    /**
+     * Emits an `pdsTextareaChange` event.
+     */
+    private emitValueChange;
+    private getValue;
+    private onBlur;
+    private onFocus;
+    private onInput;
     private onTextareaChange;
+    private onKeyDown;
     private textareaClassNames;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Sets up ResizeObserver to track textarea resize for character counter positioning
+     */
+    private setupResizeObserver;
+    /**
+     * Updates character counter position to stay within textarea boundaries during resize
+     */
+    private updateCharacterCounterPosition;
+    /**
+     * Renders the character counter when maxLength is set
+     */
+    private renderCharacterCounter;
+    private renderAction;
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    private updateFormValue;
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback(): void;
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state: string | FormData | null): void;
     render(): any;
 }