declare global {
interface HTMLElementTagNameMap {
'character-counter': CharacterCounter;
}
}
/**
* - A visual character counter with circular progress
*
* Built without Shadow DOM following HTML-first principles. All styles are
* defined in index.css and scoped with the custom element selector.
*
* Attributes:
* - max: Maximum character count (default: 300)
* - count: Current character count (default: 0)
* - hide-count: Boolean attribute - when present, never shows the remaining count text
* - warn: Boolean or number - when present as boolean, shows count when within 20 of limit;
* when set to a number, shows count when that many characters remain
* (has no effect if hide-count is present)
*
* CSS Custom Properties for theming:
* - --counter-diameter: Circle diameter (default: 2rem)
* - --counter-stroke-width: Circle stroke width (default: 3)
* - --counter-track-color: Background ring color (default: #e0e0e0)
* - --counter-normal-color: Progress color when under limit (default: #1d9bf0)
* - --counter-warning-color: Progress color when over limit (default: #f4212e)
* - --counter-text-color: Text color for remaining count (default: #536471)
*
* Data Attributes (set automatically):
* - data-over-limit: Present when count exceeds max
* - data-hide-count: Present when count text should be hidden (uses visibility: hidden)
*
* Usage:
*
*
*
*
*/
export declare class CharacterCounter extends HTMLElement {
static observedAttributes: string[];
static TAG: string;
get max(): number;
get count(): number;
set count(n: number);
get hideCount(): boolean;
get warn(): boolean | number;
get remaining(): number;
get progress(): number;
get isOverLimit(): boolean;
get isNearLimit(): boolean;
get shouldShowCount(): boolean;
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
disconnectedCallback(): void;
connectedCallback(): void;
render(): void;
}
//# sourceMappingURL=index.d.ts.map