@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/card/card.js

@@ -1,16 +1,18 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { attr, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { CardFocusMode, CardEventNames } from './card.options.js';
+import { isTabbable } from 'tabbable';
+import { keyEscape, keyTab, keyEnter } from '@microsoft/fast-web-utilities';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { FASTElement, Updates, attr, observable } from "@microsoft/fast-element";
-import { CardFocusMode, CardEventNames } from "./card.options";
-import { isTabbable } from "tabbable";
-import { keyEnter, keyEscape, keyTab } from "@microsoft/fast-web-utilities";
 /**
  * Card
- * @summary A versatile component for displaying interactive card elements with customizable styles and behaviors.
+ * @summary A versatile surface that can display rich content, optional header/footer regions, and interactive behaviors.
  *
  * @example
  * ```html
@@ -22,365 +24,379 @@ import { keyEnter, keyEscape, keyTab } from "@microsoft/fast-web-utilities";
  *   aria-describedby="descId"
  *   aria-labelledby="labelId"
  * >
- *   <div slot="header">Header content</div>
  *   <div>Card main content</div>
- *   <div slot="footer">Footer content</div>
  * </fabric-card>
  * ```
  *
- * @attr {CardFocusMode} focus-mode - Focus behavior within the card.
- * @attr {CardAppearance | undefined} appearance - Visual style of the card.
- * @attr {CardOrientation | undefined} orientation - Layout direction of the card.
- * @attr {boolean} disabled - Indicates if the card is disabled.
- * @attr {boolean} interactive - Determines whether the card is interactive.
- * @attr {string | undefined} aria-describedby - Provides descriptive text for assistive technologies via `aria-describedby`.
- * @attr {string | undefined} aria-labelledby - Provides a label for assistive technologies via `aria-labelledby`.
+ * @attr {CardFocusMode} focus-mode - Controls keyboard focus behavior inside the card (including focus trapping and Tab/Escape behavior).
+ * @attr {CardAppearance | undefined} appearance - Sets the visual style of the card (for example `filled` or `outline`).
+ * @attr {CardOrientation | undefined} orientation - Sets the card layout direction (horizontal or vertical).
+ * @attr {string} role - Sets the ARIA role; automatically switches to `button` when `interactive` is true.
+ * @attr {string | undefined} value - Optional value associated with the card; emitted with click events.
+ * @attr {string | undefined} href - Optional link value that is surfaced in the emitted click event.
+ * @attr {boolean} disabled - Disables interactive behaviors and keyboard handling when set.
+ * @attr {boolean} interactive - Enables interactive behaviors (for example Enter triggers click) and updates the role.
+ * @attr {string | undefined} aria-describedby - Sets `aria-describedby` on the internal root for assistive descriptions.
+ * @attr {string | undefined} aria-labelledby - Sets `aria-labelledby` on the internal root for assistive labeling.
  *
- * @prop {ElementStyles | undefined} computedStylesheet - Computed styles for the card.
- * @prop {HTMLElement} card - The main card element.
- * @prop {HTMLElement} root - The root element of the card.
- * @prop {CardFocusMode} focusMode - Focus behavior within the card, set via `focus-mode` attribute.
- * @prop {CardAppearance | undefined} appearance - Visual style of the card.
- * @prop {CardOrientation | undefined} orientation - Layout direction of the card.
- * @prop {boolean} disabled - Indicates if the card is disabled.
- * @prop {boolean} interactive - Determines whether the card is interactive.
- * @prop {string | undefined} ariaDescribedby - Provides descriptive text for assistive technologies via `aria-describedby`.
- * @prop {string | undefined} ariaLabelledby - Provides a label for assistive technologies via `aria-labelledby`.
+ * @prop {CardFocusMode} focusMode - Reflects the `focus-mode` attribute and governs keyboard focus handling.
+ * @prop {CardAppearance | undefined} appearance - Reflects the chosen visual style of the card.
+ * @prop {CardOrientation | undefined} orientation - Reflects whether content is arranged horizontally or vertically.
+ * @prop {string} role - Current ARIA role applied to the card surface.
+ * @prop {string | undefined} value - Value included in emitted click events for identification.
+ * @prop {string | undefined} href - Link value included in emitted click events.
+ * @prop {boolean} disabled - Indicates whether the card is inert to pointer and keyboard interaction.
+ * @prop {boolean} interactive - Toggles interactive keyboard/mouse behaviors and role switching.
+ * @prop {string | undefined} ariaDescribedby - Programmatic backing property for `aria-describedby`.
+ * @prop {string | undefined} ariaLabelledby - Programmatic backing property for `aria-labelledby`.
+ * @prop {HTMLElement} card - Reference to the primary card element within the template.
+ * @prop {HTMLElement} root - Reference to the root container wrapping the card content.
  *
- * @slot - Default slot for card content.
+ * @slot default - Default slot for the card's content.
  *
- * @csspart card - The main card element.
- * @csspart root - The root element of the card.
+ * @csspart card - Styles the main card surface element.
+ * @csspart root - Styles the outermost root container element.
+ * @csspart header - Styles the header region of the card.
+ * @csspart content - Styles the content container region of the card.
  *
- * @cssprop --card-width - The width of the card.
- * @cssprop --card-height - The height of the card.
- * @cssprop --card-elevation - The z-index of the card.
+ * @cssprop --card-width - Controls the card width (any valid CSS length).
+ * @cssprop --card-height - Controls the card height (defaults to fit-content).
+ * @cssprop --card-elevation - Controls the card elevation level for visual stacking.
+ * @cssprop --card-padding - Controls the padding applied to the card content.
  *
- * @method focusFirstElement - Focuses the first element in the card.
- * @method focusLastElement - Focuses the last element in the card.
- * @method clickHandler - Handles click events on the card.
- * @method keydownHandler - Handles keydown events on the card.
+ * @method focusFirstElement - Moves focus to the first tabbable element (or the card if none exist).
+ * @method focusLastElement - Moves focus to the last tabbable element within the card.
+ * @method clickHandler - Handles pointer clicks and emits the card click event when eligible.
+ * @method keydownHandler - Handles keyboard interaction including Enter activation and focus management.
  *
- * @fires click - Emitted when the card is clicked.
- * @fires interactive-changed - Emitted when the interactive state changes.
+ * @fires click - Fired when an interactive, enabled card is activated; detail includes `interactive`, `value`, and `href`.
+ * @fires interactive-changed - Fired when the `interactive` state changes; detail includes the new value.
  *
  * @extends FASTElement
  * @tagname fabric-card
  * @public
  */
-export class Card extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Focus behavior within the card, set via `focus-mode` attribute.
-         * @public
-         * @observable
-         * @attr focus-mode
-         */
-        this.focusMode = CardFocusMode.off;
-        /**
-         * The role of the card.
-         * @public
-         * @attr
-         */
-        this.role = "group";
-        /**
-         * Indicates if the card is disabled.
-         * @public
-         * @attr disabled
-         */
-        this.disabled = false;
-        /**
-         * Determines whether the card is interactive.
-         * @public
-         * @observable
-         * @attr interactive
-         */
-        this.interactive = false;
-        /**
-         * Focuses the element at the specified index.
-         * @private
-         * @param index - The index of the element to focus.
-         */
-        this.focusElementAtIndex = (index) => {
-            if (this.bounds.length > 0) {
-                this.bounds[index].focus();
-            }
-            else {
-                this.card.focus();
-            }
-        };
-        /**
-         * Focuses the first element in the card.
-         * @public
-         */
-        this.focusFirstElement = () => {
-            this.focusElementAtIndex(0);
-        };
-        /**
-         * Focuses the last element in the card.
-         * @public
-         */
-        this.focusLastElement = () => {
-            if (this.bounds.length > 0) {
-                this.focusElementAtIndex(this.bounds.length - 1);
-            }
-        };
-        /**
-         * Emits an event when the interactive state changes.
-         * @protected
-         */
-        this.interactiveChanged = () => {
-            this.role = this.interactive ? "button" : "group";
-            this.dispatchEvent(new CustomEvent(CardEventNames.interactiveChanged, {
-                detail: {
-                    interactive: this.interactive
-                }
-            }));
-        };
-        /**
-         * Gets the tabbable elements within the given context.
-         * @private
-         * @param context - The context in which to find tabbable elements.
-         * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
-         */
-        this.getTabQueueBounds = (context) => {
-            const bounds = [];
-            return Card.reduceTabbableItems(bounds, context);
-        };
-    }
-    /**
-     * Called when the element is added to the document.
-     * @public
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.setComponent();
-    }
+class Card extends FASTElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Called when the element is removed from the document.
+     * Focus behavior within the card, set via `focus-mode` attribute.
      * @public
+     * @attr focus-mode
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
+    this.focusMode = CardFocusMode.off;
     /**
-     * Handles click events on the card.
+     * The role of the card.
      * @public
-     * @param e - The mouse event.
-     * @returns {boolean | void} Returns true if the event was handled.
+     * @attr
      */
-    clickHandler(e) {
-        if (this.disabled || e.defaultPrevented || !this.interactive) {
-            return;
-        }
-        e.preventDefault();
-        this.emitClickEvent();
-    }
+    this.role = "group";
     /**
-     * Handles keydown events on the card.
+     * Indicates if the card is disabled.
      * @public
-     * @param e - The keyboard event.
-     * @returns {boolean | void | null} Returns true if the event was handled.
+     * @attr disabled
      */
-    keydownHandler(e) {
-        if (this.disabled || e.defaultPrevented) {
-            return true;
-        }
-        const { key, target, currentTarget, shiftKey } = e;
-        const isTargetCurrent = target === currentTarget;
-        const isFocusModeOffOrTabOnly = this.focusMode === CardFocusMode.off ||
-            this.focusMode === CardFocusMode.tabOnly;
-        const isFocusModeOff = this.focusMode === CardFocusMode.off;
-        const isLastIndexFocused = this.isBoundsLastIndexFocused;
-        const isZeroIndexFocused = this.isBoundsZeroIndexFocused;
-        switch (key) {
-            case keyEnter:
-                if (!isTargetCurrent) {
-                    return true;
-                }
-                if (this.interactive) {
-                    this.emitClickEvent();
-                }
-                else if (!isFocusModeOff) {
-                    Updates.enqueue(() => {
-                        this.root.inert = false;
-                        this.focusFirstElement();
-                    });
-                }
-                e.preventDefault();
-                break;
-            case keyTab:
-                if (this.shouldTrapFocus) {
-                    if ((isLastIndexFocused && !shiftKey) ||
-                        (isZeroIndexFocused && shiftKey)) {
-                        e.preventDefault();
-                        isLastIndexFocused
-                            ? this.focusFirstElement()
-                            : this.focusLastElement();
-                    }
-                    return true;
-                }
-                else if (this.focusMode === CardFocusMode.tabExit) {
-                    if ((isLastIndexFocused && !shiftKey) ||
-                        (isZeroIndexFocused && shiftKey) ||
-                        document.activeElement === this.card) {
-                        this.root.inert = !this.root.inert;
-                    }
-                    return true;
-                }
-                return true;
-            case keyEscape:
-                if (this.focusMode !== CardFocusMode.off) {
-                    this.card.focus();
-                }
-                if (!isFocusModeOffOrTabOnly) {
-                    this.root.inert = true;
-                }
-                e.preventDefault();
-                break;
-            default:
-                return true;
-        }
-    }
+    this.disabled = false;
     /**
-     * Determines if the card is focusable.
+     * Determines whether the card is interactive.
      * @public
-     * @returns {boolean} True if the card is focusable.
+     * @observable
+     * @attr interactive
      */
-    get isFocusable() {
-        return !this.disabled && this.focusMode !== "off";
-    }
+    this.interactive = false;
     /**
-     * Gets the tabbable bounds within the card.
-     * @public
-     * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
+     * Focuses the element at the specified index.
+     * @private
+     * @param index - The index of the element to focus.
      */
-    get bounds() {
-        return this.getTabQueueBounds(this);
-    }
+    this.focusElementAtIndex = index => {
+      if (this.bounds.length > 0) {
+        this.bounds[index].focus();
+      } else {
+        this.card.focus();
+      }
+    };
     /**
-     * Checks if the first element in the bounds is focused.
+     * Focuses the first element in the card.
      * @public
-     * @returns {boolean | void} True if the first element is focused.
      */
-    get isBoundsZeroIndexFocused() {
-        if (this.bounds.length > 0) {
-            return document.activeElement === this.bounds[0];
-        }
-    }
+    this.focusFirstElement = () => {
+      this.focusElementAtIndex(0);
+    };
     /**
-     * Checks if the last element in the bounds is focused.
+     * Focuses the last element in the card.
      * @public
-     * @returns {boolean | void} True if the last element is focused.
      */
-    get isBoundsLastIndexFocused() {
-        if (this.bounds.length > 0) {
-            return document.activeElement === this.bounds[this.bounds.length - 1];
-        }
-    }
+    this.focusLastElement = () => {
+      if (this.bounds.length > 0) {
+        this.focusElementAtIndex(this.bounds.length - 1);
+      }
+    };
     /**
-     * Determines if focus should be trapped within the card.
-     * @public
-     * @returns {boolean} True if focus should be trapped.
-     */
-    get shouldTrapFocus() {
-        return this.focusMode === CardFocusMode.noTab;
-    }
-    /**
-     * Emits a click event on the card.
+     * Emits an event when the interactive state changes.
      * @protected
      */
-    emitClickEvent() {
-        this.dispatchEvent(new CustomEvent(CardEventNames.click, {
-            detail: {
-                interactive: this.interactive,
-                value: this.value,
-                href: this.href
-            }
-        }));
-    }
+    this.interactiveChanged = () => {
+      this.role = this.interactive ? "button" : "group";
+      this.emitInteractiveChangedEvent();
+    };
     /**
-     * Sets the component state based on focus mode and disabled state.
+     * Gets the tabbable elements within the given context.
      * @private
+     * @param context - The context in which to find tabbable elements.
+     * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
      */
-    setComponent() {
-        if ((this.focusMode !== CardFocusMode.off &&
-            this.focusMode !== CardFocusMode.tabOnly) ||
-            this.disabled) {
-            this.root.inert = true;
-        }
+    this.getTabQueueBounds = context => {
+      const bounds = [];
+      return Card.reduceTabbableItems(bounds, context);
+    };
+  }
+  /**
+   * Called when the element is added to the document.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.requestInertUpdate();
+  }
+  /**
+   * Called when the element is removed from the document.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  /**
+   * Reacts to focus mode changes.
+   */
+  focusModeChanged() {
+    this.requestInertUpdate();
+  }
+  /**
+   * Reacts to disabled changes.
+   */
+  disabledChanged() {
+    this.requestInertUpdate();
+  }
+  /**
+   * Handles click events on the card.
+   * @public
+   * @param e - The mouse event.
+   * @returns {boolean | void} Returns true if the event was handled.
+   */
+  clickHandler(e) {
+    if (this.disabled || e.defaultPrevented || !this.interactive) {
+      return;
     }
-    /**
-     * Reduces elements to only tabbable ones.
-     * @private
-     * @param elements - The elements to filter.
-     * @param element - The element to check.
-     * @returns {HTMLElement[]} The tabbable elements.
-     */
-    static reduceTabbableItems(elements, element) {
-        if (element.getAttribute("tabindex") === "-1") {
-            return elements;
+    e.preventDefault();
+    this.emitClickEvent();
+  }
+  /**
+   * Handles keydown events on the card.
+   * @public
+   * @param e - The keyboard event.
+   * @returns {boolean | void | null} Returns true if the event was handled.
+   */
+  keydownHandler(e) {
+    if (this.disabled || e.defaultPrevented) {
+      return true;
+    }
+    const {
+      key,
+      target,
+      currentTarget,
+      shiftKey
+    } = e;
+    const isTargetCurrent = target === currentTarget;
+    const isFocusModeOffOrTabOnly = this.focusMode === CardFocusMode.off || this.focusMode === CardFocusMode.tabOnly;
+    const isFocusModeOff = this.focusMode === CardFocusMode.off;
+    const isLastIndexFocused = this.isBoundsLastIndexFocused;
+    const isZeroIndexFocused = this.isBoundsZeroIndexFocused;
+    switch (key) {
+      case keyEnter:
+        if (!isTargetCurrent) {
+          return true;
+        }
+        if (this.interactive) {
+          this.emitClickEvent();
+        } else if (!isFocusModeOff) {
+          Updates.enqueue(() => {
+            this.root.inert = false;
+            this.focusFirstElement();
+          });
+        }
+        e.preventDefault();
+        break;
+      case keyTab:
+        if (this.shouldTrapFocus) {
+          if (isLastIndexFocused && !shiftKey || isZeroIndexFocused && shiftKey) {
+            e.preventDefault();
+            isLastIndexFocused ? this.focusFirstElement() : this.focusLastElement();
+          }
+          return true;
+        } else if (this.focusMode === CardFocusMode.tabExit) {
+          if (isLastIndexFocused && !shiftKey || isZeroIndexFocused && shiftKey || document.activeElement === this.card) {
+            this.root.inert = !this.root.inert;
+          }
+          return true;
+        }
+        return true;
+      case keyEscape:
+        if (this.focusMode !== CardFocusMode.off) {
+          this.card.focus();
         }
-        if (isTabbable(element) ||
-            (Card.isFocusableFastElement(element) && Card.hasTabbableShadow(element))) {
-            elements.push(element);
-            return elements;
+        if (!isFocusModeOffOrTabOnly) {
+          this.root.inert = true;
         }
-        return Array.from(element.children).reduce((elements, currentElement) => Card.reduceTabbableItems(elements, currentElement), elements);
+        e.preventDefault();
+        break;
+      default:
+        return true;
     }
-    /**
-     * Checks if a FASTElement is focusable.
-     * @private
-     * @param element - The FASTElement to check.
-     * @returns {boolean} True if the element is focusable.
-     */
-    static isFocusableFastElement(element) {
-        var _a, _b;
-        return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
+  }
+  /**
+   * Determines if the card is focusable.
+   * @public
+   * @returns {boolean} True if the card is focusable.
+   */
+  get isFocusable() {
+    return !this.disabled && (this.interactive || this.focusMode !== CardFocusMode.off);
+  }
+  /**
+   * Gets the tabbable bounds within the card.
+   * @public
+   * @returns {(HTMLElement | SVGElement)[]} The tabbable elements.
+   */
+  get bounds() {
+    return this.getTabQueueBounds(this);
+  }
+  /**
+   * Checks if the first element in the bounds is focused.
+   * @public
+   * @returns {boolean | void} True if the first element is focused.
+   */
+  get isBoundsZeroIndexFocused() {
+    if (this.bounds.length > 0) {
+      return document.activeElement === this.bounds[0];
     }
-    /**
-     * Checks if a FASTElement has tabbable shadow elements.
-     * @private
-     * @param element - The FASTElement to check.
-     * @returns {boolean} True if the shadow contains tabbable elements.
-     */
-    static hasTabbableShadow(element) {
-        var _a, _b;
-        return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some((x) => {
-            return isTabbable(x);
-        });
+  }
+  /**
+   * Checks if the last element in the bounds is focused.
+   * @public
+   * @returns {boolean | void} True if the last element is focused.
+   */
+  get isBoundsLastIndexFocused() {
+    if (this.bounds.length > 0) {
+      return document.activeElement === this.bounds[this.bounds.length - 1];
+    }
+  }
+  /**
+   * Determines if focus should be trapped within the card.
+   * @public
+   * @returns {boolean} True if focus should be trapped.
+   */
+  get shouldTrapFocus() {
+    return this.focusMode === CardFocusMode.noTab;
+  }
+  emitClickEvent() {
+    this.dispatchEvent(new CustomEvent(CardEventNames.click, {
+      detail: {
+        interactive: this.interactive,
+        value: this.value,
+        href: this.href
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  emitInteractiveChangedEvent() {
+    this.dispatchEvent(new CustomEvent(CardEventNames.interactiveChanged, {
+      detail: {
+        interactive: this.interactive
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  /**
+   * Sets the component state based on focus mode and disabled state.
+   * @private
+   */
+  updateInertState() {
+    if (!this.root) {
+      return;
+    }
+    const shouldBeInert = this.disabled || this.focusMode !== CardFocusMode.off && this.focusMode !== CardFocusMode.tabOnly;
+    this.root.inert = shouldBeInert;
+  }
+  requestInertUpdate() {
+    var _a;
+    if (!((_a = this.$fastController) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+      return;
+    }
+    Updates.enqueue(() => this.updateInertState());
+  }
+  /**
+   * Reduces elements to only tabbable ones.
+   * @private
+   * @param elements - The elements to filter.
+   * @param element - The element to check.
+   * @returns {HTMLElement[]} The tabbable elements.
+   */
+  static reduceTabbableItems(elements, element) {
+    if (element.getAttribute("tabindex") === "-1") {
+      return elements;
+    }
+    if (isTabbable(element) || Card.isFocusableFastElement(element) && Card.hasTabbableShadow(element)) {
+      elements.push(element);
+      return elements;
     }
+    return Array.from(element.children).reduce((elements, currentElement) => Card.reduceTabbableItems(elements, currentElement), elements);
+  }
+  /**
+   * Checks if a FASTElement is focusable.
+   * @private
+   * @param element - The FASTElement to check.
+   * @returns {boolean} True if the element is focusable.
+   */
+  static isFocusableFastElement(element) {
+    var _a, _b;
+    return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
+  }
+  /**
+   * Checks if a FASTElement has tabbable shadow elements.
+   * @private
+   * @param element - The FASTElement to check.
+   * @returns {boolean} True if the shadow contains tabbable elements.
+   */
+  static hasTabbableShadow(element) {
+    var _a, _b;
+    return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some(x => {
+      return isTabbable(x);
+    });
+  }
 }
-__decorate([
-    observable,
-    attr({ attribute: "focus-mode" })
-], Card.prototype, "focusMode", void 0);
-__decorate([
-    attr
-], Card.prototype, "appearance", void 0);
-__decorate([
-    attr
-], Card.prototype, "role", void 0);
-__decorate([
-    attr
-], Card.prototype, "value", void 0);
-__decorate([
-    attr
-], Card.prototype, "href", void 0);
-__decorate([
-    attr
-], Card.prototype, "orientation", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Card.prototype, "disabled", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Card.prototype, "interactive", void 0);
-__decorate([
-    attr({ attribute: "aria-describedby" })
-], Card.prototype, "ariaDescribedby", void 0);
-__decorate([
-    attr({ attribute: "aria-labelledby" })
-], Card.prototype, "ariaLabelledby", void 0);
-//# sourceMappingURL=card.js.map
+__decorate([attr({
+  attribute: "focus-mode"
+})], Card.prototype, "focusMode", void 0);
+__decorate([attr], Card.prototype, "appearance", void 0);
+__decorate([attr], Card.prototype, "role", void 0);
+__decorate([attr], Card.prototype, "value", void 0);
+__decorate([attr], Card.prototype, "href", void 0);
+__decorate([attr], Card.prototype, "orientation", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Card.prototype, "disabled", void 0);
+__decorate([observable, attr({
+  mode: "boolean"
+})], Card.prototype, "interactive", void 0);
+__decorate([attr({
+  attribute: "aria-describedby"
+})], Card.prototype, "ariaDescribedby", void 0);
+__decorate([attr({
+  attribute: "aria-labelledby"
+})], Card.prototype, "ariaLabelledby", void 0);
+
+export { Card };