agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/components/Button/core/_Button.js

@@ -1,17 +1,26 @@
-import { LitElement as h, css as l, html as c } from "lit";
-import { n as a } from "../../../property-CemaeiRl.js";
-import { o as i } from "../../../if-defined-C8i28hSj.js";
-var b = Object.defineProperty, o = (g, r, e, v) => {
-  for (var n = void 0, s = g.length - 1, u; s >= 0; s--)
-    (u = g[s]) && (n = u(r, e, n) || n);
-  return n && b(r, e, n), n;
+import { LitElement as l, css as c, html as h } from "lit";
+import { n as r } from "../../../property-CemaeiRl.js";
+import { o as s } from "../../../if-defined-C8i28hSj.js";
+var b = Object.defineProperty, o = (g, a, e, v) => {
+  for (var n = void 0, i = g.length - 1, u; i >= 0; i--)
+    (u = g[i]) && (n = u(a, e, n) || n);
+  return n && b(a, e, n), n;
 };
-const d = class d extends h {
+const d = class d extends l {
   constructor() {
-    super(), this.disabled = !1, this.loading = !1, this.toggle = !1, this.pressed = !1, this.bordered = !1, this.ghost = !1, this.link = !1, this.grouped = !1, this.type = "button", this.ariaLabel = "", this.variant = "", this.size = "md", this.shape = "";
+    super(), this.disabled = !1, this.loading = !1, this.toggle = !1, this.pressed = !1, this.bordered = !1, this.ghost = !1, this.link = !1, this.grouped = !1, this.fullWidth = !1, this.type = "button", this.ariaLabel = "", this.variant = "", this.size = "md", this.shape = "";
   }
-  _handleClick(r) {
-    if (this.onClick && this.onClick(r), this.toggle && !this.disabled && !this.loading && !r.defaultPrevented) {
+  _handleClick(a) {
+    if (this.onClick && this.onClick(a), !this.disabled && !this.loading && !a.defaultPrevented) {
+      if (this.type === "submit") {
+        const e = this.closest("form");
+        e && e.requestSubmit();
+      } else if (this.type === "reset") {
+        const e = this.closest("form");
+        e && e.reset();
+      }
+    }
+    if (this.toggle && !this.disabled && !this.loading && !a.defaultPrevented) {
       this.pressed = !this.pressed;
       const e = new CustomEvent("toggle", {
         detail: { pressed: this.pressed },
@@ -21,16 +30,16 @@ const d = class d extends h {
       this.dispatchEvent(e), this.onToggle && this.onToggle(e);
     }
   }
-  _handleFocus(r) {
-    this.onFocus && this.onFocus(r);
+  _handleFocus(a) {
+    this.onFocus && this.onFocus(a);
     const e = new FocusEvent("focus", {
       bubbles: !0,
       composed: !0
     });
     this.dispatchEvent(e);
   }
-  _handleBlur(r) {
-    this.onBlur && this.onBlur(r);
+  _handleBlur(a) {
+    this.onBlur && this.onBlur(a);
     const e = new FocusEvent("blur", {
       bubbles: !0,
       composed: !0
@@ -41,27 +50,27 @@ const d = class d extends h {
    * Focus the internal button element
    */
   focus() {
-    const r = this.shadowRoot?.querySelector("button");
-    r && r.focus();
+    const a = this.shadowRoot?.querySelector("button");
+    a && a.focus();
   }
   /**
    * Blur the internal button element
    */
   blur() {
-    const r = this.shadowRoot?.querySelector("button");
-    r && r.blur();
+    const a = this.shadowRoot?.querySelector("button");
+    a && a.blur();
   }
   render() {
-    const r = this.disabled || this.loading;
-    return c`
+    const a = this.disabled || this.loading;
+    return h`
       <button
         type=${this.type}
         part="ag-button"
-        ?disabled=${r}
-        aria-disabled=${r ? "true" : "false"}
-        aria-busy=${i(this.loading ? "true" : void 0)}
-        aria-pressed=${i(this.toggle ? String(this.pressed) : void 0)}
-        aria-label=${i(this.ariaLabel || void 0)}
+        ?disabled=${a}
+        aria-disabled=${a ? "true" : "false"}
+        aria-busy=${s(this.loading ? "true" : void 0)}
+        aria-pressed=${s(this.toggle ? String(this.pressed) : void 0)}
+        aria-label=${s(this.ariaLabel || void 0)}
         @click=${this._handleClick}
         @focus=${this._handleFocus}
         @blur=${this._handleBlur}
@@ -71,7 +80,7 @@ const d = class d extends h {
     `;
   }
 };
-d.styles = l`
+d.styles = c`
     /* MINIMALIST & THEMEABLE - Styling via --ag-* design tokens */
     :host {
       /* Inline-flex for perfect centering while maintaining inline behavior */
@@ -80,10 +89,20 @@ d.styles = l`
       justify-content: center;
     }
 
+    /* Full-width variant */
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([full-width]) button {
+      width: 100%;
+    }
+
     button {
       /* Reset browser defaults */
       margin: 0;
-      border: none;
+      border: 1px solid transparent;
       background: var(--ag-background-tertiary);
 
       /* Inherit font styling from parent */
@@ -117,32 +136,32 @@ d.styles = l`
       background: var(--ag-neutral-500);
     }
 
-    /* Primary, success, warning, and danger all have white text and get
-      darker on hover */
+    /* Primary, success, warning, and danger use variant-specific foreground
+      tokens (--ag-{variant}-fg) and get darker on hover */
     :host([variant="primary"]) button {
       background: var(--ag-primary);
-      color: var(--ag-white);
+      color: var(--ag-primary-fg);
     }
     :host([variant="primary"]) button:hover {
       background: var(--ag-primary-dark);
     }
     :host([variant="success"]) button {
       background: var(--ag-success);
-      color: var(--ag-white);
+      color: var(--ag-success-fg);
     }
     :host([variant="success"]) button:hover {
       background: var(--ag-success-dark);
     }
     :host([variant="warning"]) button {
       background: var(--ag-warning);
-      color: var(--ag-neutral-900);
+      color: var(--ag-warning-fg);
     }
     :host([variant="warning"]) button:hover {
       background: var(--ag-warning-dark);
     }
     :host([variant="danger"]) button {
       background: var(--ag-danger);
-      color: var(--ag-white);
+      color: var(--ag-danger-fg);
     }
     :host([variant="danger"]) button:hover {
       background: var(--ag-danger-dark);
@@ -159,30 +178,45 @@ d.styles = l`
 
     /* Size variants */
     :host([size="x-sm"]) button {
+      height: var(--ag-space-8);
+      min-height: var(--ag-space-8);
       font-size: calc(var(--ag-font-size-base) - 0.375rem);
-      padding: var(--ag-space-1) var(--ag-space-2);
+      padding-inline: var(--ag-space-2);
+      padding-block: 0;
     }
 
     :host([size="sm"]) button {
+      height: var(--ag-space-9);
+      min-height: var(--ag-space-9);
       font-size: var(--ag-font-size-xs);
-      padding: var(--ag-space-2) var(--ag-space-3);
+      padding-inline: var(--ag-space-3);
+      padding-block: 0;
     }
 
     /* Default size (md) - applies when no size attribute or size="md" */
     button,
     :host([size="md"]) button {
+      height: var(--ag-space-10);
+      min-height: var(--ag-space-10);
       font-size: var(--ag-font-size-sm);
-      padding: var(--ag-space-3) var(--ag-space-4);
+      padding-inline: var(--ag-space-4);
+      padding-block: 0;
     }
 
     :host([size="lg"]) button {
+      height: var(--ag-space-12);
+      min-height: var(--ag-space-12);
       font-size: var(--ag-font-size-base);
-      padding: var(--ag-space-3) var(--ag-space-5);
+      padding-inline: var(--ag-space-5);
+      padding-block: 0;
     }
 
     :host([size="xl"]) button {
+      height: var(--ag-space-14);
+      min-height: var(--ag-space-14);
       font-size: var(--ag-font-size-md);
-      padding: var(--ag-space-3) var(--ag-space-6);
+      padding-inline: var(--ag-space-6);
+      padding-block: 0;
     }
 
     /* Shape variants */
@@ -225,7 +259,7 @@ d.styles = l`
     :host([ghost]) button,
     :host([link]) button {
       background: transparent;
-      border: none;
+      border-color: transparent;
       box-shadow: none;
     }
 
@@ -306,7 +340,7 @@ d.styles = l`
     /* Bordered variant - outline style */
     :host([bordered]) button {
       background: transparent;
-      border: 1px solid var(--ag-neutral-500);
+      border-color: var(--ag-neutral-500);
     }
 
     :host([bordered][variant="primary"]) button {
@@ -314,11 +348,11 @@ d.styles = l`
       border-color: var(--ag-primary-text);
     }
 
-    /* Bordered Buttons on Hover have a filled background with white text.  The
-      Default Bordered is an exception to this rule. */
+    /* Bordered Buttons on Hover have a filled background with variant-specific
+      foreground text.  The Default Bordered is an exception to this rule. */
     :host([bordered][variant="primary"]) button:hover {
       background: var(--ag-primary);
-      color: var(--ag-white);
+      color: var(--ag-primary-fg);
     }
 
     :host([bordered][variant="secondary"]) button,
@@ -333,7 +367,7 @@ d.styles = l`
     }
 
     :host([bordered][variant="success"]) button:hover {
-      color: var(--ag-white);
+      color: var(--ag-success-fg);
       background: var(--ag-success);
     }
 
@@ -344,7 +378,7 @@ d.styles = l`
 
     :host([bordered][variant="warning"]) button:hover {
       background: var(--ag-warning);
-      color: var(--ag-neutral-900);
+      color: var(--ag-warning-fg);
     }
 
     :host([bordered][variant="danger"]) button {
@@ -354,7 +388,7 @@ d.styles = l`
 
     :host([bordered][variant="danger"]) button:hover {
       background: var(--ag-danger);
-      color: var(--ag-white);
+      color: var(--ag-danger-fg);
     }
 
     :host([bordered][variant="monochrome"]) button {
@@ -375,11 +409,56 @@ d.styles = l`
       background: var(--ag-background-secondary);
     }
 
+    /* Disabled states - per-variant to maintain tonal identity */
+
+    /* Filled buttons - use lighter background tokens */
+    :host([variant="primary"]) button:disabled {
+      background: var(--ag-primary-background);
+      color: var(--ag-primary-text);
+    }
+
+    :host([variant="success"]) button:disabled {
+      background: var(--ag-success-background);
+      color: var(--ag-success-text);
+    }
+
+    :host([variant="warning"]) button:disabled {
+      background: var(--ag-warning-background);
+      color: var(--ag-warning-text);
+    }
+
+    :host([variant="danger"]) button:disabled {
+      background: var(--ag-danger-background);
+      color: var(--ag-danger-text);
+    }
+
+    :host([variant="secondary"]) button:disabled,
     button:disabled {
-      cursor: not-allowed;
       background: var(--ag-background-disabled);
     }
 
+    :host([variant="monochrome"]) button:disabled {
+      background: var(--ag-background-tertiary);
+    }
+
+    /* Bordered buttons - dim the border and text with opacity */
+    :host([bordered]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* Ghost and link buttons - dim with opacity */
+    :host([ghost]) button:disabled,
+    :host([link]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* All disabled buttons get not-allowed cursor */
+    button:disabled {
+      cursor: not-allowed;
+    }
+
     button:focus-visible,
     button:focus:not(:hover) {
       /* Softer focus ring using alpha channel */
@@ -390,55 +469,58 @@ d.styles = l`
   `;
 let t = d;
 o([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "variant");
 o([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "size");
 o([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], t.prototype, "shape");
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "bordered");
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "ghost");
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "link");
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "grouped");
 o([
-  a({ type: String })
+  r({ type: Boolean, reflect: !0, attribute: "full-width" })
+], t.prototype, "fullWidth");
+o([
+  r({ type: String })
 ], t.prototype, "type");
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], t.prototype, "disabled");
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], t.prototype, "loading");
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], t.prototype, "toggle");
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], t.prototype, "pressed");
 o([
-  a({ type: String, reflect: !0, attribute: "aria-label" })
+  r({ type: String, reflect: !0, attribute: "aria-label" })
 ], t.prototype, "ariaLabel");
 o([
-  a({ attribute: !1 })
+  r({ attribute: !1 })
 ], t.prototype, "onClick");
 o([
-  a({ attribute: !1 })
+  r({ attribute: !1 })
 ], t.prototype, "onFocus");
 o([
-  a({ attribute: !1 })
+  r({ attribute: !1 })
 ], t.prototype, "onBlur");
 o([
-  a({ attribute: !1 })
+  r({ attribute: !1 })
 ], t.prototype, "onToggle");
 export {
   t as AgButton

package/dist/components/Button/vue/VueButton.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../../../VueButton.vue_vue_type_script_setup_true_lang-Bq8IPXqd.js";
+import { _ as f } from "../../../VueButton.vue_vue_type_script_setup_true_lang-D1jGatE9.js";
 export {
   f as default
 };

package/dist/components/Button/vue/VueButton.vue.d.ts

@@ -18,6 +18,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     ghost: boolean;
     link: boolean;
     grouped: boolean;
+    fullWidth: boolean;
     ariaLabel: string;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     blur: (event: FocusEvent) => void;
@@ -38,6 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     ghost: boolean;
     link: boolean;
     grouped: boolean;
+    fullWidth: boolean;
     ariaLabel: string;
 }>>> & Readonly<{
     onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -57,6 +59,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     shape: "capsule" | "rounded" | "circle" | "square" | "rounded-square" | "";
     ghost: boolean;
     grouped: boolean;
+    fullWidth: boolean;
     loading: boolean;
     pressed: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/Button/vue/VueButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/vue/VueButton.vue"],"names":[],"mappings":"AAyBA;AAGA,OAAO,KAAK,EACV,WAAW,EAEX,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AAGxB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;CAAG;AAiF7E,iBAAS,cAAc;qBAmDO,GAAG;EAKhC;AAcD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"VueButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/vue/VueButton.vue"],"names":[],"mappings":"AA0BA;AAGA,OAAO,KAAK,EACV,WAAW,EAEX,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AAGxB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;CAAG;AAmF7E,iBAAS,cAAc;qBAmDO,GAAG;EAKhC;AAcD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/Button/vue/index.js

@@ -1,4 +1,4 @@
-import { _ as e, _ as o } from "../../../VueButton.vue_vue_type_script_setup_true_lang-Bq8IPXqd.js";
+import { _ as e, _ as o } from "../../../VueButton.vue_vue_type_script_setup_true_lang-D1jGatE9.js";
 export {
   e as VueButton,
   o as default

package/dist/components/ButtonFx/vue/VueButtonFx.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../../../VueButtonFx.vue_vue_type_script_setup_true_lang-BUudF-lg.js";
+import { _ as f } from "../../../VueButtonFx.vue_vue_type_script_setup_true_lang-BRrt6Nxs.js";
 export {
   f as default
 };

package/dist/components/ButtonFx/vue/index.js

@@ -1,4 +1,4 @@
-import { _ as e } from "../../../VueButtonFx.vue_vue_type_script_setup_true_lang-BUudF-lg.js";
+import { _ as e } from "../../../VueButtonFx.vue_vue_type_script_setup_true_lang-BRrt6Nxs.js";
 export {
   e as VueButtonFx
 };

package/dist/components/Card/core/_Card.d.ts

@@ -2,12 +2,18 @@ import { LitElement } from 'lit';
 
 export type CardVariant = 'success' | 'info' | 'error' | 'warning' | 'monochrome' | '';
 export type CardRounded = 'sm' | 'md' | 'lg' | '';
+export type CardMediaPosition = 'top' | 'bottom';
 export interface CardProps {
     stacked?: boolean;
     shadow?: boolean;
     animated?: boolean;
-    rounded?: CardRounded;
+    /** Border radius size. Use 'sm', 'md', 'lg' or true (defaults to 'md') */
+    rounded?: CardRounded | boolean;
     variant?: CardVariant;
+    /** Enables the media slot for edge-to-edge image/video rendering */
+    hasMedia?: boolean;
+    /** Whether media renders above or below the header/content/footer */
+    mediaPosition?: CardMediaPosition;
 }
 export declare class AgCard extends LitElement implements CardProps {
     stacked: boolean;
@@ -15,6 +21,8 @@ export declare class AgCard extends LitElement implements CardProps {
     animated: boolean;
     rounded: CardRounded;
     variant: CardVariant;
+    hasMedia: boolean;
+    mediaPosition: CardMediaPosition;
     private _hasHeaderSlotContent;
     private _hasFooterSlotContent;
     constructor();

package/dist/components/Card/core/_Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/core/_Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;AACvF,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,qBAAa,MAAO,SAAQ,UAAW,YAAW,SAAS;IACL,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IAExE,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,qBAAqB,CAAS;;IAWtC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAahB,YAAY;IAUrB,MAAM,CAAC,MAAM,0BAsIX;IAEF,MAAM;CAkBP"}
+{"version":3,"file":"_Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/core/_Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;AACvF,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;AAClD,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAkBjD,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,qBAAa,MAAO,SAAQ,UAAW,YAAW,SAAS;IACL,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IACJ,OAAO,EAAE,WAAW,CAAC;IACpC,OAAO,EAAE,WAAW,CAAC;IACI,QAAQ,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,iBAAiB,CAAC;IAEjH,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,qBAAqB,CAAS;;IAatC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAahB,YAAY;IAUrB,MAAM,CAAC,MAAM,0BAqKX;IAEF,MAAM;CA4BP"}

package/dist/components/Card/core/_Card.js

@@ -1,31 +1,43 @@
-import { LitElement as g, css as p, html as v } from "lit";
-import { n as e } from "../../../property-CemaeiRl.js";
-import { hasSlotContent as d } from "../../../utils/slot.js";
-var m = Object.defineProperty, s = (l, a, t, n) => {
-  for (var o = void 0, i = l.length - 1, h; i >= 0; i--)
-    (h = l[i]) && (o = h(a, t, o) || o);
-  return o && m(a, t, o), o;
+import { LitElement as p, css as u, nothing as g, html as l } from "lit";
+import { n as o } from "../../../property-CemaeiRl.js";
+import { hasSlotContent as i } from "../../../utils/slot.js";
+var v = Object.defineProperty, d = (a, e, t, n) => {
+  for (var s = void 0, c = a.length - 1, m; c >= 0; c--)
+    (m = a[c]) && (s = m(e, t, s) || s);
+  return s && v(e, t, s), s;
 };
-const c = class c extends g {
+const b = {
+  fromAttribute(a) {
+    return a === "" || a === "true" ? "md" : a === "false" || a === null ? "" : a || "";
+  },
+  toAttribute(a) {
+    return typeof a == "boolean" ? a ? "md" : null : a || null;
+  }
+}, h = class h extends p {
   constructor() {
-    super(), this._hasHeaderSlotContent = !1, this._hasFooterSlotContent = !1, this.stacked = !1, this.shadow = !1, this.animated = !1, this.rounded = "", this.variant = "";
+    super(), this._hasHeaderSlotContent = !1, this._hasFooterSlotContent = !1, this.stacked = !1, this.shadow = !1, this.animated = !1, this.rounded = "", this.variant = "", this.hasMedia = !1, this.mediaPosition = "top";
   }
   /**
    * Handle slot changes to detect if header/footer are empty
    */
-  _handleSlotChange(a) {
-    const t = a.target, n = t.name;
-    n === "header" ? this._hasHeaderSlotContent = d(t) : n === "footer" && (this._hasFooterSlotContent = d(t)), this.requestUpdate();
+  _handleSlotChange(e) {
+    const t = e.target, n = t.name;
+    n === "header" ? this._hasHeaderSlotContent = i(t) : n === "footer" && (this._hasFooterSlotContent = i(t)), this.requestUpdate();
   }
   firstUpdated() {
-    const a = this.shadowRoot?.querySelector('slot[name="header"]'), t = this.shadowRoot?.querySelector('slot[name="footer"]');
-    this._hasHeaderSlotContent = d(a), this._hasFooterSlotContent = d(t), this.requestUpdate();
+    const e = this.shadowRoot?.querySelector('slot[name="header"]'), t = this.shadowRoot?.querySelector('slot[name="footer"]');
+    this._hasHeaderSlotContent = i(e), this._hasFooterSlotContent = i(t), this.requestUpdate();
   }
   render() {
-    const a = this._hasHeaderSlotContent ? "card-header" : "card-header empty", t = this._hasFooterSlotContent ? "card-footer" : "card-footer empty";
-    return v`
+    const e = this._hasHeaderSlotContent ? "card-header" : "card-header empty", t = this._hasFooterSlotContent ? "card-footer" : "card-footer empty";
+    return l`
       <div class="card-wrapper" part="ag-card-wrapper">
-        <div class="${a}" part="ag-card-header">
+        ${this.hasMedia && this.mediaPosition === "top" ? l`
+          <div class="card-media card-media--top" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : g}
+
+        <div class="${e}" part="ag-card-header">
           <slot name="header" @slotchange=${this._handleSlotChange}></slot>
         </div>
         <div class="card-content" part="ag-card-content">
@@ -34,11 +46,16 @@ const c = class c extends g {
         <div class="${t}" part="ag-card-footer">
           <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
         </div>
+
+        ${this.hasMedia && this.mediaPosition === "bottom" ? l`
+          <div class="card-media card-media--bottom" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : g}
       </div>
     `;
   }
 };
-c.styles = p`
+h.styles = u`
     :host {
       display: block;
       position: relative;
@@ -172,23 +189,60 @@ c.styles = p`
       position: relative;
       z-index: 2;
     }
+
+    /* ── Media slot ─────────────────────────────────────────────────── */
+
+    /* Clip image corners to the card's border-radius for non-shadow cards */
+    :host([has-media]) {
+      overflow: hidden;
+    }
+
+    .card-media {
+      overflow: hidden; /* belt-and-suspenders for non-rounded cards */
+      line-height: 0;   /* collapses inline whitespace below slotted img */
+    }
+
+    /* Top media: clip only the card's top two corners */
+    :host([rounded="sm"]) .card-media--top  { border-radius: var(--ag-radius-sm) var(--ag-radius-sm) 0 0; }
+    :host([rounded="md"]) .card-media--top  { border-radius: var(--ag-radius-md) var(--ag-radius-md) 0 0; }
+    :host([rounded="lg"]) .card-media--top  { border-radius: var(--ag-radius-lg) var(--ag-radius-lg) 0 0; }
+
+    /* Bottom media: clip only the card's bottom two corners */
+    :host([rounded="sm"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-sm) var(--ag-radius-sm); }
+    :host([rounded="md"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-md) var(--ag-radius-md); }
+    :host([rounded="lg"]) .card-media--bottom { border-radius: 0 0 var(--ag-radius-lg) var(--ag-radius-lg); }
+
+    /* Sensible defaults for slotted media elements */
+    .card-media ::slotted(img),
+    .card-media ::slotted(video) {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
   `;
-let r = c;
-s([
-  e({ type: Boolean, reflect: !0 })
+let r = h;
+d([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "stacked");
-s([
-  e({ type: Boolean, reflect: !0 })
+d([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "shadow");
-s([
-  e({ type: Boolean, reflect: !0 })
+d([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "animated");
-s([
-  e({ type: String, reflect: !0 })
+d([
+  o({ converter: b, reflect: !0 })
 ], r.prototype, "rounded");
-s([
-  e({ type: String, reflect: !0 })
+d([
+  o({ type: String, reflect: !0 })
 ], r.prototype, "variant");
+d([
+  o({ type: Boolean, reflect: !0, attribute: "has-media" })
+], r.prototype, "hasMedia");
+d([
+  o({ type: String, reflect: !0, attribute: "media-position" })
+], r.prototype, "mediaPosition");
 export {
   r as AgCard
 };