atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/card/card.css

@@ -60,10 +60,21 @@
   transform-style: preserve-3d;
 }
 
-.is-flipped .card-flipper {
+:host(.is-flipped) .card-flipper {
   transform: rotateY(180deg);
 }
 
+:host(.is-flippable) {
+  min-height: var(--ui-card-flip-min-height, 280px);
+}
+:host(.is-flippable) .card-container {
+  min-height: var(--ui-card-flip-min-height, 280px);
+}
+
+:host(.is-closed) {
+  display: none !important;
+}
+
 .card-face {
   position: absolute;
   top: 0;
@@ -94,6 +105,10 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   position: relative;
 }
+.card-face-content.has-open-menu {
+  overflow: visible !important;
+  z-index: 100 !important;
+}
 
 .card-details-wrapper {
   display: flex;
@@ -103,106 +118,147 @@
 }
 
 /* --- Variants --- */
-.variant-elevated .card-face-content {
+.card-variant-elevated {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.variant-outlined .card-face-content {
+.card-variant-outlined {
   box-shadow: none;
   border: 2px solid var(--ui-card-border-color, var(--border-default, #e5e7eb));
 }
 
-.variant-filled .card-face-content {
+.card-variant-filled {
   background-color: var(--bg-primary, #f9fafb);
   border: none;
 }
 
-.variant-primary .card-face-content {
+.card-variant-primary {
   border-left: 4px solid var(--ui-card-primary);
 }
-.variant-primary .card-face-content .card-header {
+.card-variant-primary .card-header {
   background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent);
 }
 
-.variant-success .card-face-content {
+.card-variant-success {
   border-left: 4px solid var(--ui-card-success);
 }
-.variant-success .card-face-content .card-header {
+.card-variant-success .card-header {
   background: linear-gradient(to right, rgba(var(--color-success-rgb, 16, 185, 129), 0.1), transparent);
 }
 
-.variant-warning .card-face-content {
+.card-variant-warning {
   border-left: 4px solid var(--ui-card-warning);
 }
-.variant-warning .card-face-content .card-header {
+.card-variant-warning .card-header {
   background: linear-gradient(to right, rgba(var(--color-warning-rgb, 245, 158, 11), 0.1), transparent);
 }
 
-.variant-danger .card-face-content {
+.card-variant-danger {
   border-left: 4px solid var(--ui-card-danger);
 }
-.variant-danger .card-face-content .card-header {
+.card-variant-danger .card-header {
   background: linear-gradient(to right, rgba(var(--color-danger-rgb, 239, 68, 68), 0.1), transparent);
 }
 
-.variant-info .card-face-content {
+.card-variant-info {
   border-left: 4px solid var(--ui-card-info);
 }
-.variant-info .card-face-content .card-header {
+.card-variant-info .card-header {
   background: linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent);
 }
 
+/* --- Status Cards --- */
+.card-variant-status {
+  border: 1px solid var(--border-default, #e5e7eb);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.card-variant-status.card-color-primary {
+  border: 1.5px solid var(--ui-card-primary);
+  background: color-mix(in srgb, var(--ui-card-primary) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-primary .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-primary) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-success {
+  border: 1.5px solid var(--ui-card-success);
+  background: color-mix(in srgb, var(--ui-card-success) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-success .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-success) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-warning {
+  border: 1.5px solid var(--ui-card-warning);
+  background: color-mix(in srgb, var(--ui-card-warning) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-warning .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-warning) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-danger {
+  border: 1.5px solid var(--ui-card-danger);
+  background: color-mix(in srgb, var(--ui-card-danger) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-danger .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-danger) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-info {
+  border: 1.5px solid var(--ui-card-info);
+  background: color-mix(in srgb, var(--ui-card-info) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-info .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-info) 15%, var(--border-default, #e5e7eb));
+}
+
 /* --- Importance & Patterns --- */
-.card-importance-emphasized .card-face-content {
+.card-importance-emphasized {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: none;
   background: linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%);
   color: var(--text-standard, #ffffff);
 }
-.card-importance-emphasized .card-face-content .card-title-text,
-.card-importance-emphasized .card-face-content .card-content,
-.card-importance-emphasized .card-face-content .card-extra,
-.card-importance-emphasized .card-face-content .card-description {
+.card-importance-emphasized .card-title-text,
+.card-importance-emphasized .card-content,
+.card-importance-emphasized .card-extra,
+.card-importance-emphasized .card-description {
   color: var(--text-standard, #ffffff);
 }
-.card-importance-emphasized .card-face-content .card-header,
-.card-importance-emphasized .card-face-content .card-footer {
+.card-importance-emphasized .card-header,
+.card-importance-emphasized .card-footer {
   border-bottom-color: rgba(255, 255, 255, 0.1);
   border-top-color: rgba(255, 255, 255, 0.1);
 }
-.card-importance-emphasized .card-face-content .card-action-btn {
+.card-importance-emphasized .card-action-btn {
   color: rgba(255, 255, 255, 0.7);
 }
-.card-importance-emphasized .card-face-content .card-action-btn:hover {
+.card-importance-emphasized .card-action-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-standard, #ffffff);
 }
 
-.card-pattern-shortcut .card-face-content {
+.card-pattern-shortcut {
   text-align: center;
   padding: 32px 24px;
   align-items: center;
 }
-.card-pattern-shortcut .card-face-content .card-header {
+.card-pattern-shortcut .card-header {
   border-bottom: none;
   padding: 0;
   margin-bottom: 16px;
   flex-direction: column;
 }
-.card-pattern-shortcut .card-face-content .card-header-main {
+.card-pattern-shortcut .card-header-main {
   flex-direction: column;
   gap: 12px;
 }
-.card-pattern-shortcut .card-face-content .card-title-text {
+.card-pattern-shortcut .card-title-text {
   font-size: 20px;
   text-align: center;
 }
-.card-pattern-shortcut .card-face-content .card-avatar {
+.card-pattern-shortcut .card-avatar {
   margin: 0 auto 8px;
   width: 64px;
   height: 64px;
 }
-.card-pattern-shortcut .card-face-content .card-avatar i {
+.card-pattern-shortcut .card-avatar i {
   font-size: 32px;
 }
 
@@ -226,7 +282,7 @@
 }
 
 /* --- Glassmorphism --- */
-.card-glass .card-face-content {
+.card-glass {
   background: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -244,7 +300,7 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-.card-selected .card-face-content {
+.card-selected {
   border-color: var(--ui-card-selected-border) !important;
   box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
 }
@@ -588,11 +644,37 @@
   padding: 20px;
 }
 
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.skeleton-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .skeleton-avatar {
   background: var(--bg-secondary, #f3f4f6);
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .skeleton-text {
@@ -602,6 +684,19 @@
   position: relative;
   overflow: hidden;
 }
+.skeleton-text.skeleton-title {
+  width: 60%;
+}
+.skeleton-text.skeleton-subtitle {
+  width: 40%;
+  height: 12px;
+}
+.skeleton-text.full {
+  width: 100%;
+}
+.skeleton-text.half {
+  width: 50%;
+}
 .skeleton-text::after {
   content: "";
   position: absolute;
@@ -632,32 +727,201 @@
 }
 
 /* --- Dark Theme Support --- */
-:host-context([data-theme=dark]) .card-face-content {
+:host-context(.dark) .card-face-content,
+:host-context([data-theme=dark]) .card-face-content,
+:host(.dark) .card-face-content,
+:host([data-theme=dark]) .card-face-content {
   background: var(--bg-primary, #1f2937);
   border-color: var(--border-default, #374151);
   color: var(--text-standard, #f3f4f6);
 }
-:host-context([data-theme=dark]) .card-title-text {
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore color variants left border in dark mode (excluding emphasized cards) */
+}
+:host-context(.dark) .card-variant-primary:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-primary:not(.card-importance-emphasized),
+:host(.dark) .card-variant-primary:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-primary:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-primary) !important;
+}
+:host-context(.dark) .card-variant-success:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-success:not(.card-importance-emphasized),
+:host(.dark) .card-variant-success:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-success:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-success) !important;
+}
+:host-context(.dark) .card-variant-warning:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-warning:not(.card-importance-emphasized),
+:host(.dark) .card-variant-warning:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-warning:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-warning) !important;
+}
+:host-context(.dark) .card-variant-danger:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-danger:not(.card-importance-emphasized),
+:host(.dark) .card-variant-danger:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-danger:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-danger) !important;
+}
+:host-context(.dark) .card-variant-info:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-info:not(.card-importance-emphasized),
+:host(.dark) .card-variant-info:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-info:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-info) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore status cards colored background and borders in dark mode */
+}
+:host-context(.dark) .card-variant-status,
+:host-context([data-theme=dark]) .card-variant-status,
+:host(.dark) .card-variant-status,
+:host([data-theme=dark]) .card-variant-status {
+  border-color: var(--border-default, #374151);
+}
+:host-context(.dark) .card-variant-status.card-color-primary,
+:host-context([data-theme=dark]) .card-variant-status.card-color-primary,
+:host(.dark) .card-variant-status.card-color-primary,
+:host([data-theme=dark]) .card-variant-status.card-color-primary {
+  border-color: var(--ui-card-primary) !important;
+  background: color-mix(in srgb, var(--ui-card-primary) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-success,
+:host-context([data-theme=dark]) .card-variant-status.card-color-success,
+:host(.dark) .card-variant-status.card-color-success,
+:host([data-theme=dark]) .card-variant-status.card-color-success {
+  border-color: var(--ui-card-success) !important;
+  background: color-mix(in srgb, var(--ui-card-success) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-warning,
+:host-context([data-theme=dark]) .card-variant-status.card-color-warning,
+:host(.dark) .card-variant-status.card-color-warning,
+:host([data-theme=dark]) .card-variant-status.card-color-warning {
+  border-color: var(--ui-card-warning) !important;
+  background: color-mix(in srgb, var(--ui-card-warning) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-danger,
+:host-context([data-theme=dark]) .card-variant-status.card-color-danger,
+:host(.dark) .card-variant-status.card-color-danger,
+:host([data-theme=dark]) .card-variant-status.card-color-danger {
+  border-color: var(--ui-card-danger) !important;
+  background: color-mix(in srgb, var(--ui-card-danger) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-info,
+:host-context([data-theme=dark]) .card-variant-status.card-color-info,
+:host(.dark) .card-variant-status.card-color-info,
+:host([data-theme=dark]) .card-variant-status.card-color-info {
+  border-color: var(--ui-card-info) !important;
+  background: color-mix(in srgb, var(--ui-card-info) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore emphasized cards premium gradient background in dark mode */
+}
+:host-context(.dark) .card-importance-emphasized,
+:host-context([data-theme=dark]) .card-importance-emphasized,
+:host(.dark) .card-importance-emphasized,
+:host([data-theme=dark]) .card-importance-emphasized {
+  border: none !important;
+  background: linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host-context(.dark) .card-importance-emphasized .card-title-text,
+:host-context(.dark) .card-importance-emphasized .card-content,
+:host-context(.dark) .card-importance-emphasized .card-extra,
+:host-context(.dark) .card-importance-emphasized .card-description,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-title-text,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-content,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-extra,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-description,
+:host(.dark) .card-importance-emphasized .card-title-text,
+:host(.dark) .card-importance-emphasized .card-content,
+:host(.dark) .card-importance-emphasized .card-extra,
+:host(.dark) .card-importance-emphasized .card-description,
+:host([data-theme=dark]) .card-importance-emphasized .card-title-text,
+:host([data-theme=dark]) .card-importance-emphasized .card-content,
+:host([data-theme=dark]) .card-importance-emphasized .card-extra,
+:host([data-theme=dark]) .card-importance-emphasized .card-description {
+  color: var(--text-standard, #ffffff) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore glassmorphic cards translucent backdrop and border in dark mode */
+}
+:host-context(.dark) .card-glass,
+:host-context([data-theme=dark]) .card-glass,
+:host(.dark) .card-glass,
+:host([data-theme=dark]) .card-glass {
+  background: rgba(15, 23, 42, 0.45) !important;
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore selected cards border in dark mode */
+}
+:host-context(.dark) .card-selected,
+:host-context([data-theme=dark]) .card-selected,
+:host(.dark) .card-selected,
+:host([data-theme=dark]) .card-selected {
+  border-color: var(--ui-card-selected-border) !important;
+}
+:host-context(.dark) .card-title-text,
+:host-context([data-theme=dark]) .card-title-text,
+:host(.dark) .card-title-text,
+:host([data-theme=dark]) .card-title-text {
   color: var(--text-standard, #f9fafb);
 }
-:host-context([data-theme=dark]) .card-header {
+:host-context(.dark) .card-header,
+:host-context([data-theme=dark]) .card-header,
+:host(.dark) .card-header,
+:host([data-theme=dark]) .card-header {
   border-bottom-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .card-footer {
+:host-context(.dark) .card-footer,
+:host-context([data-theme=dark]) .card-footer,
+:host(.dark) .card-footer,
+:host([data-theme=dark]) .card-footer {
   border-top-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .menu-dropdown {
+:host-context(.dark) .menu-dropdown,
+:host-context([data-theme=dark]) .menu-dropdown,
+:host(.dark) .menu-dropdown,
+:host([data-theme=dark]) .menu-dropdown {
   background: var(--bg-primary, #1f2937);
   border-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .menu-item {
+:host-context(.dark) .menu-item,
+:host-context([data-theme=dark]) .menu-item,
+:host(.dark) .menu-item,
+:host([data-theme=dark]) .menu-item {
   color: var(--bg-secondary, #d1d5db);
 }
-:host-context([data-theme=dark]) .menu-item:hover {
+:host-context(.dark) .menu-item:hover,
+:host-context([data-theme=dark]) .menu-item:hover,
+:host(.dark) .menu-item:hover,
+:host([data-theme=dark]) .menu-item:hover {
   background: var(--color-primary, #374151);
   color: var(--text-standard, #f9fafb);
 }
+:host-context(.dark) .skeleton-text,
+:host-context(.dark) .skeleton-avatar,
 :host-context([data-theme=dark]) .skeleton-text,
-:host-context([data-theme=dark]) .skeleton-avatar {
-  background: var(--color-primary, #374151);
+:host-context([data-theme=dark]) .skeleton-avatar,
+:host(.dark) .skeleton-text,
+:host(.dark) .skeleton-avatar,
+:host([data-theme=dark]) .skeleton-text,
+:host([data-theme=dark]) .skeleton-avatar {
+  background: var(--bg-secondary, #374151);
 }

package/dist/collection/components/card/card.js

@@ -60,6 +60,8 @@ export class Card {
     collapsed = false;
     /** Show close button in header */
     closable = false;
+    /** Controlled closed/dismissed state of the card */
+    closed = false;
     /** Enable selection mode */
     selectable = false;
     /** Selection state */
@@ -117,6 +119,7 @@ export class Card {
     isFlipped = false;
     isMenuOpen = false;
     isCollapsed = false;
+    isClosed = false;
     parsedMenuItems = [];
     magneticTransform = '';
     tiltTransform = '';
@@ -139,10 +142,14 @@ export class Card {
     handleCollapsedChange(newValue) {
         this.isCollapsed = newValue;
     }
+    handleClosedChange(newValue) {
+        this.isClosed = newValue;
+    }
     componentWillLoad() {
         this.parseMenuItems();
         this.isFlipped = this.flipped;
         this.isCollapsed = this.collapsed;
+        this.isClosed = this.closed;
     }
     handleClickOutside(event) {
         if (this.isMenuOpen && this.menuRef && !this.menuRef.contains(event.target)) {
@@ -280,6 +287,8 @@ export class Card {
     };
     handleClose = (e) => {
         e.stopPropagation();
+        this.isClosed = true;
+        this.closed = true;
         this.cardClose.emit();
     };
     renderMenu() {
@@ -333,10 +342,13 @@ export class Card {
             'card-selected': this.selected,
             'card-clickable': !!((this.href || this.clickable) && !this.flippable),
             'card-glass': this.glass,
+            'has-open-menu': this.isMenuOpen,
             [`card-layout-${this.layout}`]: true,
             [`card-importance-${this.importance}`]: true,
             [`card-pattern-${this.pattern}`]: true,
             [`card-type-${this.type}`]: true,
+            [`card-variant-${this.variant}`]: true,
+            [`card-color-${this.color}`]: true,
         };
         const faceStyle = {
             borderRadius: this.borderRadius,
@@ -355,22 +367,30 @@ export class Card {
             borderRadius: this.borderRadius,
             border: this.bordered ? (this.border || undefined) : 'none'
         };
-        return (h("div", { class: "card-face-content card-back", style: cardStyle }, h("div", { class: "card-back-header" }, h("ui-button", { variant: "ghost", onClick: this.toggleFlip, ariaLabel: "Flip card back", icon: "arrow-left", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "card-content" }, h("slot", { name: "back" }, h("div", { class: "card-back-default" }, h("h3", null, "Back Side"), h("p", null, "Add content to the \"back\" slot to customize this side."))), h("slot", { name: "back-content" }))));
+        const backClasses = {
+            'card-face-content': true,
+            'card-back': true,
+            [`card-variant-${this.variant}`]: true,
+            [`card-color-${this.color}`]: true,
+        };
+        return (h("div", { class: backClasses, style: cardStyle }, h("div", { class: "card-back-header" }, h("ui-button", { variant: "ghost", onClick: this.toggleFlip, ariaLabel: "Flip card back", icon: "arrow-left", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "card-content" }, h("slot", { name: "back" }, h("div", { class: "card-back-default" }, h("h3", null, "Back Side"), h("p", null, "Add content to the \"back\" slot to customize this side."))), h("slot", { name: "back-content" }))));
     }
     render() {
         const hostClass = [
             'ui-card',
             `variant-${typeof this.variant === 'string' ? this.variant : 'default'}`,
+            `color-${typeof this.color === 'string' ? this.color : 'default'}`,
             `size-${typeof this.size === 'string' ? this.size : 'md'}`,
             this.isFlipped && 'is-flipped',
             this.loading && 'is-loading',
             this.flippable && 'is-flippable',
+            this.isClosed && 'is-closed',
         ].filter(Boolean).join(' ');
         const containerStyle = {
             width: typeof this.width === 'string' ? this.width : undefined,
             height: typeof this.height === 'string' ? this.height : undefined,
         };
-        return (h(Host, { key: 'ef88aac3904761439d1c4d689cd89c4c47569894', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: 'a9866c010965c9259e2d566ca909965f63e0dbbb', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: '24ef228a94d1e6ffc61bc7fef52c4f34ca88daf2' }, this.ribbon))), this.loading ? (h("div", { class: "card-loading-container", style: { borderRadius: this.borderRadius } }, this.renderSkeleton())) : (h("div", { class: "card-container", onClick: this.handleCardClick, onMouseMove: this.handleMouseMove, style: {
+        return (h(Host, { key: 'd3957a8995d121511a78f4639c913d09f276f23a', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: 'd6876c833f4b02af4b78b370e3168b4ea1630f87', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: 'a42c047dd8f66aca2754b18fc8e3a335dde47c74' }, this.ribbon))), this.loading ? (h("div", { class: "card-loading-container", style: { borderRadius: this.borderRadius } }, this.renderSkeleton())) : (h("div", { class: "card-container", onClick: this.handleCardClick, onMouseMove: this.handleMouseMove, style: {
                 transform: `${this.magneticTransform} ${this.tiltTransform}`,
                 transition: (!this.magneticTransform && !this.tiltTransform) ? 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)' : 'none'
             } }, this.flippable ? (h("div", { class: "card-flipper" }, h("div", { class: "card-face face-front" }, this.renderFrontCard(), this.renderSelectionIndicator()), h("div", { class: "card-face face-back" }, this.renderBackCard()))) : ([this.renderFrontCard(), this.renderSelectionIndicator()])))));
@@ -434,7 +454,7 @@ export class Card {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",
@@ -515,7 +535,7 @@ export class Card {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -967,6 +987,26 @@ export class Card {
                 "attribute": "closable",
                 "defaultValue": "false"
             },
+            "closed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled closed/dismissed state of the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closed",
+                "defaultValue": "false"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,
@@ -1513,6 +1553,7 @@ export class Card {
             "isFlipped": {},
             "isMenuOpen": {},
             "isCollapsed": {},
+            "isClosed": {},
             "parsedMenuItems": {},
             "magneticTransform": {},
             "tiltTransform": {}
@@ -1683,6 +1724,9 @@ export class Card {
             }, {
                 "propName": "collapsed",
                 "methodName": "handleCollapsedChange"
+            }, {
+                "propName": "closed",
+                "methodName": "handleClosedChange"
             }];
     }
     static get listeners() {