@m3e/card 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "m3e-card",
-      "description": "A content container for text, images (or other media), and actions in the context of a single subject.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content of the card without padding.\n- **header** - Renders the header of the card.\n- **content** - Renders the content of the card with padding.\n- **actions** - Renders the actions of the card.\n- **footer** - Renders the footer of the card.\n\n### **CSS Properties:**\n - **--m3e-card-padding** - Internal spacing for all slotted regions _(default: undefined)_\n- **--m3e-card-shape** - Corner radius of the card container. _(default: undefined)_\n- **--m3e-filled-card-text-color** - Foreground color for text content in filled cards. _(default: undefined)_\n- **--m3e-filled-card-container-color** - Background color of the filled card container. _(default: undefined)_\n- **--m3e-filled-card-container-elevation** - Elevation level for filled card container. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-color** - Text color when filled card is disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-filled-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-filled-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-elevated-card-text-color** - Foreground color for text content in elevated cards. _(default: undefined)_\n- **--m3e-elevated-card-container-color** - Background color of the elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-container-elevation** - Elevation level for elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-color** - Text color when elevated card is disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-elevated-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-elevated-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-text-color** - Foreground color for text content in outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-container-elevation** - Elevation level for outlined card container. _(default: undefined)_\n- **--m3e-outlined-card-outline-color** - Border color for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-outline-thickness** - Border thickness for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-color** - Text color when outlined card is disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-color** - Border color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-opacity** - Border opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-outline-color** - Border color on hover. _(default: undefined)_\n- **--m3e-outlined-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-outline-color** - Border color on focus. _(default: undefined)_\n- **--m3e-outlined-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-outline-color** - Border color on press. _(default: undefined)_",
+      "description": "A content container for text, images (or other media), and actions in the context of a single subject.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the content of the card without padding.\n- **header** - Renders the header of the card.\n- **content** - Renders the content of the card with padding.\n- **actions** - Renders the actions of the card.\n- **footer** - Renders the footer of the card.\n\n### **CSS Properties:**\n - **--m3e-card-padding** - Internal spacing for all slotted regions _(default: undefined)_\n- **--m3e-card-shape** - Corner radius of the card container. _(default: undefined)_\n- **--m3e-filled-card-text-color** - Foreground color for text content in filled cards. _(default: undefined)_\n- **--m3e-filled-card-container-color** - Background color of the filled card container. _(default: undefined)_\n- **--m3e-filled-card-container-elevation** - Elevation level for filled card container. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-color** - Text color when filled card is disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-filled-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-filled-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-elevated-card-text-color** - Foreground color for text content in elevated cards. _(default: undefined)_\n- **--m3e-elevated-card-container-color** - Background color of the elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-container-elevation** - Elevation level for elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-color** - Text color when elevated card is disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-elevated-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-elevated-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-text-color** - Foreground color for text content in outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-container-elevation** - Elevation level for outlined card container. _(default: undefined)_\n- **--m3e-outlined-card-outline-color** - Border color for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-outline-thickness** - Border thickness for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-color** - Text color when outlined card is disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-color** - Border color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-opacity** - Border opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-outline-color** - Border color on hover. _(default: undefined)_\n- **--m3e-outlined-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-outline-color** - Border color on focus. _(default: undefined)_\n- **--m3e-outlined-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-outline-color** - Border color on press. _(default: undefined)_",
       "attributes": [
         {
           "name": "actionable",
@@ -25,6 +25,51 @@
           "name": "variant",
           "description": "The appearance variant of the card.",
           "values": [{ "name": "CardVariant" }]
+        },
+        {
+          "name": "href",
+          "description": "The URL to which the link button points.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "The target of the link button.",
+          "values": [{ "name": "LinkTarget" }]
+        },
+        {
+          "name": "rel",
+          "description": "The relationship between the `target` of the link button and the document.",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "A value indicating whether the `target` of the link button will be downloaded,\r\noptionally specifying the new name of the file.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the element, submitted as a pair with the element's `value`\r\nas part of form data, when the element is used to submit a form.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value associated with the element's name when it's submitted with form data.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "The type of the element.",
+          "values": [{ "name": "FormSubmitterType" }]
+        },
+        {
+          "name": "disabled-interactive",
+          "description": "Whether the element is disabled and interactive.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled.",
+          "values": []
         }
       ],
       "references": []

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { unsafeCSS, css, LitElement, html } from 'lit';
-import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, Role, PressedController, renderPseudoLink } from '@m3e/core';
+import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, PressedController, renderPseudoLink } from '@m3e/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -449,7 +449,6 @@ const CardVariantStyle = [
 
 var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_handleClick;
 /**
- * @summary
  * A content container for text, images (or other media), and actions in the context of a single subject.
  *
  * @description
@@ -493,6 +492,8 @@ var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_han
  * @attr orientation - The orientation of the card.
  * @attr variant - The appearance variant of the card.
  *
+ * @fires click - Emitted when the element is clicked.
+ *
  * @cssprop --m3e-card-padding - Internal spacing for all slotted regions
  * @cssprop --m3e-card-shape - Corner radius of the card container.
  * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.
@@ -566,7 +567,7 @@ var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_han
  * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.
  * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.
  */
-let M3eCardElement = class M3eCardElement extends KeyboardClick(LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "none"), true))))))) {
+let M3eCardElement = class M3eCardElement extends KeyboardClick(LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true)))))) {
     constructor() {
         super();
         _M3eCardElement_instances.add(this);
@@ -642,6 +643,16 @@ let M3eCardElement = class M3eCardElement extends KeyboardClick(LinkButton(FormS
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
+        if (!this.actionable && this.hasAttribute("tabindex")) {
+            this.removeAttribute("tabindex");
+        }
+    }
+    /** @inheritdoc */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (!this.actionable && this.hasAttribute("tabindex")) {
+            this.removeAttribute("tabindex");
+        }
     }
 };
 _M3eCardElement_clickHandler = new WeakMap();