feat(card): add new component

etc/lime-elements.api.md

@@ -198,6 +198,17 @@ export namespace Components {
         "type"?: CalloutType;
     }
     // @beta
+    export interface LimelCard {
+        "actions"?: Array<ActionBarItem | ListSeparator>;
+        "clickable": boolean;
+        "heading"?: string;
+        "icon"?: string | Icon;
+        "image"?: Image_2;
+        "orientation": 'landscape' | 'portrait';
+        "subheading"?: string;
+        "value"?: string;
+    }
+    // @beta
     export interface LimelChart {
         "accessibleItemsLabel"?: string;
         "accessibleLabel"?: string;
@@ -985,6 +996,10 @@ namespace JSX_2 {
         "limel-button-group": LimelButtonGroup;
         // (undocumented)
         "limel-callout": LimelCallout;
+        // Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
+        //
+        // (undocumented)
+        "limel-card": LimelCard;
         // Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
         //
         // (undocumented)
@@ -1167,6 +1182,18 @@ namespace JSX_2 {
         "type"?: CalloutType;
     }
     // @beta
+    interface LimelCard {
+        "actions"?: Array<ActionBarItem | ListSeparator>;
+        "clickable"?: boolean;
+        "heading"?: string;
+        "icon"?: string | Icon;
+        "image"?: Image_2;
+        "onActionSelected"?: (event: LimelCardCustomEvent<ActionBarItem>) => void;
+        "orientation"?: 'landscape' | 'portrait';
+        "subheading"?: string;
+        "value"?: string;
+    }
+    // @beta
     interface LimelChart {
         "accessibleItemsLabel"?: string;
         "accessibleLabel"?: string;
@@ -1839,6 +1866,16 @@ export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLimelButtonGroupElement;
 }
 
+// Warning: (ae-missing-release-tag) "LimelCardCustomEvent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export interface LimelCardCustomEvent<T> extends CustomEvent<T> {
+    // (undocumented)
+    detail: T;
+    // (undocumented)
+    target: HTMLLimelCardElement;
+}
+
 // Warning: (ae-missing-release-tag) "LimelCheckboxCustomEvent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -2249,10 +2286,12 @@ export interface ListItem<T = any> {
 }
 
 // @public
-export interface ListSeparator {
+interface ListSeparator {
     separator: true;
     text?: string;
 }
+export { ListSeparator }
+export { ListSeparator as ListSeparator1 }
 
 // @public
 export type ListType = 'selectable' | 'radio' | 'checkbox';

src/components/card/card.scss

@@ -0,0 +1,148 @@
+/**
+* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;
+* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;
+* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;
+* @prop --card-background-color: background color of the card.
+*/
+
+@use '../../style/mixins';
+
+$default-border-radius: 0.95rem;
+
+* {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+}
+
+:host(limel-card) {
+    display: flex;
+    border-radius: var(--card-border-radius, $default-border-radius);
+}
+
+section {
+    box-sizing: border-box;
+    @include mixins.visualize-keyboard-focus;
+
+    display: flex;
+    gap: 0.5rem;
+
+    flex-direction: column;
+    :host(limel-card[orientation='landscape']) & {
+        flex-direction: row;
+    }
+
+    border-radius: var(--card-border-radius, $default-border-radius);
+    border: 1px solid rgb(var(--contrast-500));
+
+    padding: 0.25rem;
+    background-color: var(
+        --card-background-color,
+        var(--lime-elevated-surface-background-color)
+    );
+
+    :host(limel-card[clickable]:not([disabled='true']):not([disabled])) & {
+        @include mixins.is-flat-clickable(
+            $background-color:
+                var(
+                    --card-background-color,
+                    var(--lime-elevated-surface-background-color)
+                ),
+            $background-color--hovered:
+                var(
+                    --card-background-color,
+                    var(--lime-elevated-surface-background-color)
+                )
+        );
+    }
+
+    :host(limel-card[clickable]:hover) & {
+        border-color: transparent;
+    }
+}
+
+.body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+img {
+    transition: filter 0.6s ease;
+    object-fit: cover;
+    border-radius: calc(
+        var(--card-border-radius, $default-border-radius) / 1.4
+    );
+    :host(limel-card[orientation='portrait']) & {
+        width: 100%;
+    }
+
+    :host(limel-card[orientation='landscape']) & {
+        max-width: 40%;
+        height: 100%;
+    }
+
+    :host(limel-card:hover) & {
+        transition-duration: 0.2s;
+        filter: saturate(1.3);
+    }
+}
+
+limel-markdown {
+    padding: 0.5rem 0.75rem;
+}
+
+header {
+    display: flex;
+    justify-content: center;
+
+    gap: 0.5rem;
+
+    padding: 0.25rem 0.75rem;
+    :host(limel-card[orientation='landscape']) & {
+        padding-top: 0.5rem;
+    }
+
+    &:has(limel-icon) {
+        padding-left: 0.25rem;
+    }
+
+    .headings {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+
+    limel-icon {
+        flex-shrink: 0;
+        width: 2rem;
+    }
+
+    h1 {
+        font-size: 1.125rem;
+        font-weight: 500;
+        color: var(--card-heading-color, rgb(var(--contrast-1100)));
+        letter-spacing: -0.03125rem; // 0.5px
+    }
+
+    h2 {
+        font-size: 0.875rem;
+        font-weight: 400;
+        color: var(--card-subheading-color, rgb(var(--contrast-1000)));
+    }
+
+    h1,
+    h2 {
+        word-break: break-word;
+        hyphens: auto;
+        -webkit-hyphens: auto;
+        margin: 0;
+    }
+}
+
+limel-action-bar {
+    padding: 0.5rem;
+    margin-left: auto;
+}