agnosticui-core 2.0.0-alpha.13 → 2.0.0-alpha.15

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"}

package/dist/components/Pagination/core/_Pagination.d.ts

@@ -96,7 +96,6 @@ export declare class Pagination extends LitElement implements PaginationProps {
     onPageChange?: (event: PageChangeEvent) => void;
     constructor();
     get _pages(): PageArrayItem[];
-    updated(changedProperties: Map<string, unknown>): void;
     private _generatePages;
     private _getPaddedArray;
     private _generatePagingPaddedByOne;

package/dist/components/Pagination/core/_Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/core/_Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAAC;AACrC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC;AAClC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,UAAW,SAAQ,UAAW,YAAW,eAAe;IAE3D,OAAO,EAAE,MAAM,CAAC;IAGhB,UAAU,EAAE,MAAM,CAAC;IAGnB,MAAM,EAAE,gBAAgB,CAAC;IAGzB,OAAO,EAAE,iBAAiB,CAAC;IAG3B,SAAS,EAAE,MAAM,CAAC;IAGlB,QAAQ,EAAE,OAAO,CAAC;IAGlB,mBAAmB,EAAE,OAAO,CAAC;IAG7B,gBAAgB,EAAE,gBAAgB,CAAC;IAGnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;;IAmBxD,IAAI,MAAM,IAAI,aAAa,EAAE,CAE5B;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkB/C,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,0BAA0B;IAkBlC,OAAO,CAAC,0BAA0B;IA4BlC,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,gBAAgB;IAaxB,MAAM,CAAC,MAAM,0BA6GX;IAEF,MAAM;CAsIP"}
+{"version":3,"file":"_Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/core/_Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAAC;AACrC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC;AAClC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,UAAW,SAAQ,UAAW,YAAW,eAAe;IAE3D,OAAO,EAAE,MAAM,CAAC;IAGhB,UAAU,EAAE,MAAM,CAAC;IAGnB,MAAM,EAAE,gBAAgB,CAAC;IAGzB,OAAO,EAAE,iBAAiB,CAAC;IAG3B,SAAS,EAAE,MAAM,CAAC;IAGlB,QAAQ,EAAE,OAAO,CAAC;IAGlB,mBAAmB,EAAE,OAAO,CAAC;IAG7B,gBAAgB,EAAE,gBAAgB,CAAC;IAGnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;;IAmBxD,IAAI,MAAM,IAAI,aAAa,EAAE,CAE5B;IAED,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,0BAA0B;IAkBlC,OAAO,CAAC,0BAA0B;IA4BlC,OAAO,CAAC,iBAAiB;IAsCzB,OAAO,CAAC,gBAAgB;IAaxB,MAAM,CAAC,MAAM,0BA6GX;IAEF,MAAM;CAsIP"}

package/dist/components/Pagination/core/_Pagination.js

@@ -17,14 +17,6 @@ const u = class u extends b {
   get _pages() {
     return this._generatePages();
   }
-  updated(t) {
-    (t.has("current") || t.has("totalPages") || t.has("offset")) && this.updateComplete.then(() => {
-      const i = this.shadowRoot?.querySelector(
-        `button[data-page="${this.current}"]`
-      );
-      i && i.focus();
-    });
-  }
   _generatePages() {
     return this.totalPages <= 1 ? [1] : this.offset === 1 ? this._generatePagingPaddedByOne(this.current, this.totalPages) : this._generatePagingPaddedByTwo(this.current, this.totalPages);
   }
@@ -66,7 +58,12 @@ const u = class u extends b {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(e), this.onPageChange && this.onPageChange(e);
+    this.dispatchEvent(e), this.onPageChange && this.onPageChange(e), this.updateComplete.then(() => {
+      const a = this.shadowRoot?.querySelector(
+        `button[data-page="${this.current}"]`
+      );
+      a && a.focus();
+    });
   }
   _getJustifyClass() {
     switch (this.justify) {

package/dist/components/Select/core/_Select.js

@@ -140,7 +140,7 @@ c.styles = [
       /* Base styling */
       padding: var(--ag-space-2) var(--ag-space-8) var(--ag-space-2) var(--ag-space-3);
       -moz-padding-start: calc(var(--ag-space-3) - 3px);
-      font-size: var(--ag-font-size-base);
+      font-size: var(--ag-font-size-sm);
       font-weight: 400;
       line-height: 1.5;
       font-family: inherit;
@@ -190,7 +190,7 @@ c.styles = [
       padding-block-start: var(--ag-space-1);
       padding-block-end: var(--ag-space-1);
       padding-inline-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-small);
+      font-size: var(--ag-font-size-sm);
     }
 
     /* Large size variant */

package/dist/styles/ag-tokens.css

@@ -151,18 +151,18 @@
   --ag-background-primary-inverted: #1f2328;
   --ag-background-secondary: #f3f4f6;
   --ag-background-secondary-inverted: #111827;
-  --ag-background-tertiary: #e5e7eb;
-  --ag-background-disabled: #f3f4f6;
-  --ag-primary-background: #ddf4ff;
-  --ag-primary-text: #0550ae;
-  --ag-success-background: #dafbe1;
-  --ag-success-text: #116329;
-  --ag-info-background: #f3f4f6;
-  --ag-info-text: #4b5563;
-  --ag-warning-background: #fff8c5;
-  --ag-warning-text: #7d4e00;
-  --ag-danger-background: #ffebe9;
-  --ag-danger-text: #a40e26;
+  --ag-background-tertiary: #e5e7eb; /** Used by: Button default bg; also secondary button hover bg */
+  --ag-background-disabled: #f3f4f6; /** Used by: Button, Input, Checkbox, Radio, Select disabled states */
+  --ag-primary-background: #ddf4ff; /** Used by: Alert primary variant bg, Button faint variant bg */
+  --ag-primary-text: #0550ae; /** Used by: Alert primary text, Button bordered/outlined text + border */
+  --ag-success-background: #dafbe1; /** Used by: Alert success variant bg, Badge success variant bg */
+  --ag-success-text: #116329; /** Used by: Alert success variant text, Badge success variant text */
+  --ag-info-background: #f3f4f6; /** Used by: Alert info variant bg, Badge info variant bg */
+  --ag-info-text: #4b5563; /** Used by: Alert info variant text, Badge info variant text */
+  --ag-warning-background: #fff8c5; /** Used by: Alert warning variant bg, Badge warning variant bg */
+  --ag-warning-text: #7d4e00; /** Used by: Alert warning variant text, Badge warning variant text */
+  --ag-danger-background: #ffebe9; /** Used by: Alert danger variant bg, Badge danger variant bg */
+  --ag-danger-text: #a40e26; /** Used by: Alert danger variant text, Badge danger variant text */
   --ag-primary-fg: #ffffff;
   --ag-success-fg: #ffffff;
   --ag-warning-fg: #111827;
@@ -171,7 +171,7 @@
   --ag-border-subtle: #d1d5db;
   --ag-primary: #0550ae;
   --ag-primary-rgb: 5, 80, 174;
-  --ag-primary-border: #d1d5db;
+  --ag-primary-border: #d1d5db; /** Used by: Button bordered variant border */
   --ag-primary-dark: #0a3069;
   --ag-secondary: #6b7280;
   --ag-secondary-dark: #4b5563;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.15",
   "author": "AgnosticUI",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/Card/core/_Card.ts

@@ -1,9 +1,10 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { hasSlotContent } from '../../../utils/slot';
 
 export type CardVariant = 'success' | 'info' | 'error' | 'warning' | 'monochrome' | '';
 export type CardRounded = 'sm' | 'md' | 'lg' | '';
+export type CardMediaPosition = 'top' | 'bottom';
 
 /**
  * Converter for rounded prop: accepts boolean (true -> 'md') or string values
@@ -28,6 +29,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 class AgCard extends LitElement implements CardProps {
@@ -36,6 +41,8 @@ export class AgCard extends LitElement implements CardProps {
   @property({ type: Boolean, reflect: true }) declare animated: boolean;
   @property({ converter: roundedConverter, reflect: true }) declare rounded: CardRounded;
   @property({ type: String, reflect: true }) declare variant: CardVariant;
+  @property({ type: Boolean, reflect: true, attribute: 'has-media' }) declare hasMedia: boolean;
+  @property({ type: String, reflect: true, attribute: 'media-position' }) declare mediaPosition: CardMediaPosition;
 
   private _hasHeaderSlotContent = false;
   private _hasFooterSlotContent = false;
@@ -47,6 +54,8 @@ export class AgCard extends LitElement implements CardProps {
     this.animated = false;
     this.rounded = '';
     this.variant = '';
+    this.hasMedia = false;
+    this.mediaPosition = 'top';
   }
 
   /**
@@ -209,6 +218,37 @@ export class AgCard extends LitElement implements CardProps {
       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;
+    }
   `;
 
   render() {
@@ -217,6 +257,11 @@ export class AgCard extends LitElement implements CardProps {
 
     return html`
       <div class="card-wrapper" part="ag-card-wrapper">
+        ${this.hasMedia && this.mediaPosition === 'top' ? html`
+          <div class="card-media card-media--top" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : nothing}
+
         <div class="${headerClass}" part="ag-card-header">
           <slot name="header" @slotchange=${this._handleSlotChange}></slot>
         </div>
@@ -226,6 +271,11 @@ export class AgCard extends LitElement implements CardProps {
         <div class="${footerClass}" part="ag-card-footer">
           <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
         </div>
+
+        ${this.hasMedia && this.mediaPosition === 'bottom' ? html`
+          <div class="card-media card-media--bottom" part="ag-card-media">
+            <slot name="media"></slot>
+          </div>` : nothing}
       </div>
     `;
   }

package/src/components/Card/vue/VueCard.vue

@@ -6,8 +6,14 @@
     .animated="animated"
     :rounded="rounded"
     :variant="variant"
+    .hasMedia="hasMedia"
+    .mediaPosition="mediaPosition"
     v-bind="$attrs"
   >
+    <slot
+      name="media"
+      slot="media"
+    />
     <slot
       name="header"
       slot="header"
@@ -22,7 +28,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, type PropType } from "vue";
-import type { CardProps, CardVariant, CardRounded } from "../core/Card";
+import type { CardProps, CardVariant, CardRounded, CardMediaPosition } from "../core/Card";
 import "../core/Card"; // Registers the ag-card web component
 
 export default defineComponent({
@@ -48,6 +54,14 @@ export default defineComponent({
       type: String as PropType<CardVariant>,
       default: "" as CardVariant,
     },
+    hasMedia: {
+      type: Boolean,
+      default: false,
+    },
+    mediaPosition: {
+      type: String as PropType<CardMediaPosition>,
+      default: "top" as CardMediaPosition,
+    },
   },
   setup(props) {
     const agComponent = ref<(HTMLElement & CardProps) | null>(null);
@@ -68,6 +82,8 @@ export default defineComponent({
       animated: props.animated,
       rounded: props.rounded,
       variant: props.variant,
+      hasMedia: props.hasMedia,
+      mediaPosition: props.mediaPosition,
     };
   },
 });

package/src/components/Pagination/core/_Pagination.ts

@@ -139,24 +139,6 @@ export class Pagination extends LitElement implements PaginationProps {
     return this._generatePages();
   }
 
-  updated(changedProperties: Map<string, unknown>) {
-    if (
-      changedProperties.has('current') ||
-      changedProperties.has('totalPages') ||
-      changedProperties.has('offset')
-    ) {
-      // Focus current page button after update using querySelector
-      this.updateComplete.then(() => {
-        const currentButton = this.shadowRoot?.querySelector(
-          `button[data-page="${this.current}"]`
-        ) as HTMLButtonElement;
-        if (currentButton) {
-          currentButton.focus();
-        }
-      });
-    }
-  }
-
   private _generatePages(): PageArrayItem[] {
     if (this.totalPages <= 1) {
       return [1];
@@ -258,6 +240,16 @@ export class Pagination extends LitElement implements PaginationProps {
     if (this.onPageChange) {
       this.onPageChange(pageChangeEvent);
     }
+
+    // Focus the new current page button after re-render (only when user clicked)
+    this.updateComplete.then(() => {
+      const currentButton = this.shadowRoot?.querySelector(
+        `button[data-page="${this.current}"]`
+      ) as HTMLButtonElement;
+      if (currentButton) {
+        currentButton.focus();
+      }
+    });
   }
 
   private _getJustifyClass(): string {

package/src/components/Select/core/_Select.ts

@@ -162,7 +162,7 @@ export class Select extends LitElement implements SelectProps {
       /* Base styling */
       padding: var(--ag-space-2) var(--ag-space-8) var(--ag-space-2) var(--ag-space-3);
       -moz-padding-start: calc(var(--ag-space-3) - 3px);
-      font-size: var(--ag-font-size-base);
+      font-size: var(--ag-font-size-sm);
       font-weight: 400;
       line-height: 1.5;
       font-family: inherit;
@@ -212,7 +212,7 @@ export class Select extends LitElement implements SelectProps {
       padding-block-start: var(--ag-space-1);
       padding-block-end: var(--ag-space-1);
       padding-inline-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-small);
+      font-size: var(--ag-font-size-sm);
     }
 
     /* Large size variant */

package/src/styles/ag-tokens.css

@@ -151,18 +151,18 @@
   --ag-background-primary-inverted: #1f2328;
   --ag-background-secondary: #f3f4f6;
   --ag-background-secondary-inverted: #111827;
-  --ag-background-tertiary: #e5e7eb;
-  --ag-background-disabled: #f3f4f6;
-  --ag-primary-background: #ddf4ff;
-  --ag-primary-text: #0550ae;
-  --ag-success-background: #dafbe1;
-  --ag-success-text: #116329;
-  --ag-info-background: #f3f4f6;
-  --ag-info-text: #4b5563;
-  --ag-warning-background: #fff8c5;
-  --ag-warning-text: #7d4e00;
-  --ag-danger-background: #ffebe9;
-  --ag-danger-text: #a40e26;
+  --ag-background-tertiary: #e5e7eb; /** Used by: Button default bg; also secondary button hover bg */
+  --ag-background-disabled: #f3f4f6; /** Used by: Button, Input, Checkbox, Radio, Select disabled states */
+  --ag-primary-background: #ddf4ff; /** Used by: Alert primary variant bg, Button faint variant bg */
+  --ag-primary-text: #0550ae; /** Used by: Alert primary text, Button bordered/outlined text + border */
+  --ag-success-background: #dafbe1; /** Used by: Alert success variant bg, Badge success variant bg */
+  --ag-success-text: #116329; /** Used by: Alert success variant text, Badge success variant text */
+  --ag-info-background: #f3f4f6; /** Used by: Alert info variant bg, Badge info variant bg */
+  --ag-info-text: #4b5563; /** Used by: Alert info variant text, Badge info variant text */
+  --ag-warning-background: #fff8c5; /** Used by: Alert warning variant bg, Badge warning variant bg */
+  --ag-warning-text: #7d4e00; /** Used by: Alert warning variant text, Badge warning variant text */
+  --ag-danger-background: #ffebe9; /** Used by: Alert danger variant bg, Badge danger variant bg */
+  --ag-danger-text: #a40e26; /** Used by: Alert danger variant text, Badge danger variant text */
   --ag-primary-fg: #ffffff;
   --ag-success-fg: #ffffff;
   --ag-warning-fg: #111827;
@@ -171,7 +171,7 @@
   --ag-border-subtle: #d1d5db;
   --ag-primary: #0550ae;
   --ag-primary-rgb: 5, 80, 174;
-  --ag-primary-border: #d1d5db;
+  --ag-primary-border: #d1d5db; /** Used by: Button bordered variant border */
   --ag-primary-dark: #0a3069;
   --ag-secondary: #6b7280;
   --ag-secondary-dark: #4b5563;