@aurodesignsystem-dev/auro-card 0.0.0-pr136.1 → 0.0.0-pr139.0

package/demo/auro-card.min.js

@@ -319,22 +319,15 @@ var styleCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:hos
 var tokensCss = i$5`:host{--ds-auro-card-border-color: transparent;--ds-auro-card-background-color: transparent;--ds-auro-card-texticon-color: inherit}
 `;
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The `<auro-card>` element provides users a flexible way to convey a summary of information.
+ * @customElement auro-card
  *
- * @attr {String} variant - Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`.
- * @attr {Boolean} border - Adds desired UI border to the `auro-card` element.
- * @attr {Boolean} center - Centers content within the scope of the `auro-card`.
- * @attr {String} href - Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot.
- * @attr {String} rel - Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel).
- * @attr {Boolean} relative - If true, the auto URL re-write feature will be disabled.https://auro.alaskaair.com/components/auro/hyperlink/api#relative
- * @attr {String} role - Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role).
- * @attr {String} target - Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target).
  * @slot image - Content slot for image content.
  * @slot header - Content slot for string text header content.
  * @slot description - Content slot for string text description content.
@@ -352,6 +345,10 @@ class AuroCard extends i$2 {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     /**
      * @private
      */
@@ -376,11 +373,19 @@ class AuroCard extends i$2 {
   static get properties() {
     return {
       /**
-       * Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`.
+       * Adds desired UI border to the `auro-card` element.
        */
-      variant: {
-        type: String,
-        reflect: true,
+      border: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Centers content within the scope of the `auro-card`.
+       */
+      center: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
@@ -388,7 +393,7 @@ class AuroCard extends i$2 {
        */
       href: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -396,15 +401,15 @@ class AuroCard extends i$2 {
        */
       rel: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * If true, the auto URL re-write feature will be disabled. [see here for hyperlink relative](https://auro.alaskaair.com/components/auro/hyperlink/api#relative)
+       * If true, the auto URL re-write feature will be disabled. [See here for info about hyperlink relative attribute](https://auro.alaskaair.com/components/auro/hyperlink/api#relative).
        */
       relative: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -412,7 +417,7 @@ class AuroCard extends i$2 {
        */
       role: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -420,14 +425,23 @@ class AuroCard extends i$2 {
        */
       target: {
         type: String,
-        reflect: true,
+        reflect: true
       },
+
+      /**
+       * Sets the variant of the card.
+       * @type {'inset-content' | 'inset-container' | 'inset-stretch'}
+       */
+      variant: {
+        type: String,
+        reflect: true
+      }
     };
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-card"] - The name of element that you want to register to.
+   * @param {string} [name="auro-card"] - The name of the element that you want to register.
    *
    * @example
    * AuroCard.register("custom-card") // this will register this element to <custom-card/>

package/demo/index.html

@@ -51,10 +51,10 @@
     <script type="module" data-demo-script="true" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-avatar@latest/dist/auro-avatar__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-avatar@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
   </body>
 </html>