@colletdev/core 0.1.3

package/src/elements/dialog.js

@@ -0,0 +1,314 @@
+// Custom behavior for <cx-dialog> — open/close modal, backdrop, scroll lock.
+//
+// All animations use Web Animations API. CSS @keyframes in adopted stylesheets
+// have browser inconsistencies with showModal() top-layer promotion.
+// Same approach as drawer.js — see that file for detailed rationale.
+//
+// Source: crates/wasm-api/src/dialog.rs
+
+// ─── Static Styles (no @keyframes) ───
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      'dialog[data-dialog]::backdrop {',
+      '  background: transparent !important;',
+      '  backdrop-filter: none !important;',
+      '  -webkit-backdrop-filter: none !important;',
+      '}',
+      '[data-dialog-panel] { position: relative; z-index: 1; }',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+// ─── Animation Constants (from design system tokens.rs) ───
+
+// Entrance: 400ms spring (--duration-smooth, --ease-spring)
+const ENTER_DURATION = 400;
+const ENTER_EASING = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';
+
+// Exit: 250ms ease-in (accelerating away — decisive, not lingering)
+const EXIT_DURATION = 250;
+const EXIT_EASING = 'cubic-bezier(0.4, 0, 1, 1)';
+
+// Backdrop timing
+const BACKDROP_ENTER_DURATION = 300;
+const BACKDROP_EASING = 'ease-out';
+
+export function defineCxDialog(wasmFn, baseClass) {
+  class CxDialog extends baseClass {
+    static observedAttributes = ['id', 'title', 'variant', 'description', 'size', 'close-button', 'drawer', 'open'];
+    static _booleanAttrs = new Set(['close-button', 'open']);
+
+    // Guard: prevents attributeChangedCallback re-entry when syncing
+    // the open attribute from imperative open()/close() calls.
+    #syncing = false;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Only auto-open if the element has an explicit 'open' attribute.
+        // React mounts components into the tree and expects to control
+        // visibility via ref.current.open() — auto-opening on mount
+        // causes unwanted flashes.
+        this._autoOpen = this.hasAttribute('open');
+
+        shadow.addEventListener('click', (e) => {
+          if (e.target.closest('[data-dialog-close]')) {
+            this.#closeDialog();
+            return;
+          }
+          // Backdrop click (standard dialogs only, not alert)
+          const dialog = shadow.querySelector('dialog[data-dialog]');
+          if (dialog && e.target === dialog && !dialog.hasAttribute('data-dialog-alert')) {
+            this.#closeDialog();
+          }
+        });
+
+        shadow.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            const dialog = shadow.querySelector('dialog[data-dialog]');
+            if (dialog && dialog.hasAttribute('data-dialog-alert')) {
+              e.preventDefault();
+              return;
+            }
+            this.#closeDialog();
+          }
+        });
+
+        shadow.addEventListener('cancel', (e) => {
+          const dialog = shadow.querySelector('dialog[data-dialog]');
+          if (dialog && dialog.hasAttribute('data-dialog-alert')) {
+            e.preventDefault();
+            return;
+          }
+          this.#closeDialog();
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    // Intercept 'open' attribute — toggle dialog without WASM re-render.
+    // All other attributes delegate to base class for props → WASM pipeline.
+    attributeChangedCallback(name, oldVal, newVal) {
+      if (name === 'open') {
+        if (this.#syncing) return;
+        if (newVal !== null) {
+          // open attribute added → open the dialog
+          this._autoOpen = true;
+          if (this._isInitialized) this.#openDialog();
+        } else {
+          // open attribute removed → close the dialog
+          this._autoOpen = false;
+          const d = this._shadow?.querySelector('dialog[data-dialog]');
+          if (d?.open && !d.hasAttribute('data-closing')) {
+            this.#closeDialog();
+          }
+        }
+        return;
+      }
+      super.attributeChangedCallback(name, oldVal, newVal);
+    }
+
+    // Property accessor for dialog open state (read-only).
+    // Named `isOpen` to avoid collision with the imperative `open()` method.
+    get isOpen() {
+      const dialog = this._shadow?.querySelector('dialog[data-dialog]');
+      return dialog ? dialog.open : this.hasAttribute('open');
+    }
+
+    disconnectedCallback() {
+      this._unlockScroll();
+      super.disconnectedCallback();
+    }
+
+    // ─── Overlay Management ───
+
+    #ensureOverlay(dialog) {
+      if (dialog.querySelector('[data-cx-overlay]')) return;
+      const el = document.createElement('div');
+      el.setAttribute('data-cx-overlay', '');
+      Object.assign(el.style, {
+        position: 'fixed',
+        inset: '0',
+        backgroundColor: 'oklch(0 0 0 / 0.3)',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+        pointerEvents: 'none',
+        zIndex: '0',
+        opacity: '0',
+      });
+      dialog.prepend(el);
+    }
+
+    // ─── Open ───
+
+    #openDialog() {
+      const dialog = this._shadow.querySelector('dialog[data-dialog]');
+      if (!dialog || dialog.open) return;
+
+      // Clear _autoOpen — the open is now being fulfilled. Without this,
+      // _autoOpen stays true from attributeChangedCallback and the close
+      // cleanup misinterprets it as a rapid-toggle re-open request.
+      this._autoOpen = false;
+
+      // Sync attribute (guard prevents re-entry via attributeChangedCallback)
+      if (!this.hasAttribute('open')) {
+        this.#syncing = true;
+        this.setAttribute('open', '');
+        this.#syncing = false;
+      }
+
+      dialog.showModal();
+      this._lockScroll();
+
+      requestAnimationFrame(() => {
+        const panel = dialog.querySelector('[data-dialog-panel]');
+        const overlay = dialog.querySelector('[data-cx-overlay]');
+        const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+        // Panel: scale up + slide down with spring easing
+        if (panel) {
+          panel.animate(
+            [
+              { opacity: 0, transform: 'scale(0.95) translateY(-8px)' },
+              { opacity: 1, transform: 'scale(1) translateY(0)' },
+            ],
+            { duration: reducedMotion ? 0 : ENTER_DURATION, easing: ENTER_EASING, fill: 'forwards' }
+          );
+        }
+
+        // Backdrop overlay fade-in
+        if (overlay) {
+          overlay.animate(
+            [{ opacity: 0 }, { opacity: 1 }],
+            { duration: reducedMotion ? 0 : BACKDROP_ENTER_DURATION, easing: BACKDROP_EASING, fill: 'forwards' }
+          );
+        }
+
+        dialog.setAttribute('data-open', '');
+      });
+    }
+
+    // ─── Close ───
+
+    #closeDialog() {
+      const dialog = this._shadow.querySelector('dialog[data-dialog]');
+      if (!dialog || !dialog.open) return;
+      if (dialog.hasAttribute('data-closing')) return;
+
+      // Clear _autoOpen so cleanup doesn't misinterpret a stale true
+      // as a rapid-toggle request. Only a NEW setAttribute('open', '')
+      // during the close animation should set _autoOpen = true.
+      this._autoOpen = false;
+
+      dialog.setAttribute('data-closing', '');
+      dialog.removeAttribute('data-open');
+
+      // Sync attribute (guard prevents re-entry via attributeChangedCallback)
+      if (this.hasAttribute('open')) {
+        this.#syncing = true;
+        this.removeAttribute('open');
+        this.#syncing = false;
+      }
+
+      const panel = dialog.querySelector('[data-dialog-panel]');
+      const overlay = dialog.querySelector('[data-cx-overlay]');
+      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      const dur = reducedMotion ? 0 : EXIT_DURATION;
+
+      const cleanup = () => {
+        dialog.removeAttribute('data-closing');
+        // Pin final visual state as inline styles BEFORE dialog.close().
+        // dialog.close() removes the element from the top layer, which
+        // cancels all Web Animations (including fill: 'forwards').
+        // Without pinning, the panel snaps to its original position for
+        // one paint frame before the dialog fully hides.
+        if (panel) {
+          panel.style.opacity = '0';
+          panel.style.transform = 'scale(0.97) translateY(-8px)';
+        }
+        if (overlay) overlay.style.opacity = '0';
+        dialog.close();
+        // Clear pinned styles (dialog is now hidden, no visual impact)
+        if (panel) {
+          panel.style.opacity = '';
+          panel.style.transform = '';
+        }
+        if (overlay) overlay.style.opacity = '';
+        this._unlockScroll();
+        this._emit('cx-close', {});
+        // If open was re-requested during close animation (rapid toggle),
+        // re-open now that the dialog has fully closed.
+        if (this._autoOpen) {
+          this._autoOpen = false;
+          requestAnimationFrame(() => this.#openDialog());
+        }
+      };
+
+      // Backdrop fade-out (parallel)
+      if (overlay) {
+        overlay.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+      }
+
+      // Panel: subtle scale + return upward (reverses entrance direction)
+      if (panel) {
+        const anim = panel.animate(
+          [
+            { opacity: 1, transform: 'scale(1) translateY(0)' },
+            { opacity: 0, transform: 'scale(0.97) translateY(-8px)' },
+          ],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+        anim.finished.then(cleanup).catch(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#openDialog(); }
+    close() { this.#closeDialog(); }
+
+    // ─── Render ───
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        const dialog = this._shadow.querySelector('dialog[data-dialog]');
+        if (dialog) this.#ensureOverlay(dialog);
+
+        if (this._autoOpen) {
+          this._autoOpen = false;
+          requestAnimationFrame(() => this.#openDialog());
+        }
+      } catch (e) {
+        console.error('[cx-dialog]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-dialog', CxDialog);
+  return CxDialog;
+}

package/src/elements/drawer.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/drawer.rs
+
+export interface CxDrawerAttributes {
+    id?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    closeButton?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-drawer': HTMLElement & CxDrawerAttributes;
+  }
+}

package/src/elements/drawer.js

@@ -0,0 +1,318 @@
+// Custom behavior for <cx-drawer> — open/close drawer panel, backdrop, scroll lock.
+//
+// All animations use Web Animations API. CSS @keyframes in adopted stylesheets
+// have browser inconsistencies with showModal() top-layer promotion — the
+// animationend event fires but no visual rendering occurs. Direct API calls
+// bypass this entirely and give us reliable, programmatic animation control.
+//
+// The native ::backdrop pseudo-element can't be animated via JS (no DOM handle).
+// We hide it and inject a real overlay <div> inside the dialog instead,
+// animated alongside the panel for coordinated entrance/exit transitions.
+//
+// Source: crates/wasm-api/src/drawer.rs
+
+// ─── Static Styles (no @keyframes) ───
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      // Hide native ::backdrop — our overlay div handles the visual.
+      // ::backdrop still blocks pointer events behind the dialog (showModal).
+      'dialog[data-dialog]::backdrop {',
+      '  background: transparent !important;',
+      '  backdrop-filter: none !important;',
+      '  -webkit-backdrop-filter: none !important;',
+      '}',
+      // Panel above overlay in stacking order
+      '[data-dialog-panel] { position: relative; z-index: 1; }',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+// ─── Animation Constants (from design system tokens.rs) ───
+
+// Off-screen transform per drawer direction
+const OFF_SCREEN = {
+  right:  'translateX(100%)',
+  left:   'translateX(-100%)',
+  top:    'translateY(-100%)',
+  bottom: 'translateY(100%)',
+};
+
+// Entrance: 400ms snappy (--duration-smooth, --ease-snappy)
+const ENTER_DURATION = 400;
+const ENTER_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+
+// Exit: 250ms ease-in (accelerating away — decisive, not lingering)
+const EXIT_DURATION = 250;
+const EXIT_EASING = 'cubic-bezier(0.4, 0, 1, 1)';
+
+// Backdrop fade matches exit timing
+const BACKDROP_ENTER_DURATION = 300;
+const BACKDROP_EASING = 'ease-out';
+
+export function defineCxDrawer(wasmFn, baseClass) {
+  class CxDrawer extends baseClass {
+    static observedAttributes = ['id', 'title', 'description', 'side', 'size', 'shape', 'close-button', 'open'];
+    static _booleanAttrs = new Set(['close-button', 'open']);
+
+    // Guard: prevents attributeChangedCallback re-entry when syncing
+    // the open attribute from imperative open()/close() calls.
+    #syncing = false;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Adopt static stylesheet (no keyframes — just ::backdrop override + z-index)
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Queue open for after first WASM render if the element has an
+        // explicit 'open' attribute (HTML) or React set the property.
+        this._autoOpen = this.hasAttribute('open');
+
+        // Close button + backdrop click
+        shadow.addEventListener('click', (e) => {
+          if (e.target.closest('[data-dialog-close]')) {
+            this.#closeDrawer();
+            return;
+          }
+          const dialog = shadow.querySelector('dialog[data-dialog]');
+          if (dialog && e.target === dialog) {
+            this.#closeDrawer();
+          }
+        });
+
+        shadow.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') this.#closeDrawer();
+        });
+
+        shadow.addEventListener('cancel', (e) => {
+          e.preventDefault();
+          this.#closeDrawer();
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    // Intercept 'open' attribute — toggle drawer without WASM re-render.
+    // All other attributes delegate to base class for props → WASM pipeline.
+    attributeChangedCallback(name, oldVal, newVal) {
+      if (name === 'open') {
+        if (this.#syncing) return;
+        if (newVal !== null) {
+          // open attribute added → open the drawer
+          this._autoOpen = true;
+          if (this._isInitialized) this.#openDrawer();
+        } else {
+          // open attribute removed → close the drawer
+          this._autoOpen = false;
+          // Guard: skip if already closed or mid-close — prevents double
+          // animation when internal close (X/backdrop/Escape) removes the
+          // attribute, then React's onClose removes it again.
+          const d = this._shadow?.querySelector('dialog[data-dialog]');
+          if (d?.open && !d.hasAttribute('data-closing')) {
+            this.#closeDrawer();
+          }
+        }
+        return;
+      }
+      super.attributeChangedCallback(name, oldVal, newVal);
+    }
+
+    // Property accessor for drawer open state (read-only).
+    // Named `isOpen` to avoid collision with the imperative `open()` method.
+    // Write path: use setAttribute('open', '') / removeAttribute('open'),
+    // or the imperative open()/close() methods.
+    get isOpen() {
+      const dialog = this._shadow?.querySelector('dialog[data-dialog]');
+      return dialog ? dialog.open : this.hasAttribute('open');
+    }
+
+    disconnectedCallback() {
+      this._unlockScroll();
+      super.disconnectedCallback();
+    }
+
+    // ─── Overlay Management ───
+
+    #ensureOverlay(dialog) {
+      if (dialog.querySelector('[data-cx-overlay]')) return;
+      const el = document.createElement('div');
+      el.setAttribute('data-cx-overlay', '');
+      Object.assign(el.style, {
+        position: 'fixed',
+        inset: '0',
+        backgroundColor: 'oklch(0 0 0 / 0.3)',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+        pointerEvents: 'none',
+        zIndex: '0',
+        opacity: '0',
+      });
+      dialog.prepend(el);
+    }
+
+    // ─── Open ───
+
+    #openDrawer() {
+      const dialog = this._shadow.querySelector('dialog[data-dialog]');
+      if (!dialog || dialog.open) return;
+
+      // Clear _autoOpen — the open is now being fulfilled. Without this,
+      // _autoOpen stays true from attributeChangedCallback and the close
+      // cleanup misinterprets it as a rapid-toggle re-open request.
+      this._autoOpen = false;
+
+      // Sync attribute (guard prevents re-entry via attributeChangedCallback)
+      if (!this.hasAttribute('open')) {
+        this.#syncing = true;
+        this.setAttribute('open', '');
+        this.#syncing = false;
+      }
+
+      dialog.showModal();
+      this._lockScroll();
+
+      // rAF: dialog must be composited in the top layer before we animate.
+      // Without this, display:none → visible transition skips animations.
+      requestAnimationFrame(() => {
+        const panel = dialog.querySelector('[data-dialog-panel]');
+        const overlay = dialog.querySelector('[data-cx-overlay]');
+        const side = dialog.getAttribute('data-drawer') || 'right';
+        const offscreen = OFF_SCREEN[side] || OFF_SCREEN.right;
+        const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+        if (panel) {
+          panel.animate(
+            [{ transform: offscreen }, { transform: 'none' }],
+            { duration: reducedMotion ? 0 : ENTER_DURATION, easing: ENTER_EASING, fill: 'forwards' }
+          );
+        }
+
+        if (overlay) {
+          overlay.animate(
+            [{ opacity: 0 }, { opacity: 1 }],
+            { duration: reducedMotion ? 0 : BACKDROP_ENTER_DURATION, easing: BACKDROP_EASING, fill: 'forwards' }
+          );
+        }
+
+        dialog.setAttribute('data-open', '');
+      });
+    }
+
+    // ─── Close ───
+
+    #closeDrawer() {
+      const dialog = this._shadow.querySelector('dialog[data-dialog]');
+      if (!dialog || !dialog.open) return;
+      if (dialog.hasAttribute('data-closing')) return;
+
+      // Clear _autoOpen so cleanup doesn't misinterpret a stale true
+      // as a rapid-toggle request. Only a NEW setAttribute('open', '')
+      // during the close animation should set _autoOpen = true.
+      this._autoOpen = false;
+
+      dialog.setAttribute('data-closing', '');
+      dialog.removeAttribute('data-open');
+
+      // Sync attribute (guard prevents re-entry via attributeChangedCallback)
+      if (this.hasAttribute('open')) {
+        this.#syncing = true;
+        this.removeAttribute('open');
+        this.#syncing = false;
+      }
+
+      const panel = dialog.querySelector('[data-dialog-panel]');
+      const overlay = dialog.querySelector('[data-cx-overlay]');
+      const side = dialog.getAttribute('data-drawer') || 'right';
+      const offscreen = OFF_SCREEN[side] || OFF_SCREEN.right;
+      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      const dur = reducedMotion ? 0 : EXIT_DURATION;
+
+      const cleanup = () => {
+        dialog.removeAttribute('data-closing');
+        // Pin final visual state as inline styles BEFORE dialog.close().
+        // dialog.close() removes the element from the top layer, which
+        // cancels all Web Animations (including fill: 'forwards').
+        // Without pinning, the panel snaps to its original position for
+        // one paint frame before the dialog fully hides.
+        if (panel) panel.style.transform = offscreen;
+        if (overlay) overlay.style.opacity = '0';
+        dialog.close();
+        // Clear pinned styles (dialog is now hidden, no visual impact)
+        if (panel) panel.style.transform = '';
+        if (overlay) overlay.style.opacity = '';
+        this._unlockScroll();
+        this._emit('cx-close', {});
+        // If open was re-requested during close animation (rapid toggle),
+        // re-open now that the dialog has fully closed.
+        if (this._autoOpen) {
+          this._autoOpen = false;
+          requestAnimationFrame(() => this.#openDrawer());
+        }
+      };
+
+      // Animate backdrop overlay fade-out (runs in parallel)
+      if (overlay) {
+        overlay.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+      }
+
+      // Animate panel slide-out — cleanup on finish
+      if (panel) {
+        const anim = panel.animate(
+          [{ transform: 'none' }, { transform: offscreen }],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+        anim.finished.then(cleanup).catch(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#openDrawer(); }
+    close() { this.#closeDrawer(); }
+
+    // ─── Render ───
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Re-adopt static sheet (may be stripped by base _scheduleRender)
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Inject backdrop overlay into dialog (destroyed by innerHTML, re-created here)
+        const dialog = this._shadow.querySelector('dialog[data-dialog]');
+        if (dialog) this.#ensureOverlay(dialog);
+
+        // Auto-open after first render
+        if (this._autoOpen) {
+          this._autoOpen = false;
+          requestAnimationFrame(() => this.#openDrawer());
+        }
+      } catch (e) {
+        console.error('[cx-drawer]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-drawer', CxDrawer);
+  return CxDrawer;
+}

package/src/elements/fab.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/fab.rs
+
+export interface CxFabAttributes {
+    icon?: string;
+    label?: string;
+    ariaLabel?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'rounded' | 'pill';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    hasPopup?: boolean;
+    expanded?: boolean;
+    controls?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-fab': HTMLElement & CxFabAttributes;
+  }
+}