agnosticui-core 2.0.0-alpha.14 → 2.0.0-alpha.16

package/dist/{VueCombobox.vue_vue_type_script_setup_true_lang-C7gDMrYJ.js → VueCombobox.vue_vue_type_script_setup_true_lang-BSTZGX2X.js}

@@ -1,6 +1,6 @@
-import { defineComponent as m, ref as v, createElementBlock as h, openBlock as x, renderSlot as g } from "vue";
+import { defineComponent as v, ref as m, createElementBlock as g, openBlock as h, renderSlot as x } from "vue";
 import "./components/Combobox/core/Combobox.js";
-const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid", ".clearable", ".readonly", ".required", ".loading", ".multiple", ".closeOnSelect", ".options", ".value", ".defaultValue", ".maxOptionsVisible", "placeholder", "label", "ariaLabel", "helpText", "errorMessage", "autocomplete", "filterMode", "size", "variant", "loadingText", "noResultsText"], T = /* @__PURE__ */ m({
+const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid", ".clearable", ".readonly", ".required", ".validationMessages", ".loading", ".multiple", ".closeOnSelect", ".options", ".value", ".defaultValue", ".maxOptionsVisible", "placeholder", "label", "ariaLabel", "helpText", "errorMessage", "autocomplete", "filterMode", "size", "variant", "loadingText", "noResultsText"], M = /* @__PURE__ */ v({
   __name: "VueCombobox",
   props: {
     options: { default: () => [] },
@@ -30,16 +30,17 @@ const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid"
     maxOptionsVisible: { default: 3 },
     loading: { type: Boolean, default: !1 },
     loadingText: { default: "Loading..." },
-    noResultsText: { default: "No results found" }
+    noResultsText: { default: "No results found" },
+    validationMessages: {}
   },
   emits: ["change", "select", "search", "open", "close", "focus", "blur", "update:value"],
-  setup(e, { expose: n, emit: d }) {
-    const a = d, t = v(), i = (l) => {
+  setup(e, { expose: n, emit: i }) {
+    const a = i, t = m(), d = (l) => {
       const o = l;
       a("change", o.detail), a("update:value", o.detail.value);
-    }, u = (l) => {
-      a("select", l.detail);
     }, s = (l) => {
+      a("select", l.detail);
+    }, u = (l) => {
       a("search", l.detail);
     }, c = (l) => {
       a("open", l.detail);
@@ -58,7 +59,7 @@ const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid"
       toggle: () => t.value?.toggle?.(),
       selectOption: (l) => t.value?.selectOption?.(l),
       clearSelection: () => t.value?.clearSelection?.()
-    }), (l, o) => (x(), h("ag-combobox", {
+    }), (l, o) => (h(), g("ag-combobox", {
       ref_key: "comboboxRef",
       ref: t,
       ".labelHidden": e.labelHidden,
@@ -69,6 +70,7 @@ const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid"
       ".clearable": e.clearable,
       ".readonly": e.readonly,
       ".required": e.required,
+      ".validationMessages": e.validationMessages,
       ".loading": e.loading,
       ".multiple": e.multiple,
       ".closeOnSelect": e.closeOnSelect,
@@ -87,18 +89,18 @@ const y = [".labelHidden", ".labelPosition", ".noLabel", ".disabled", ".invalid"
       variant: e.variant,
       loadingText: e.loadingText,
       noResultsText: e.noResultsText,
-      onChange: i,
-      onSelect: u,
-      onSearch: s,
+      onChange: d,
+      onSelect: s,
+      onSearch: u,
       onOpen: c,
       onClose: f,
       onFocus: r,
       onBlur: b
     }, [
-      g(l.$slots, "default")
+      x(l.$slots, "default")
     ], 40, y));
   }
 });
 export {
-  T as _
+  M as _
 };

package/dist/{VueInput.vue_vue_type_script_setup_true_lang-cOALNmlO.js → VueInput.vue_vue_type_script_setup_true_lang-fMqllTsp.js}

@@ -14,6 +14,7 @@ const g = [".value", ".labelHidden", ".noLabel", ".capsule", ".rounded", ".under
     labelPosition: {},
     noLabel: { type: Boolean, default: !1 },
     ariaLabel: { default: "" },
+    name: {},
     type: { default: "text" },
     value: { default: "" },
     placeholder: { default: "" },

package/dist/{VueRating.vue_vue_type_script_setup_true_lang-CICncp71.js → VueRating.vue_vue_type_script_setup_true_lang-Bm2nRrqr.js}

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as u, createElementBlock as s, openBlock as f, mergeProps as m, renderSlot as c } from "vue";
+import { defineComponent as r, ref as s, createElementBlock as u, openBlock as f, mergeProps as v, renderSlot as m } from "vue";
 import "./components/Rating/core/Rating.js";
-const v = [".value", ".readonly", ".allowClear", ".required", ".invalid", "max", "precision", "variant", "size", "name", "label", "labelPosition", "labelHidden", "noLabel", "errorMessage", "helpText"], h = /* @__PURE__ */ r({
+const c = [".value", ".readonly", ".allowClear", ".required", ".invalid", ".validationMessages", "max", "precision", "variant", "size", "name", "label", "labelPosition", "labelHidden", "noLabel", "errorMessage", "helpText"], h = /* @__PURE__ */ r({
   __name: "VueRating",
   props: {
     value: { default: 0 },
@@ -18,24 +18,26 @@ const v = [".value", ".readonly", ".allowClear", ".required", ".invalid", "max",
     required: { type: Boolean, default: !1 },
     invalid: { type: Boolean, default: !1 },
     errorMessage: { default: "" },
-    helpText: { default: "" }
+    helpText: { default: "" },
+    validationMessages: {}
   },
   emits: ["update:value", "change", "hover"],
   setup(e, { emit: n }) {
-    const t = n, o = u(), i = (a) => {
+    const t = n, i = s(), o = (a) => {
       const l = a;
       t("change", l.detail), t("update:value", l.detail.newValue);
     }, d = (a) => {
       t("hover", a.detail);
     };
-    return (a, l) => (f(), s("ag-rating", m({
+    return (a, l) => (f(), u("ag-rating", v({
       ref_key: "ratingRef",
-      ref: o,
+      ref: i,
       ".value": e.value,
       ".readonly": e.readonly,
       ".allowClear": e.allowClear,
       ".required": e.required,
       ".invalid": e.invalid,
+      ".validationMessages": e.validationMessages,
       max: e.max,
       precision: e.precision,
       variant: e.variant,
@@ -47,11 +49,11 @@ const v = [".value", ".readonly", ".allowClear", ".required", ".invalid", "max",
       noLabel: e.noLabel,
       errorMessage: e.errorMessage,
       helpText: e.helpText,
-      onRatingChange: i,
+      onRatingChange: o,
       onRatingHover: d
     }, a.$attrs), [
-      c(a.$slots, "default")
-    ], 48, v));
+      m(a.$slots, "default")
+    ], 48, c));
   }
 });
 export {

package/dist/{VueSelectionButtonGroup.vue_vue_type_script_setup_true_lang-CLuww2Ac.js → VueSelectionButtonGroup.vue_vue_type_script_setup_true_lang-DwYrIMVO.js}

@@ -1,6 +1,6 @@
-import { defineComponent as u, createElementBlock as s, openBlock as i, mergeProps as o, renderSlot as c } from "vue";
+import { defineComponent as s, createElementBlock as u, openBlock as i, mergeProps as o, renderSlot as c } from "vue";
 import "./components/SelectionButtonGroup/core/SelectionButtonGroup.js";
-const m = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape", "value", "values", ".disabled"], g = /* @__PURE__ */ u({
+const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape", "value", "values", ".disabled", ".required", ".validationMessages"], h = /* @__PURE__ */ s({
   __name: "VueSelectionButtonGroup",
   props: {
     type: { default: "radio" },
@@ -12,15 +12,17 @@ const m = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape",
     shape: { default: "" },
     value: { default: "" },
     values: { default: () => [] },
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    validationMessages: {}
   },
   emits: ["selection-change", "update:value", "update:values"],
   setup(e, { emit: d }) {
-    const l = d, n = (a) => {
-      const t = a.detail;
-      l("selection-change", t), t.selectedValues.length <= 1 && l("update:value", t.selectedValues[0] || ""), l("update:values", t.selectedValues);
+    const l = d, n = (t) => {
+      const a = t.detail;
+      l("selection-change", a), a.selectedValues.length <= 1 && l("update:value", a.selectedValues[0] || ""), l("update:values", a.selectedValues);
     };
-    return (a, t) => (i(), s("ag-selection-button-group", o({
+    return (t, a) => (i(), u("ag-selection-button-group", o({
       type: e.type,
       name: e.name,
       legend: e.legend,
@@ -31,12 +33,14 @@ const m = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape",
       value: e.value,
       values: e.values,
       ".disabled": e.disabled,
+      ".required": e.required,
+      ".validationMessages": e.validationMessages,
       onSelectionChange: n
-    }, a.$attrs), [
-      c(a.$slots, "default")
-    ], 48, m));
+    }, t.$attrs), [
+      c(t.$slots, "default")
+    ], 48, g));
   }
 });
 export {
-  g as _
+  h as _
 };

package/dist/VueSelectionCardGroup.vue_vue_type_script_setup_true_lang-D5CycLY5.js

@@ -0,0 +1,40 @@
+import { defineComponent as s, createElementBlock as i, openBlock as u, mergeProps as o, renderSlot as c } from "vue";
+import "./components/SelectionCardGroup/core/SelectionCardGroup.js";
+const g = ["type", "name", "legend", "legend-hidden", "value", "values", ".disabled", ".required", ".validationMessages"], v = /* @__PURE__ */ s({
+  __name: "VueSelectionCardGroup",
+  props: {
+    type: { default: "radio" },
+    name: { default: "" },
+    legend: { default: "" },
+    legendHidden: { type: Boolean, default: !1 },
+    value: { default: "" },
+    values: { default: () => [] },
+    disabled: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    validationMessages: {}
+  },
+  emits: ["selection-change", "update:value", "update:values"],
+  setup(e, { emit: t }) {
+    const d = t, n = (l) => {
+      const a = l.detail;
+      d("selection-change", a), a.selectedValues.length <= 1 && d("update:value", a.selectedValues[0] || ""), d("update:values", a.selectedValues);
+    };
+    return (l, a) => (u(), i("ag-selection-card-group", o({
+      type: e.type,
+      name: e.name,
+      legend: e.legend,
+      "legend-hidden": e.legendHidden,
+      value: e.value,
+      values: e.values,
+      ".disabled": e.disabled,
+      ".required": e.required,
+      ".validationMessages": e.validationMessages,
+      onSelectionChange: n
+    }, l.$attrs), [
+      c(l.$slots, "default")
+    ], 48, g));
+  }
+});
+export {
+  v as _
+};

package/dist/{VueToggle.vue_vue_type_script_setup_true_lang-BxrvAsse.js → VueToggle.vue_vue_type_script_setup_true_lang-DLPCBOqZ.js}

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as u, watch as f, createElementBlock as s, openBlock as g, mergeProps as h } from "vue";
+import { defineComponent as s, ref as g, watch as u, createElementBlock as f, openBlock as r, mergeProps as h } from "vue";
 import "./components/Toggle/core/Toggle.js";
-const b = ["label", ".labelPosition", ".labelHidden", ".noLabel", "size", "variant", ".checked", ".disabled", ".readonly", ".required", ".invalid", "errorMessage", "helpText", "name", "value"], v = /* @__PURE__ */ r({
+const b = ["label", ".labelPosition", ".labelHidden", ".noLabel", "size", "variant", ".checked", ".disabled", ".readonly", ".required", ".invalid", "errorMessage", "helpText", "name", "value", ".validationMessages"], m = /* @__PURE__ */ s({
   __name: "VueToggle",
   props: {
     label: {},
@@ -17,24 +17,25 @@ const b = ["label", ".labelPosition", ".labelHidden", ".noLabel", "size", "varia
     errorMessage: { default: "" },
     helpText: { default: "" },
     name: {},
-    value: {}
+    value: {},
+    validationMessages: {}
   },
   emits: ["click", "toggle-change", "update:checked"],
   setup(e, { emit: d }) {
-    const o = e, t = d, a = u(), i = (l) => {
-      t("click", l);
-    }, c = (l) => {
-      const n = l;
+    const i = e, t = d, l = g(), o = (a) => {
+      t("click", a);
+    }, c = (a) => {
+      const n = a;
       t("toggle-change", n.detail), t("update:checked", n.detail.checked);
     };
-    return f(
-      () => o.checked,
-      (l) => {
-        a.value && a.value.checked !== l && (a.value.checked = l);
+    return u(
+      () => i.checked,
+      (a) => {
+        l.value && l.value.checked !== a && (l.value.checked = a);
       }
-    ), (l, n) => (g(), s("ag-toggle", h({
+    ), (a, n) => (r(), f("ag-toggle", h({
       ref_key: "toggleRef",
-      ref: a,
+      ref: l,
       label: e.label,
       ".labelPosition": e.labelPosition,
       ".labelHidden": e.labelHidden,
@@ -50,11 +51,12 @@ const b = ["label", ".labelPosition", ".labelHidden", ".noLabel", "size", "varia
       helpText: e.helpText,
       name: e.name,
       value: e.value,
-      onClick: i,
+      ".validationMessages": e.validationMessages,
+      onClick: o,
       onToggleChange: c
-    }, l.$attrs), null, 48, b));
+    }, a.$attrs), null, 48, b));
   }
 });
 export {
-  v as _
+  m as _
 };

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

@@ -2,6 +2,7 @@ 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;
@@ -9,6 +10,10 @@ export interface CardProps {
     /** 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;
@@ -16,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;AAkBlD,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;CACvB;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;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,51 +1,61 @@
-import { LitElement as g, css as p, html as v } from "lit";
-import { n as d } from "../../../property-CemaeiRl.js";
-import { hasSlotContent as n } from "../../../utils/slot.js";
-var m = Object.defineProperty, s = (t, a, r, i) => {
-  for (var e = void 0, c = t.length - 1, h; c >= 0; c--)
-    (h = t[c]) && (e = h(a, r, e) || e);
-  return e && m(a, r, e), e;
+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 u = {
-  fromAttribute(t) {
-    return t === "" || t === "true" ? "md" : t === "false" || t === null ? "" : t || "";
+const b = {
+  fromAttribute(a) {
+    return a === "" || a === "true" ? "md" : a === "false" || a === null ? "" : a || "";
   },
-  toAttribute(t) {
-    return typeof t == "boolean" ? t ? "md" : null : t || null;
+  toAttribute(a) {
+    return typeof a == "boolean" ? a ? "md" : null : a || null;
   }
-}, l = class l extends g {
+}, 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 r = a.target, i = r.name;
-    i === "header" ? this._hasHeaderSlotContent = n(r) : i === "footer" && (this._hasFooterSlotContent = n(r)), 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"]'), r = this.shadowRoot?.querySelector('slot[name="footer"]');
-    this._hasHeaderSlotContent = n(a), this._hasFooterSlotContent = n(r), 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", r = 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">
           <slot></slot>
         </div>
-        <div class="${r}" part="ag-card-footer">
+        <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>
     `;
   }
 };
-l.styles = p`
+h.styles = u`
     :host {
       display: block;
       position: relative;
@@ -179,23 +189,60 @@ l.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 o = l;
-s([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "stacked");
-s([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "shadow");
-s([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "animated");
-s([
-  d({ converter: u, reflect: !0 })
-], o.prototype, "rounded");
-s([
-  d({ type: String, reflect: !0 })
-], o.prototype, "variant");
+let r = h;
+d([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "stacked");
+d([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "shadow");
+d([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "animated");
+d([
+  o({ converter: b, reflect: !0 })
+], r.prototype, "rounded");
+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 {
-  o as AgCard
+  r as AgCard
 };

package/dist/components/Card/vue/VueCard.js

@@ -1,7 +1,7 @@
-import { defineComponent as o, ref as n, onMounted as d, createElementBlock as r, openBlock as s, mergeProps as l, renderSlot as a } from "vue";
+import { defineComponent as t, ref as d, onMounted as n, createElementBlock as s, openBlock as i, mergeProps as r, renderSlot as a } from "vue";
 import "../core/Card.js";
-import { _ as i } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const u = o({
+import { _ as l } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const m = t({
   name: "VueCard",
   props: {
     stacked: {
@@ -23,37 +23,50 @@ const u = o({
     variant: {
       type: String,
       default: ""
+    },
+    hasMedia: {
+      type: Boolean,
+      default: !1
+    },
+    mediaPosition: {
+      type: String,
+      default: "top"
     }
   },
   setup(e) {
-    const t = n(null);
-    return d(async () => {
+    const o = d(null);
+    return n(async () => {
       await customElements.whenDefined("ag-card");
     }), {
-      agComponent: t,
+      agComponent: o,
       stacked: e.stacked,
       shadow: e.shadow,
       animated: e.animated,
       rounded: e.rounded,
-      variant: e.variant
+      variant: e.variant,
+      hasMedia: e.hasMedia,
+      mediaPosition: e.mediaPosition
     };
   }
-}), f = [".stacked", ".shadow", ".animated", "rounded", "variant"];
-function m(e, t, c, p, h, k) {
-  return s(), r("ag-card", l({
+}), f = [".stacked", ".shadow", ".animated", "rounded", "variant", ".hasMedia", ".mediaPosition"];
+function u(e, o, h, p, c, $) {
+  return i(), s("ag-card", r({
     ref: "agComponent",
     ".stacked": e.stacked,
     ".shadow": e.shadow,
     ".animated": e.animated,
     rounded: e.rounded,
-    variant: e.variant
+    variant: e.variant,
+    ".hasMedia": e.hasMedia,
+    ".mediaPosition": e.mediaPosition
   }, e.$attrs), [
+    a(e.$slots, "media", { slot: "media" }),
     a(e.$slots, "header", { slot: "header" }),
     a(e.$slots, "default"),
     a(e.$slots, "footer", { slot: "footer" })
   ], 48, f);
 }
-const v = /* @__PURE__ */ i(u, [["render", m]]);
+const y = /* @__PURE__ */ l(m, [["render", u]]);
 export {
-  v as default
+  y as default
 };

package/dist/components/Card/vue/VueCard.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { CardProps, CardVariant, CardRounded } from '../core/Card';
+import { CardProps, CardVariant, CardRounded, CardMediaPosition } from '../core/Card';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     stacked: {
@@ -22,6 +22,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<CardVariant>;
         default: CardVariant;
     };
+    hasMedia: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mediaPosition: {
+        type: PropType<CardMediaPosition>;
+        default: CardMediaPosition;
+    };
 }>, {
     agComponent: import('vue').Ref<(HTMLElement & CardProps) | null, (HTMLElement & CardProps) | null>;
     stacked: boolean;
@@ -29,6 +37,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     animated: boolean;
     rounded: boolean | CardRounded;
     variant: CardVariant;
+    hasMedia: boolean;
+    mediaPosition: CardMediaPosition;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     stacked: {
         type: BooleanConstructor;
@@ -50,12 +60,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<CardVariant>;
         default: CardVariant;
     };
+    hasMedia: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mediaPosition: {
+        type: PropType<CardMediaPosition>;
+        default: CardMediaPosition;
+    };
 }>> & Readonly<{}>, {
     variant: CardVariant;
     rounded: boolean | CardRounded;
     shadow: boolean;
     stacked: boolean;
     animated: boolean;
+    hasMedia: boolean;
+    mediaPosition: CardMediaPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=VueCard.vue.d.ts.map

package/dist/components/Card/vue/VueCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VueCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/vue/VueCard.vue"],"names":[],"mappings":"AAqBA;AAEA,OAAO,EAAmC,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,cAAc,CAAC;;;;;;;;;;;;;;;cAkBW,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC3C,WAAW;;;cAGV,QAAQ,CAAC,WAAW,CAAC;iBACtB,WAAW;;;;;;;;;;;;;;;;;;;;;;;cALC,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC3C,WAAW;;;cAGV,QAAQ,CAAC,WAAW,CAAC;iBACtB,WAAW;;;;;;;;;AArBhC,wBA6CG"}
+{"version":3,"file":"VueCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/vue/VueCard.vue"],"names":[],"mappings":"AA2BA;AAEA,OAAO,EAAmC,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC3F,OAAO,cAAc,CAAC;;;;;;;;;;;;;;;cAkBW,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC3C,WAAW;;;cAGV,QAAQ,CAAC,WAAW,CAAC;iBACtB,WAAW;;;;;;;cAOV,QAAQ,CAAC,iBAAiB,CAAC;iBACzB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;cAbR,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC;iBAC3C,WAAW;;;cAGV,QAAQ,CAAC,WAAW,CAAC;iBACtB,WAAW;;;;;;;cAOV,QAAQ,CAAC,iBAAiB,CAAC;iBACzB,iBAAiB;;;;;;;;;;;AA7BzC,wBAuDG"}