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

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

@@ -0,0 +1,182 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot (default) - The `option` and `optgroup` elements to choose from. Other elements are ignored.
+ * @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.
+ * @part select - Exposes the native `select` element for styling.
+ */
+export declare class PdsSelect {
+    private selectEl;
+    private slotContainer;
+    private internals?;
+    private _type;
+    private optionObserver;
+    private optionSyncFrame;
+    private hasHadOptions;
+    el: HTMLPdsSelectElement;
+    private hostKeeper;
+    /**
+     * 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 select field is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Displays an error message below the select and marks the select as invalid, with or without `invalid`.
+     */
+    errorMessage: string;
+    /**
+     * Visually hides the label text for instances where only the select 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;
+    /**
+     * Displays a message or hint below the select.
+     */
+    helperMessage: string;
+    /**
+     * Determines whether or not the select is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the select label.
+     */
+    label?: string;
+    /**
+     * Indicates whether multiple options can be selected.
+     * @defaultValue false
+     */
+    multiple: boolean;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
+     */
+    name: string;
+    /**
+     * Indicates whether or not the select field is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * Applies highlight styling to the select field.
+     */
+    highlight?: boolean;
+    /**
+     * The value(s) of the selected option(s).
+     *
+     */
+    value?: string | string[];
+    /**
+     * Emitted when the user changes the selection. `detail` is the native `change` event, so read the new value
+     * from the select's `value`: a string, or an array with `multiple`.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsSelectChange: EventEmitter<InputEvent>;
+    /**
+     * Emitted when the select loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the select gains focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a key is pressed down in the select.
+     */
+    pdsKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged(): void;
+    /**
+     * Updates the type property when multiple changes to match native select behavior.
+     */
+    multipleChanged(): void;
+    private updateType;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Keeps the inner select in step with the slotted options. `slotchange` only fires when
+     * top-level options are added or removed, so an option's text, value or disabled state
+     * changing, or an option added inside an optgroup, would otherwise never reach the select.
+     * Changes are batched into one copy per animation frame.
+     */
+    private startOptionSync;
+    /**
+     * Whether a mutation is inside an option or optgroup. The host's own attributes and children
+     * (top-level adds and removes reach `slotchange`) and the action slot's content are not.
+     */
+    private touchesOption;
+    private scheduleOptionSync;
+    private stopOptionSync;
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    private updateSelectedOption;
+    /**
+     * Emits an event on input change.
+    */
+    private onSelectUpdate;
+    private onBlur;
+    private onFocus;
+    private onKeyDown;
+    /**
+     * Copies the slotted <option> and <optgroup> elements into the inner select, then
+     * reselects the current value. Runs on `slotchange` and when a slotted option changes
+     * (see startOptionSync).
+     *
+     * Nothing happens when the copies match what the select already holds. When only text or
+     * attributes changed, the select's own options are updated in place rather than replaced,
+     * so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
+     * screen reader keeps its place. Selecting programmatically fires no change event, so a
+     * copy never emits `pdsSelectChange`.
+     */
+    private handleSlotChange;
+    /**
+     * After a copy that changes an existing option set, a value whose option was renamed or removed
+     * has nothing to select. Like a native select, show nothing selected rather than the first
+     * option; the value itself is kept, with no change event.
+     */
+    private showNoSelectionWithoutMatch;
+    private getHelperMessage;
+    private getErrorMessage;
+    private renderMessages;
+    private isInvalid;
+    private classNames;
+    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;
+}

package/dist/types/components/pds-sortable/pds-sortable-item/pds-sortable-item.d.ts

@@ -1,8 +1,12 @@
 /**
- * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
+ * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered when `enable-actions` is set.
+ * @lightDom renders-markup
  */
 export declare class PdsSortableItem {
     el: HTMLPdsSortableItemElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     sortableRef: HTMLPdsSortableElement;
     /**
      * Determines whether `sortable-item-actions` slot should be enabled.
@@ -10,14 +14,21 @@ export declare class PdsSortableItem {
      */
     enableActions: boolean;
     /**
-     * A unique identifier used for the sortable item `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;
     /**
-     * Determines whether `sortable-item` should have a handle.
+     * Determines whether the reorder handle is shown. The handle itself renders whenever the list
+     * is reorderable, regardless of this prop; without it, the handle is visually hidden but still
+     * reachable from the keyboard.
      * @defaultValue false
      */
     showHandle: boolean;
+    /**
+     * Name of the item in its reorder handle's label and in the reorder announcements. Pass a translated string to localize it; defaults to the item's text content.
+     */
+    itemLabel?: string;
+    componentDidRender(): void;
     componentWillRender(): void;
     render(): any;
 }

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

@@ -1,28 +1,123 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { SortableEvent } from 'sortablejs';
+/**
+ * @lightDom host-only
+ */
 export declare class PdsSortable {
     el: HTMLPdsSortableElement;
     /**
-     * Event emitted when a sortable item is moved.
+     * Event emitted when a sortable item is moved, by dragging or from the keyboard. A keyboard move
+     * carries the same fields as a drag (`item`, `from`, `to`, `oldIndex`, `newIndex`,
+     * `oldDraggableIndex`, `newDraggableIndex`), with the event that ended the move as
+     * `originalEvent` -- a `KeyboardEvent` for Space or Enter, but a `FocusEvent`, `PointerEvent` or
+     * `MouseEvent` when the drop instead comes from focus leaving the row, a drag taking over, or a
+     * screen reader's browse-mode click.
      */
-    pdsSortableItemMoved: EventEmitter;
+    pdsSortableItemMoved: EventEmitter<SortableEvent>;
     /**
      * Determines whether `sortable` should have a border.
      * @defaultValue false
      */
     border: boolean;
     /**
-     * A unique identifier used for the sortable container `id` attribute.
+     * Determines whether or not the sortable is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * 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;
     /**
-     * Deternines whether `sortable` items should be divided with border.
+     * Determines whether `sortable` items should be divided with border.
      */
     dividers: boolean;
     /**
      * Determines the grabbable area for the `pds-sortable-item`.
      */
     handleType: 'handle' | 'row';
+    /**
+     * Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated.
+     * @defaultValue 'Reorder {item}'
+     */
+    handleLabel: string;
+    /**
+     * Screen-reader announcement when an item is picked up from the keyboard. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'
+     */
+    itemPickedUpLabel: string;
+    /**
+     * Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, moved to position {position} of {total}'
+     */
+    itemMovedLabel: string;
+    /**
+     * Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, dropped at position {position} of {total}'
+     */
+    itemDroppedLabel: string;
+    /**
+     * Screen-reader announcement when a keyboard reorder is canceled and the item goes back. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue 'Reorder canceled. {item} returned to position {position} of {total}'
+     */
+    reorderCanceledLabel: string;
+    private sortableInstance;
+    /** The item picked up from the keyboard, and where it started. */
+    private grabbed;
+    private liveRegion;
+    handleDisabledChange(): void;
+    handleHandleTypeChange(): void;
+    updateItems(): void;
     private classNames;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
+    /** The children that can be reordered, counted as SortableJS counts them. */
+    private items;
+    /**
+     * The live region sits right after the list, not in it, so it's never counted as an item, by
+     * SortableJS or by a consumer reading the list's children, and it's still in the same modal. A
+     * morph that removes it gets it put back on the next focus.
+     */
+    private ensureLiveRegion;
+    private announce;
+    private droppedByPointerDown;
+    handlePointerDown(ev: PointerEvent): void;
+    private handleFocusIn;
+    /**
+     * Focus leaving a picked-up item drops it where it is, unless the whole window lost focus (the user
+     * switched apps), when the item stays picked up for their return. A real window blur does not move
+     * `document.activeElement` away from the handle that's losing focus (some browsers reset it to `body`
+     * instead, but never to a different element), so it's told apart from focus moving into an iframe or
+     * another embedded document that way: an iframe becomes a genuinely different active element, while a
+     * window blur leaves `activeElement` as the handle itself, `null`, or `body`.
+     */
+    private handleFocusOut;
+    /**
+     * Whether an item is picked up. One that's been taken out of the list meanwhile (a re-render, a
+     * stream update) is let go, as there's nothing left to move.
+     */
+    private isGrabbing;
+    /**
+     * Screen readers in browse mode turn Enter and Space on a button into a click with no key events,
+     * so a click that isn't from a pointer (`detail` is 0) picks up or drops too.
+     */
+    private handleClick;
+    /** The item whose handle `target` is, if it is one. */
+    private targetItem;
+    private handleKeyDown;
+    /** The item's handle, the button the keyboard reorders with. */
+    private focusTarget;
+    private indexes;
+    private pickUp;
+    /**
+     * Moves the other items around `item` rather than `item` itself, so it never leaves the DOM and
+     * keeps focus.
+     */
+    private moveTo;
+    private drop;
+    private cancel;
+    private release;
     render(): any;
 }

package/dist/types/components/pds-sortable/sortable-interface.d.ts

@@ -1,7 +1,9 @@
+import type { SortableEvent } from 'sortablejs';
 export interface SortableType {
     animation: number;
+    disabled: boolean;
     ghostClass: string;
     dragClass: string;
-    onEnd: (evt: Event) => void;
+    onEnd: (evt: SortableEvent) => void;
     handle?: string;
 }

package/dist/types/components/pds-sortable/sortable-label.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The name a sortable item goes by in its handle's label and in reorder announcements: its
+ * `item-label`, or else its own text, leaving out the handle and the actions.
+ * @param item - A `pds-sortable-item`
+ * @returns The item's name, with whitespace collapsed
+ */
+export declare const sortableItemLabel: (item: HTMLElement) => string;

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

@@ -1,59 +1,93 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot label - Content displayed as the switch label in place of the `label` text. Clicking it toggles the switch.
+ */
 export declare class PdsSwitch {
+    private inheritedAttributes;
+    private internals?;
+    private readonly _type;
+    private inputEl?;
+    private hostDescriptionObserver?;
+    private forwardsDescription;
     el: HTMLPdsSwitchElement;
+    private hostKeeper;
+    private hasLabelSlot;
+    private fieldsetDisabled;
     /**
      * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
      */
     componentId: string;
     /**
-     * Determines the input 'checked' state
+     * Determines the input 'checked' state.
      */
     checked: boolean;
     /**
-     * Determines the input 'disabled' state, preventing user interaction
+     * Determines the input 'disabled' state, preventing user interaction.
      */
     disabled?: boolean;
     /**
-     * Displays message text describing an invalid state
+     * Displays an error message below the switch. It becomes the switch's accessible description only while `invalid` is set.
      */
     errorMessage?: string;
     /**
-     * Displays help text for additional description of an input
+     * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.
+     */
+    hideLabel: boolean;
+    /**
+     * Displays a message or hint below the switch.
      */
     helperMessage: string;
     /**
-     * Determines the input 'invalid' state, signifying an error is present
+     * Determines whether or not the switch is invalid.
      */
     invalid?: boolean;
     /**
-     * Displays text to describe the input
+     * Text to be displayed as the switch label.
      */
     label: string;
     /**
-     * Identifies form data and unifies a group of radio inputs for toggling a single property/value
+     * Specifies the name. Submitted with the form name/value pair when checked, or with `unchecked-value` while unchecked.
      */
     name: string;
     /**
-     * Determines the 'required' state of the input
+     * Determines the 'required' state of the input.
      */
     required?: boolean;
     /**
-     * Specifies the underlying input element type
-     * @defaultValue 'checkbox'
+     * Provides input with a string submitted in form data.
      */
-    type: 'checkbox' | 'radio';
+    value: string;
     /**
-     * Provides input with a string submitted in form data, and can be used to distinguish radio inputs
+     * Provides a string submitted in form data under `name` while the switch is unchecked.
+     * When unset, an unchecked switch submits nothing, like a native checkbox.
      */
-    value: string;
+    uncheckedValue?: string;
     /**
-     * Emits an event on input change
-    */
+     * Emitted when the user toggles the switch, by a click or `Space`. `detail` is the native `change` event, so read
+     * the new state from the switch's `checked`.
+     *
+     * This event will not emit when programmatically setting the `checked` property.
+     */
     pdsSwitchChange: EventEmitter<InputEvent>;
+    private isDisabled;
     private onSwitchUpdate;
+    private switchClassNames;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    syncFormValue(): void;
+    private updateFormValue;
+    private formValue;
+    private checkedValue;
+    private forwardDescription;
+    private ownDescriptionId;
+    formStateRestoreCallback(state: string | FormData | null): void;
     /**
-     * Generate switch classes
+     * Form Associated Custom Elements API: Called when the form is disabled
      */
-    private switchClassNames;
+    formDisabledCallback(disabled: boolean): void;
+    componentWillLoad(): void;
+    private updateHasLabelSlot;
     render(): any;
 }

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

@@ -1,3 +1,6 @@
+/**
+ * @part body - Set on the `pds-table-body` element itself, so `::part(body)` matches it only from a shadow root that contains it. Style `pds-table-body` directly instead.
+ */
 export declare class PdsTableBody {
     render(): any;
 }

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

@@ -1,14 +1,53 @@
+/**
+ * @part cell - Set on the `pds-table-cell` element itself, so `::part(cell)` matches it only from a shadow root that contains it. Style `pds-table-cell` directly instead. In a `selectable` table, each row's selection cell sits in the row's shadow root: it has the `checkbox-cell` part when first rendered and `cell` after any re-render, so target both with `pds-table-row::part(checkbox-cell), pds-table-row::part(cell)`.
+ */
 export declare class PdsTableCell {
     hostElement: HTMLPdsTableCellElement;
     private tableRef;
+    private scrollContainer;
+    private setupTimer;
+    private setupRetries;
+    private truncationCleanup;
+    private hasLoaded;
     componentWillRender(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private get needsScrollShadow();
+    private setupScrollListener;
+    private cleanupScrollListener;
     /**
-     * Truncates content to a max width of 100px and adds an ellipsis.
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that change,
+     * so it never reconnects on its own and would otherwise keep listening to a container the
+     * table already replaced or removed.
+     */
+    rebindScrollListener(): Promise<void>;
+    /**
+     * Sets the text alignment within the cell.
+     */
+    cellAlign?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Truncates content to a max width and adds an ellipsis.
+     * When text overflows, a tooltip showing the full text will appear on hover/focus.
+     * Note: While the content is overflowing, the cell receives tabindex="0" so the
+     * tooltip can be reached by keyboard. Content that fits is left out of the tab order.
      */
     truncate: boolean;
+    handleTruncateChange(newValue: boolean): void;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
+    private initTruncationTooltip;
+    private destroyTruncationTooltip;
     private classNames;
+    /**
+     * Handles scroll events to update fixed column shadow state.
+     * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+     * @private
+     */
     private handleScroll;
     render(): any;
 }

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

@@ -1,13 +1,30 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part head - Set on the `pds-table-head` element itself, so `::part(head)` matches it only from a shadow root that contains it. Style `pds-table-head` directly instead.
+ * @part select-all-checkbox - Exposes the select-all checkbox for styling. Appears only when the table is `selectable` and `disableSelectAll` isn't set.
+ */
 export declare class PdsTableHead {
     hostElement: HTMLPdsTableHeadElement;
     private tableRef;
-    /** Indicates that the selection state is indeterminate. */
+    /**
+     * Determines if the select all checkbox is in an indeterminate state.
+     */
     indeterminate?: boolean;
     /**
-    * A local state to track whether the row is currently selected.
+    * Determines if the select all checkbox is checked.
+    * @defaultValue false
     */
     isSelected: boolean;
+    /**
+     * Adds top and bottom borders to the table head.
+     * @defaultValue false
+     */
+    border: boolean;
+    /**
+     * Adds a subtle background color to the table head.
+     * @defaultValue false
+     */
+    background: boolean;
     /**
      * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
      */

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

@@ -1,11 +1,30 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part head-cell - Set on the `pds-table-head-cell` element itself, so `::part(head-cell)` matches it only from a shadow root that contains it. Style `pds-table-head-cell` directly instead. In a `selectable` table, the select-all cell sits in `pds-table-head`'s shadow root: it has the `checkbox-cell` part when first rendered and `head-cell` after any re-render, so target both with `pds-table-head::part(checkbox-cell), pds-table-head::part(head-cell)`.
+ * @part sort-icon - Exposes the sort direction icon for styling. Appears only on a `sortable` column while it's the active sort.
+ */
 export declare class PdsTableHeadCell {
     hostElement: HTMLPdsTableHeadCellElement;
     private tableRef;
+    private scrollContainer;
+    private setupTimer;
+    private setupRetries;
+    private headObserver?;
+    private hasLoaded;
+    /**
+     * Sets the text alignment within the head cell.
+     */
+    cellAlign?: 'start' | 'center' | 'end' | 'justify';
     /**
      * Determines whether the table column is sortable when set to `true`.
      */
     sortable: boolean;
+    /**
+     * Sets the width of the column. Accepts any CSS length (e.g. '148px', '12rem', '20%').
+     * When the table's `tableLayout` is `fixed`, the column keeps this width whatever its content.
+     * Otherwise the column is at least this wide and can grow to fit its content.
+     */
+    width?: string;
     /**
      * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.
      */
@@ -13,16 +32,68 @@ export declare class PdsTableHeadCell {
         column: string;
         direction: string;
     }>;
+    /**
+     * The direction of sorting.
+     */
     private sortingDirection;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
+     * @defaultValue false
      */
     isSelected: boolean;
-    componentWillRender(): void;
+    /**
+     * Determines if the parent table-head has the border attribute.
+     * @defaultValue false
+     */
+    private hasHeadBorder;
+    /**
+     * Determines if the parent table-head has the background attribute.
+     * @defaultValue false
+     */
+    private hasHeadBackground;
+    /**
+     * Determines if this column is the currently active sorted column.
+     * @defaultValue false
+     */
+    private isActive;
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    setActiveSort(direction: 'asc' | 'desc'): Promise<void>;
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    clearActiveSort(): Promise<void>;
+    componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private setupHeadObserver;
+    disconnectedCallback(): void;
+    private setupScrollListener;
+    private cleanupScrollListener;
+    /**
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that
+     * change, so it never reconnects on its own and would otherwise keep listening to a container
+     * the table already replaced or removed.
+     */
+    rebindScrollListener(): Promise<void>;
+    /**
+     * Handles scroll events to update fixed column shadow state.
+     * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+     * @private
+     */
     private handleScroll;
     private toggleSort;
     private classNames;
+    private hostStyles;
     render(): any;
 }