nativecorejs 0.1.0

package/dist/components/nc-tabs.d.ts

@@ -0,0 +1,79 @@
+/**
+ * NativeCore Tabs Component (nc-tabs)
+ *
+ * Container that manages a group of nc-tab-item panels. Renders the tab bar,
+ * handles selection, keyboard navigation, and emits change events.
+ *
+ * Attributes:
+ *   variant    - 'line' | 'pills' | 'boxed'  (default: 'line')
+ *   active     - Zero-based index of the currently active tab (default: 0).
+ *                Can be set externally to programmatically switch tabs.
+ *   persist    - Boolean. When present, persist the selected tab in sessionStorage.
+ *                Uses `persist-key` if provided, else falls back to path + element id.
+ *   persist-key - Optional storage key override for tab persistence.
+ *   transition - Panel enter animation.
+ *                'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'none'  (default: 'fade')
+ *
+ * Slots:
+ *   default  - Place nc-tab-item elements here.
+ *
+ * Events emitted:
+ *   nc-tab-change  - { index: number, label: string | null }
+ *                    Fires whenever the active tab changes.
+ *
+ * Keyboard support:
+ *   ArrowRight / ArrowLeft - next / previous tab
+ *   Home / End             - first / last tab
+ *
+ * Usage:
+ *   <nc-tabs variant="line" active="0">
+ *     <nc-tab-item label="Overview">Overview content</nc-tab-item>
+ *     <nc-tab-item label="Activity">Activity content</nc-tab-item>
+ *     <nc-tab-item label="Settings" disabled>Settings</nc-tab-item>
+ *   </nc-tabs>
+ *
+ *   // Programmatic control
+ *   document.querySelector('nc-tabs').setAttribute('active', '1');
+ *
+ *   // Listen for changes
+ *   document.querySelector('nc-tabs').addEventListener('nc-tab-change', e => {
+ *       console.log(e.detail.index, e.detail.label);
+ *   });
+ */
+import { Component } from '../core/component.js';
+export declare class NcTabs extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+        transition: string[];
+    };
+    static get observedAttributes(): string[];
+    private _activeIndex;
+    private _onSlotChange;
+    private _onShadowClick;
+    private _onShadowKeydown;
+    private _scrollListenerSet;
+    private _resizeObserver;
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    /**
+     * Attribute changes from outside (e.g. setting active="2" programmatically).
+     * variant change is handled automatically by :host([variant]) CSS selectors.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Returns all direct nc-tab-item children (light DOM). */
+    private _getTabItems;
+    /**
+     * Rebuilds the tab bar buttons from child nc-tab-item labels,
+     * then syncs the active attribute on each tab item panel.
+     */
+    private _buildTabBar;
+    private _setupScrollArrows;
+    private _updateScrollBtns;
+    /** Selects a tab by index - updates state, DOM, host attribute, and emits event. */
+    private _selectTab;
+    private _storageKey;
+    private _readPersistedIndex;
+    private _persistActiveIndex;
+}

package/dist/components/nc-tabs.js

@@ -0,0 +1,519 @@
+/**
+ * NativeCore Tabs Component (nc-tabs)
+ *
+ * Container that manages a group of nc-tab-item panels. Renders the tab bar,
+ * handles selection, keyboard navigation, and emits change events.
+ *
+ * Attributes:
+ *   variant    - 'line' | 'pills' | 'boxed'  (default: 'line')
+ *   active     - Zero-based index of the currently active tab (default: 0).
+ *                Can be set externally to programmatically switch tabs.
+ *   persist    - Boolean. When present, persist the selected tab in sessionStorage.
+ *                Uses `persist-key` if provided, else falls back to path + element id.
+ *   persist-key - Optional storage key override for tab persistence.
+ *   transition - Panel enter animation.
+ *                'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'none'  (default: 'fade')
+ *
+ * Slots:
+ *   default  - Place nc-tab-item elements here.
+ *
+ * Events emitted:
+ *   nc-tab-change  - { index: number, label: string | null }
+ *                    Fires whenever the active tab changes.
+ *
+ * Keyboard support:
+ *   ArrowRight / ArrowLeft - next / previous tab
+ *   Home / End             - first / last tab
+ *
+ * Usage:
+ *   <nc-tabs variant="line" active="0">
+ *     <nc-tab-item label="Overview">Overview content</nc-tab-item>
+ *     <nc-tab-item label="Activity">Activity content</nc-tab-item>
+ *     <nc-tab-item label="Settings" disabled>Settings</nc-tab-item>
+ *   </nc-tabs>
+ *
+ *   // Programmatic control
+ *   document.querySelector('nc-tabs').setAttribute('active', '1');
+ *
+ *   // Listen for changes
+ *   document.querySelector('nc-tabs').addEventListener('nc-tab-change', e => {
+ *       console.log(e.detail.index, e.detail.label);
+ *   });
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { html } from '../utils/templates.js';
+export class NcTabs extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['line', 'pills', 'boxed'],
+        transition: ['fade', 'slide-up', 'slide-down', 'slide-right', 'slide-left', 'none'],
+    };
+    static get observedAttributes() {
+        return ['variant', 'active', 'transition', 'persist', 'persist-key'];
+    }
+    // ─── internal state ────────────────────────────────────────────────────────
+    _activeIndex = 0;
+    // ─── cleanup refs ──────────────────────────────────────────────────────────
+    _onSlotChange = null;
+    _onShadowClick = null;
+    _onShadowKeydown = null;
+    // ─── scroll arrow state ────────────────────────────────────────────────────
+    _scrollListenerSet = false;
+    _resizeObserver = null;
+    // ────────────────────────────────────────────────────────────────────────────
+    template() {
+        const variant = this.attr('variant', 'line');
+        return html `
+            <style>
+                /* ── Host layout ─────────────────────────────────────────────── */
+                :host {
+                    display: block;
+                    width: 100%;
+                    font-family: var(--nc-font-family);
+                    box-sizing: border-box;
+                }
+
+                .nc-tabs {
+                    width: 100%;
+                }
+
+                /* ── Tab bar ─────────────────────────────────────────────────── */
+                .nc-tabs__bar {
+                    display: flex;
+                    align-items: flex-end;
+                    position: relative;
+                    /* line variant default: bottom border */
+                    border-bottom: 2px solid var(--nc-border);
+                    gap: 0;
+                    /* - critical for scroll: width must be bounded, not grow to content - */
+                    width: 100%;
+                    overflow-x: auto;
+                    scrollbar-width: none;
+                    -webkit-overflow-scrolling: touch;
+                }
+
+                .nc-tabs__bar::-webkit-scrollbar {
+                    display: none;
+                }
+
+                /* ── Tab buttons ─────────────────────────────────────────────── */
+                .nc-tabs__btn {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: var(--nc-spacing-xs);
+                    background: transparent;
+                    border: none;
+                    cursor: pointer;
+                    font-family: inherit;
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: var(--nc-font-weight-medium);
+                    color: var(--nc-text-secondary);
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    position: relative;
+                    margin-bottom: -2px;
+                    white-space: nowrap;
+                    outline: none;
+                    transition:
+                        color var(--nc-transition-fast),
+                        background var(--nc-transition-fast);
+                    border-radius: var(--nc-radius-sm) var(--nc-radius-sm) 0 0;
+                    user-select: none;
+                }
+
+                /* Sliding underline indicator (line variant) */
+                .nc-tabs__btn::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    height: 2px;
+                    background: var(--nc-primary);
+                    border-radius: 2px 2px 0 0;
+                    transform: scaleX(0);
+                    transition: transform var(--nc-transition-fast) var(--nc-ease-out);
+                }
+
+                .nc-tabs__btn:hover:not([disabled]) {
+                    color: var(--nc-text);
+                    background: rgba(0, 0, 0, 0.03);
+                }
+
+                .nc-tabs__btn--active {
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                }
+
+                .nc-tabs__btn--active::after {
+                    transform: scaleX(1);
+                }
+
+                .nc-tabs__btn--disabled {
+                    opacity: 0.4;
+                    cursor: not-allowed;
+                    pointer-events: none;
+                }
+
+                .nc-tabs__btn:focus-visible {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: -2px;
+                    border-radius: var(--nc-radius-sm);
+                }
+
+                /* ── Pills variant ───────────────────────────────────────────── */
+                :host([variant="pills"]) .nc-tabs__bar {
+                    border-bottom: none;
+                    gap: var(--nc-spacing-xs);
+                    padding: var(--nc-spacing-xs);
+                    background: var(--nc-bg-secondary);
+                    border-radius: var(--nc-radius-lg);
+                    /* width: 100% inherited from base - pills scrolls rather than spills */
+                }
+
+                :host([variant="pills"]) .nc-tabs__btn {
+                    border-radius: var(--nc-radius-md);
+                    margin-bottom: 0;
+                }
+
+                :host([variant="pills"]) .nc-tabs__btn::after {
+                    display: none;
+                }
+
+                :host([variant="pills"]) .nc-tabs__btn--active {
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                }
+
+                :host([variant="pills"]) .nc-tabs__btn:hover:not([disabled]):not(.nc-tabs__btn--active) {
+                    background: var(--nc-bg-tertiary);
+                }
+
+                /* ── Boxed variant ───────────────────────────────────────────── */
+                :host([variant="boxed"]) .nc-tabs__bar {
+                    border-bottom: 1px solid var(--nc-border);
+                    gap: 2px;
+                }
+
+                :host([variant="boxed"]) .nc-tabs__btn {
+                    border: 1px solid transparent;
+                    border-bottom: none;
+                    border-radius: var(--nc-radius-md) var(--nc-radius-md) 0 0;
+                    margin-bottom: -1px;
+                }
+
+                :host([variant="boxed"]) .nc-tabs__btn::after {
+                    display: none;
+                }
+
+                :host([variant="boxed"]) .nc-tabs__btn--active {
+                    border-color: var(--nc-border);
+                    background: var(--nc-bg);
+                    color: var(--nc-primary);
+                }
+
+                /* ── Content panels ──────────────────────────────────────────── */
+                .nc-tabs__panels {
+                    padding-top: var(--nc-spacing-sm);
+                }
+
+                /* ── Bar wrapper (anchors scroll arrows) ─────────────────────── */
+                .nc-tabs__bar-wrap {
+                    position: relative;
+                    /* contain the bar so overflow-x:auto has a definite boundary */
+                    min-width: 0;
+                    overflow: hidden;
+                }
+
+                /* ── Scroll arrow buttons ────────────────────────────────────── */
+                .nc-tabs__scroll-btn {
+                    display: none; /* JS sets to flex when scrollable */
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    width: 36px;
+                    align-items: center;
+                    justify-content: center;
+                    border: none;
+                    padding: 0;
+                    cursor: pointer;
+                    z-index: 2;
+                    color: var(--nc-text-muted);
+                    transition: color var(--nc-transition-fast);
+                }
+                .nc-tabs__scroll-btn:hover { color: var(--nc-text); }
+
+                .nc-tabs__scroll-btn--prev {
+                    left: 0;
+                    background: linear-gradient(to right, var(--nc-bg) 45%, transparent 100%);
+                }
+                .nc-tabs__scroll-btn--next {
+                    right: 0;
+                    background: linear-gradient(to left, var(--nc-bg) 45%, transparent 100%);
+                }
+
+                /* ── Responsive ──────────────────────────────────────────────── */
+                @media (max-width: 640px) {
+                    .nc-tabs__panels {
+                        padding-top: 0;
+                    }
+                }
+            </style>
+
+            <div class="nc-tabs nc-tabs--${variant}">
+                <div class="nc-tabs__bar-wrap">
+                    <button class="nc-tabs__scroll-btn nc-tabs__scroll-btn--prev" type="button" aria-label="Scroll tabs back" aria-hidden="true">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M8 2L4 6l4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    </button>
+                    <div class="nc-tabs__bar" role="tablist" aria-label="Tabs"></div>
+                    <button class="nc-tabs__scroll-btn nc-tabs__scroll-btn--next" type="button" aria-label="Scroll tabs forward" aria-hidden="true">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    </button>
+                </div>
+                <div class="nc-tabs__panels">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    }
+    onMount() {
+        this._activeIndex = parseInt(this.attr('active', '0') ?? '0', 10);
+        const persistedIndex = this._readPersistedIndex();
+        if (persistedIndex !== null) {
+            this._activeIndex = persistedIndex;
+            this.setAttribute('active', String(persistedIndex));
+        }
+        // Defer first build one tick - child nc-tab-item elements upgrade after parent
+        Promise.resolve().then(() => this._buildTabBar());
+        // Re-build when tab items are added or removed dynamically
+        const slot = this.$('slot');
+        if (slot) {
+            this._onSlotChange = () => this._buildTabBar();
+            slot.addEventListener('slotchange', this._onSlotChange);
+        }
+        // Click delegation on shadow root - handles all tab button clicks
+        this._onShadowClick = (e) => {
+            const btn = e.target.closest('[data-tab-index]');
+            if (!btn || btn.hasAttribute('disabled'))
+                return;
+            const index = parseInt(btn.dataset.tabIndex, 10);
+            if (!isNaN(index))
+                this._selectTab(index);
+        };
+        this.shadowRoot.addEventListener('click', this._onShadowClick);
+        // Keyboard navigation on the tab bar
+        this._onShadowKeydown = (e) => {
+            const ke = e;
+            if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(ke.key))
+                return;
+            ke.preventDefault();
+            const tabs = this._getTabItems();
+            const len = tabs.length;
+            if (len === 0)
+                return;
+            let next = this._activeIndex;
+            if (ke.key === 'ArrowRight') {
+                next = (this._activeIndex + 1) % len;
+            }
+            else if (ke.key === 'ArrowLeft') {
+                next = (this._activeIndex - 1 + len) % len;
+            }
+            else if (ke.key === 'Home') {
+                next = 0;
+            }
+            else if (ke.key === 'End') {
+                next = len - 1;
+            }
+            // Skip disabled tabs
+            let attempts = 0;
+            while (tabs[next]?.hasAttribute('disabled') && attempts < len) {
+                next = ke.key === 'ArrowLeft'
+                    ? (next - 1 + len) % len
+                    : (next + 1) % len;
+                attempts++;
+            }
+            this._selectTab(next);
+            // Focus the newly active button
+            const activeBtn = this.shadowRoot?.querySelector(`[data-tab-index="${next}"]`);
+            activeBtn?.focus();
+        };
+        this.shadowRoot.addEventListener('keydown', this._onShadowKeydown);
+    }
+    onUnmount() {
+        const slot = this.$('slot');
+        if (slot && this._onSlotChange) {
+            slot.removeEventListener('slotchange', this._onSlotChange);
+        }
+        if (this._onShadowClick) {
+            this.shadowRoot?.removeEventListener('click', this._onShadowClick);
+        }
+        if (this._onShadowKeydown) {
+            this.shadowRoot?.removeEventListener('keydown', this._onShadowKeydown);
+        }
+        this._onSlotChange = null;
+        this._onShadowClick = null;
+        this._onShadowKeydown = null;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._scrollListenerSet = false;
+    }
+    /**
+     * Attribute changes from outside (e.g. setting active="2" programmatically).
+     * variant change is handled automatically by :host([variant]) CSS selectors.
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (!this._mounted || oldValue === newValue)
+            return;
+        if (name === 'active') {
+            const index = parseInt(newValue ?? '0', 10);
+            if (!isNaN(index) && index !== this._activeIndex) {
+                this._activeIndex = index;
+                this._buildTabBar();
+            }
+        }
+        // variant + transition: :host([attr="..."]) CSS handles appearance - no JS needed
+    }
+    // ─── Private helpers ────────────────────────────────────────────────────────
+    /** Returns all direct nc-tab-item children (light DOM). */
+    _getTabItems() {
+        return Array.from(this.querySelectorAll(':scope > nc-tab-item'));
+    }
+    /**
+     * Rebuilds the tab bar buttons from child nc-tab-item labels,
+     * then syncs the active attribute on each tab item panel.
+     */
+    _buildTabBar() {
+        const bar = this.$('.nc-tabs__bar');
+        if (!bar)
+            return;
+        const tabs = this._getTabItems();
+        // Clamp active index to valid range
+        if (this._activeIndex >= tabs.length) {
+            this._activeIndex = Math.max(0, tabs.length - 1);
+        }
+        this._persistActiveIndex();
+        bar.innerHTML = tabs.map((tab, i) => {
+            const label = tab.getAttribute('label') ?? `Tab ${i + 1}`;
+            const disabled = tab.hasAttribute('disabled');
+            const isActive = i === this._activeIndex;
+            const classes = [
+                'nc-tabs__btn',
+                isActive ? 'nc-tabs__btn--active' : '',
+                disabled ? 'nc-tabs__btn--disabled' : '',
+            ].filter(Boolean).join(' ');
+            return `<button
+                class="${classes}"
+                role="tab"
+                aria-selected="${isActive}"
+                aria-disabled="${disabled}"
+                tabindex="${isActive ? 0 : -1}"
+                data-tab-index="${i}"
+                ${disabled ? 'disabled' : ''}
+            >${label}</button>`;
+        }).join('');
+        // Sync active attribute on each panel (drives :host([active]) CSS in nc-tab-item)
+        // Also sync data-nc-transition so nc-tab-item picks the correct animation variant
+        const transition = this.getAttribute('transition') || 'fade';
+        tabs.forEach((tab, i) => {
+            tab.setAttribute('data-nc-transition', transition);
+            if (i === this._activeIndex) {
+                tab.setAttribute('active', '');
+            }
+            else {
+                tab.removeAttribute('active');
+            }
+        });
+        this._setupScrollArrows();
+    }
+    // ─── Scroll arrow helpers ───────────────────────────────────────────────────
+    _setupScrollArrows() {
+        const bar = this.$('.nc-tabs__bar');
+        if (!bar)
+            return;
+        if (!this._scrollListenerSet) {
+            bar.addEventListener('scroll', () => this._updateScrollBtns(), { passive: true });
+            this.$('.nc-tabs__scroll-btn--prev')
+                ?.addEventListener('click', () => { bar.scrollBy({ left: -150, behavior: 'smooth' }); });
+            this.$('.nc-tabs__scroll-btn--next')
+                ?.addEventListener('click', () => { bar.scrollBy({ left: 150, behavior: 'smooth' }); });
+            if (typeof ResizeObserver !== 'undefined') {
+                this._resizeObserver = new ResizeObserver(() => this._updateScrollBtns());
+                this._resizeObserver.observe(bar);
+            }
+            this._scrollListenerSet = true;
+        }
+        this._updateScrollBtns();
+        // Scroll the active tab into view after rebuilding the bar
+        requestAnimationFrame(() => {
+            this.shadowRoot?.querySelector('.nc-tabs__btn--active')
+                ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        });
+    }
+    _updateScrollBtns() {
+        const bar = this.$('.nc-tabs__bar');
+        const prevBtn = this.$('.nc-tabs__scroll-btn--prev');
+        const nextBtn = this.$('.nc-tabs__scroll-btn--next');
+        if (!bar || !prevBtn || !nextBtn)
+            return;
+        const canScrollLeft = bar.scrollLeft > 1;
+        const canScrollRight = bar.scrollLeft < bar.scrollWidth - bar.clientWidth - 1;
+        prevBtn.style.display = canScrollLeft ? 'flex' : 'none';
+        nextBtn.style.display = canScrollRight ? 'flex' : 'none';
+    }
+    /** Selects a tab by index - updates state, DOM, host attribute, and emits event. */
+    _selectTab(index) {
+        const tabs = this._getTabItems();
+        if (index < 0 || index >= tabs.length)
+            return;
+        if (tabs[index]?.hasAttribute('disabled'))
+            return;
+        if (index === this._activeIndex)
+            return;
+        this._activeIndex = index;
+        this._buildTabBar();
+        // Keep host attribute in sync so external code can read it
+        // Use setAttribute silently - attributeChangedCallback guard (oldValue !== newValue) prevents loops
+        this.setAttribute('active', String(index));
+        this.emitEvent('nc-tab-change', {
+            index,
+            label: tabs[index].getAttribute('label'),
+        });
+    }
+    _storageKey() {
+        if (!this.hasAttribute('persist'))
+            return null;
+        const explicit = this.getAttribute('persist-key');
+        if (explicit)
+            return explicit;
+        if (this.id)
+            return `nc-tabs:${window.location.pathname}:${this.id}`;
+        return null;
+    }
+    _readPersistedIndex() {
+        const key = this._storageKey();
+        if (!key)
+            return null;
+        try {
+            const raw = sessionStorage.getItem(key);
+            if (raw === null)
+                return null;
+            const index = parseInt(raw, 10);
+            return Number.isNaN(index) ? null : index;
+        }
+        catch {
+            return null;
+        }
+    }
+    _persistActiveIndex() {
+        const key = this._storageKey();
+        if (!key)
+            return;
+        try {
+            sessionStorage.setItem(key, String(this._activeIndex));
+        }
+        catch {
+            // Ignore storage failures (private mode / quota / disabled storage)
+        }
+    }
+}
+defineComponent('nc-tabs', NcTabs);

package/dist/components/nc-tag-input.d.ts

@@ -0,0 +1,49 @@
+/**
+ * NcTagInput Component - text input that creates dismissible tag chips
+ *
+ * Attributes:
+ *   placeholder  - input placeholder text
+ *   value        - comma-separated initial tags (e.g. "react,vue,svelte")
+ *   max          - maximum number of tags allowed
+ *   min-length   - minimum character length for a tag (default: 1)
+ *   max-length   - maximum character length per tag
+ *   delimiter    - character(s) that trigger tag creation in addition to Enter (default: ',')
+ *   disabled     - boolean
+ *   readonly     - boolean - show tags but cannot add/remove
+ *   duplicate    - boolean - allow duplicate tags (default: false)
+ *   variant      - 'default'|'filled' (default: 'default')
+ *   label        - visible label text
+ *   hint         - helper text below input
+ *   error        - error message (shown in red)
+ *
+ * Events:
+ *   change    - CustomEvent<{ tags: string[] }> - tag list changed
+ *   add       - CustomEvent<{ tag: string }>
+ *   remove    - CustomEvent<{ tag: string; index: number }>
+ *   max-reached - CustomEvent - fired when max is exceeded
+ *
+ * Methods:
+ *   el.getTags()          - string[]
+ *   el.setTags(tags)      - replace all tags
+ *   el.addTag(tag)        - programmatic add
+ *   el.removeTag(index)   - programmatic remove
+ *   el.clear()            - remove all tags
+ */
+import { Component } from '../core/component.js';
+export declare class NcTagInput extends Component {
+    static useShadowDOM: boolean;
+    private _tags;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    getTags(): string[];
+    setTags(tags: string[]): void;
+    addTag(tag: string): void;
+    removeTag(index: number): void;
+    clear(): void;
+    private _emit;
+    private _escape;
+    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+}