agnosticui-core 2.0.0-alpha.2

package/dist/components/BadgeFx/core/_BadgeFx.js

@@ -0,0 +1,227 @@
+import { css as p } from "lit";
+import { n as i } from "../../../property-CemaeiRl.js";
+import { AgBadge as l } from "../../Badge/core/_Badge.js";
+import { motionStyles as h } from "../../../styles/motion.styles.js";
+var x = Object.defineProperty, o = (g, e, a, r) => {
+  for (var t = void 0, n = g.length - 1, d; n >= 0; n--)
+    (d = g[n]) && (t = d(e, a, t) || t);
+  return t && x(e, a, t), t;
+};
+const f = class f extends l {
+  constructor() {
+    super(), this._observer = null, this.fxSpeed = "md", this.fxEase = "ease", this.fxDisabled = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._updateTheme(), this._observer = new MutationObserver((e) => {
+      e.forEach((a) => {
+        a.type === "attributes" && a.attributeName === "data-theme" && this._updateTheme();
+      });
+    }), this._observer.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._observer && (this._observer.disconnect(), this._observer = null);
+  }
+  _updateTheme() {
+    const e = document.documentElement.getAttribute("data-theme") === "dark", a = this.shadowRoot?.querySelector(".badge");
+    a instanceof HTMLElement && (a.style.setProperty("--ag-fx-shadow-opacity", e ? "0.8" : "0.4"), e && this.variant === "monochrome" ? a.style.setProperty("--ag-fx-sweep-color", "rgba(0, 0, 0, 0.6)") : a.style.setProperty("--ag-fx-sweep-color", "rgba(255, 255, 255, 0.5)"));
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._applyFxClasses(), this._applyFxCustomProperties(), this._updateTheme();
+  }
+  updated(e) {
+    super.updated(e), (e.has("fx") || e.has("fxDisabled")) && this._applyFxClasses(), e.has("variant") && this._updateTheme(), (e.has("fxSpeed") || e.has("fxEase")) && this._applyFxCustomProperties();
+  }
+  _applyFxClasses() {
+    const e = this.shadowRoot?.querySelector(".badge");
+    if (e) {
+      const a = [];
+      e.classList.forEach((r) => {
+        r.startsWith("ag-fx-") && a.push(r);
+      }), a.forEach((r) => e.classList.remove(r)), this.fx && !this.fxDisabled && e.classList.add(`ag-fx-${this.fx}`), this.fxDisabled ? e.classList.add("ag-fx-disabled") : e.classList.remove("ag-fx-disabled");
+    }
+  }
+  _applyFxCustomProperties() {
+    const e = this.shadowRoot?.querySelector(".badge");
+    e instanceof HTMLElement && (e.style.setProperty("--ag-fx-duration", `var(--ag-fx-duration-${this.fxSpeed})`), e.style.setProperty("--ag-fx-ease", `var(--ag-fx-ease-${this.fxEase})`));
+  }
+};
+f.styles = [
+  h,
+  l.styles,
+  p`
+      /* ========================================
+         OVERRIDE PARENT HOVER STATES
+         Neutralize competing hover effects from core
+         ======================================== */
+
+      /* Badge has a brightness filter on hover when interactive */
+      :host([interactive]) .badge:hover {
+        filter: none;
+      }
+
+      /* ========================================
+         FX EFFECT SETUP
+         Add necessary CSS properties for effects that need them
+         ======================================== */
+
+      /* Shimmer needs a gradient mask */
+      .badge.ag-fx-shimmer {
+        overflow: hidden;
+        -webkit-mask-image: linear-gradient(
+          to right,
+        rgba(0, 0, 0, 0) 0%,      /* transparent left edge */
+        rgba(0, 0, 0, 0.9) 40%,     /* fade in complete at 40% */
+        rgba(0, 0, 0, 0.9) 60%,     /* fade out starts at 60% */
+        rgba(0, 0, 0, 0) 100%     /* transparent right edge */
+        );
+        mask-image: linear-gradient(
+          to right,
+        rgba(0, 0, 0, 0) 0%,      /* transparent left edge */
+        rgba(0, 0, 0, 1) 40%,     /* fade in complete at 40% */
+        rgba(0, 0, 0, 1) 60%,     /* fade out starts at 60% */
+        rgba(0, 0, 0, 0) 100%     /* transparent right edge */
+        );
+        /* 40-60% above creates a 20% wide "visible window" with soft 40% fade zones on each side. */
+        -webkit-mask-size: 250% 100%;
+        mask-size: 250% 100%;
+        -webkit-mask-position: 215% 0;
+        mask-position: 215% 0;
+      }
+
+      /* Ripple needs overflow visible to show expanding ring */
+      .badge.ag-fx-ripple {
+        overflow: visible;
+      }
+
+      /* Highlight Sweep needs a gradient background overlay */
+      .badge.ag-fx-highlight-sweep {
+        position: relative;
+        overflow: hidden;
+      }
+
+      .badge.ag-fx-highlight-sweep::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          transparent 30%,
+          var(--ag-fx-sweep-color, rgba(255, 255, 255, 0.5)) 50%,
+          transparent 70%,
+          transparent 100%
+        );
+        transform: translateX(-100%);
+        pointer-events: none;
+      }
+
+      /* ========================================
+         FX EFFECT CLASSES
+         Applied to target element (.badge)
+         ======================================== */
+
+      /* 
+        Prevent hover flicker: 
+        - Use @host for hover detection (doesn't move with animation)
+        - Or add animation-play-state to prevent retriggering
+      */
+      :host([fx="bounce"]) .badge,
+      :host([fx="flip"]) .badge,
+      :host([fx="jelly"]) .badge {
+        /* Animation only plays once per hover */
+        animation-iteration-count: 1;
+      }
+
+      /* Hover-triggered effects - now triggered by :host instead of .badge */
+      :host([fx="bounce"]:hover) .badge {
+        animation: ag-fx-bounce var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="pulse"]:hover) .badge {
+        animation: ag-fx-pulse var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="jelly"]:hover) .badge {
+        animation: ag-fx-jelly var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="shimmer"]:hover) .badge {
+        animation: ag-fx-shimmer var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="glow"]:hover) .badge {
+        animation: ag-fx-glow var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="flip"]:hover) .badge {
+        animation: ag-fx-flip var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="ripple"]:hover) .badge {
+        animation: ag-fx-ripple var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      :host([fx="highlight-sweep"]:hover) .badge::before {
+        animation: ag-fx-highlight-sweep var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Active/press effects - require interactive or explicit cursor */
+      .badge.ag-fx-press-pop {
+        cursor: pointer;
+      }
+
+      .badge.ag-fx-press-pop:active {
+        animation: ag-fx-press-pop var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Entrance effects */
+      .badge.ag-fx-slide-in {
+        animation: ag-fx-slide-in var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Disabled state */
+      .badge.ag-fx-disabled {
+        animation: none !important;
+      }
+
+      .badge.ag-fx-disabled::before {
+        animation: none !important;
+      }
+
+      /* Reduced motion support */
+      @media (prefers-reduced-motion: reduce) {
+        .badge.ag-fx-bounce,
+        .badge.ag-fx-pulse,
+        .badge.ag-fx-jelly,
+        .badge.ag-fx-shimmer,
+        .badge.ag-fx-glow,
+        .badge.ag-fx-flip,
+        .badge.ag-fx-ripple,
+        .badge.ag-fx-highlight-sweep,
+        .badge.ag-fx-press-pop,
+        .badge.ag-fx-slide-in {
+          animation-duration: 0.01ms !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `
+];
+let s = f;
+o([
+  i({ type: String, reflect: !0 })
+], s.prototype, "fx");
+o([
+  i({ type: String, attribute: "fx-speed", reflect: !0 })
+], s.prototype, "fxSpeed");
+o([
+  i({ type: String, attribute: "fx-ease", reflect: !0 })
+], s.prototype, "fxEase");
+o([
+  i({ type: Boolean, attribute: "fx-disabled", reflect: !0 })
+], s.prototype, "fxDisabled");
+export {
+  s as BadgeFx
+};

package/dist/components/BadgeFx/react/ReactBadgeFx.d.ts

@@ -0,0 +1,14 @@
+import { EventName } from '@lit/react';
+import { BadgeFx, BadgeFxProps } from '../core/BadgeFx';
+import * as React from "react";
+export interface ReactBadgeFxProps extends BadgeFxProps {
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+export declare const ReactBadgeFx: import('@lit/react').ReactWebComponent<BadgeFx, {
+    onBadgeClick: EventName<CustomEvent>;
+}>;
+export type { BadgeFxProps } from '../core/BadgeFx';
+export type { FxProps } from '../../../types/fx';
+//# sourceMappingURL=ReactBadgeFx.d.ts.map

package/dist/components/BadgeFx/react/ReactBadgeFx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactBadgeFx.d.ts","sourceRoot":"","sources":["../../../../src/components/BadgeFx/react/ReactBadgeFx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,YAAY;kBAKU,SAAS,CAAC,WAAW,CAAC;EAEvD,CAAC;AAEH,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/BadgeFx/react/ReactBadgeFx.js

@@ -0,0 +1,15 @@
+import * as e from "react";
+import { o as a } from "../../../create-component-BPMDMe-q.js";
+import "../core/BadgeFx.js";
+import { BadgeFx as t } from "../core/_BadgeFx.js";
+const c = a({
+  tagName: "ag-badge-fx",
+  elementClass: t,
+  react: e,
+  events: {
+    onBadgeClick: "badge:click"
+  }
+});
+export {
+  c as ReactBadgeFx
+};

package/dist/components/BadgeFx/vue/VueBadgeFx.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../../../VueBadgeFx.vue_vue_type_script_setup_true_lang-B5Bex8CH.js";
+export {
+  f as default
+};

package/dist/components/BadgeFx/vue/VueBadgeFx.vue.d.ts

@@ -0,0 +1,85 @@
+import { BadgeSize, BadgeVariant } from '../../Badge/core/Badge';
+
+interface VueBadgeFxProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    value?: number | null;
+    max?: number;
+    interactive?: boolean;
+    statusLabel?: string | null;
+    live?: "off" | "polite" | "assertive";
+    hiddenFromAT?: boolean;
+    fx?: string;
+    fxSpeed?: "xs" | "sm" | "md" | "lg" | "xl";
+    fxEase?: "ease" | "ease-in" | "ease-out" | "ease-in-out" | "bounce" | "spring-sm" | "spring-md" | "spring-lg";
+    fxDisabled?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VueBadgeFxProps>, {
+    variant: string;
+    size: string;
+    dot: boolean;
+    value: null;
+    max: number;
+    interactive: boolean;
+    statusLabel: null;
+    live: string;
+    hiddenFromAT: boolean;
+    fxSpeed: string;
+    fxEase: string;
+    fxDisabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VueBadgeFxProps>, {
+    variant: string;
+    size: string;
+    dot: boolean;
+    value: null;
+    max: number;
+    interactive: boolean;
+    statusLabel: null;
+    live: string;
+    hiddenFromAT: boolean;
+    fxSpeed: string;
+    fxEase: string;
+    fxDisabled: boolean;
+}>>> & Readonly<{}>, {
+    max: number;
+    size: "xs" | "sm" | "md";
+    variant: "default" | "success" | "warning" | "danger" | "monochrome" | "primary" | "info" | "neutral";
+    value: number | null;
+    dot: boolean;
+    interactive: boolean;
+    statusLabel: string | null;
+    live: "off" | "polite" | "assertive";
+    hiddenFromAT: boolean;
+    fxSpeed: "xs" | "sm" | "md" | "lg" | "xl";
+    fxEase: "ease" | "ease-in" | "ease-out" | "ease-in-out" | "bounce" | "spring-sm" | "spring-md" | "spring-lg";
+    fxDisabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=VueBadgeFx.vue.d.ts.map

package/dist/components/BadgeFx/vue/VueBadgeFx.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VueBadgeFx.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/BadgeFx/vue/VueBadgeFx.vue"],"names":[],"mappings":"AAqBA;AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,iBAAiB,CAAC;AAKzB,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EACH,MAAM,GACN,SAAS,GACT,UAAU,GACV,aAAa,GACb,QAAQ,GACR,WAAW,GACX,WAAW,GACX,WAAW,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqCD,iBAAS,cAAc;qBA2CM,GAAG;EAK/B;AASD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;SA/Gb,MAAM;;;WADJ,MAAM,GAAG,IAAI;SADf,OAAO;iBAGC,OAAO;iBACP,MAAM,GAAG,IAAI;UACpB,KAAK,GAAG,QAAQ,GAAG,WAAW;kBACtB,OAAO;aAEZ,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;YAEtC,MAAM,GACN,SAAS,GACT,UAAU,GACV,aAAa,GACb,QAAQ,GACR,WAAW,GACX,WAAW,GACX,WAAW;gBACF,OAAO;4EAqGpB,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/BadgeFx/vue/index.d.ts

@@ -0,0 +1,12 @@
+import { default as VueBadgeFx } from './VueBadgeFx.vue';
+import { VueBadgeProps } from '../../Badge/vue/index';
+
+export { VueBadgeFx };
+/** Props for VueBadgeFx */
+export interface VueBadgeFxProps extends VueBadgeProps {
+    fx?: string;
+    fxSpeed?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    fxEase?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'spring-sm' | 'spring-md' | 'spring-lg';
+    fxDisabled?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/BadgeFx/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/BadgeFx/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,2BAA2B;AAC3B,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC9G,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -0,0 +1,4 @@
+import { _ as o } from "../../../VueBadgeFx.vue_vue_type_script_setup_true_lang-B5Bex8CH.js";
+export {
+  o as VueBadgeFx
+};

package/dist/components/Breadcrumb/core/Breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { AgBreadcrumb } from './_Breadcrumb.js';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ag-breadcrumb': AgBreadcrumb;
+    }
+}
+export * from './_Breadcrumb.js';
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/core/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/core/Breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF;AAED,cAAc,kBAAkB,CAAC"}

package/dist/components/Breadcrumb/core/Breadcrumb.js

@@ -0,0 +1,5 @@
+import { AgBreadcrumb as e } from "./_Breadcrumb.js";
+customElements.get("ag-breadcrumb") || customElements.define("ag-breadcrumb", e);
+export {
+  e as AgBreadcrumb
+};

package/dist/components/Breadcrumb/core/_Breadcrumb.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+
+/**
+ * Breadcrumb item interface
+ */
+export interface BreadcrumbItem {
+    /** Display text for the breadcrumb */
+    label: string;
+    /** URL for navigation (optional for current page) */
+    href?: string;
+    /** Marks the current page */
+    current?: boolean;
+}
+export interface BreadcrumbClickEventDetail {
+    item: BreadcrumbItem;
+    index: number;
+    event: MouseEvent;
+}
+export type BreadcrumbClickEvent = CustomEvent<BreadcrumbClickEventDetail>;
+export interface BreadcrumbProps {
+    items?: BreadcrumbItem[];
+    type?: 'default' | 'slash' | 'bullet' | 'arrow';
+    primary?: boolean;
+    ariaLabel?: string;
+    onBreadcrumbClick?: (event: BreadcrumbClickEvent) => void;
+}
+/**
+ * AgBreadcrumb - Accessible breadcrumb navigation component
+ *
+ * A semantic navigation element implementing the WAI-ARIA Breadcrumb pattern
+ * for showing hierarchical page location with comprehensive accessibility support.
+ *
+ * Features:
+ * - WAI-ARIA Breadcrumb pattern compliance with proper nav landmark
+ * - Semantic ordered list structure
+ * - Current page indication via aria-current="page"
+ * - Multiple separator styles (default, slash, bullet, arrow)
+ * - Minimalist styling via design tokens
+ * - Click event handling for navigation
+ * - Form integration support
+ */
+export declare class AgBreadcrumb extends LitElement implements BreadcrumbProps {
+    static styles: import('lit').CSSResult;
+    /**
+     * Array of breadcrumb items to display
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator style type
+     */
+    type: 'default' | 'slash' | 'bullet' | 'arrow';
+    /**
+     * Primary link styling - uses blue --ag-primary color (opt-in)
+     */
+    primary: boolean;
+    /**
+     * Custom aria-label for the navigation landmark
+     */
+    ariaLabel: string;
+    /**
+     * Callback for breadcrumb click events
+     */
+    onBreadcrumbClick?: (event: BreadcrumbClickEvent) => void;
+    constructor();
+    private _handleItemClick;
+    private _renderBreadcrumbItem;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=_Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/core/_Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/core/_Breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGD,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB;AAGD,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;AAG3E,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC3D;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,YAAa,SAAQ,UAAW,YAAW,eAAe;IACrE,MAAM,CAAC,MAAM,0BA4FX;IAEF;;OAEG;IAEK,KAAK,EAAE,cAAc,EAAE,CAAC;IAEhC;;OAEG;IAEK,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEvD;;OAEG;IAEK,OAAO,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEK,SAAS,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEK,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;;IAYlE,OAAO,CAAC,gBAAgB,CAoBtB;IAEF,OAAO,CAAC,qBAAqB;IA+B7B,MAAM;CAaP"}

package/dist/components/Breadcrumb/core/_Breadcrumb.js

@@ -0,0 +1,169 @@
+import { LitElement as u, css as m, html as i } from "lit";
+import { n as s } from "../../../property-CemaeiRl.js";
+var p = Object.defineProperty, c = (b, r, a, l) => {
+  for (var e = void 0, n = b.length - 1, d; n >= 0; n--)
+    (d = b[n]) && (e = d(r, a, e) || e);
+  return e && p(r, a, e), e;
+};
+const o = class o extends u {
+  constructor() {
+    super(), this._handleItemClick = (r, a, l) => {
+      const e = new CustomEvent("breadcrumb-click", {
+        detail: {
+          item: a,
+          index: l,
+          event: r
+        },
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e), this.onBreadcrumbClick && this.onBreadcrumbClick(e);
+    }, this.items = [], this.type = "default", this.primary = !1, this.ariaLabel = "Breadcrumb";
+  }
+  _renderBreadcrumbItem(r, a) {
+    const l = a === this.items.length - 1, e = r.current || l;
+    return i`
+      <li class="ag-breadcrumb__item" part="ag-breadcrumb-item">
+        ${r.href && !e ? i`
+              <a
+                href="${r.href}"
+                class="ag-breadcrumb__link"
+                part="ag-breadcrumb-item-link"
+                @click="${(n) => this._handleItemClick(n, r, a)}"
+              >
+                ${r.label}
+              </a>
+            ` : e ? i`
+                <span class="ag-breadcrumb__text" aria-current="page" part="ag-breadcrumb-item-current">
+                  ${r.label}
+                </span>
+              ` : i`
+                <span class="ag-breadcrumb__text" part="ag-breadcrumb-item-text">
+                  ${r.label}
+                </span>
+              `}
+      </li>
+    `;
+  }
+  render() {
+    return !this.items || this.items.length === 0 ? i`` : i`
+      <nav class="ag-breadcrumb" part="ag-breadrumb" aria-label="${this.ariaLabel}">
+        <ol class="ag-breadcrumb__list">
+          ${this.items.map((r, a) => this._renderBreadcrumbItem(r, a))}
+        </ol>
+      </nav>
+    `;
+  }
+};
+o.styles = m`
+    /* MINIMALIST & THEMEABLE - Styling via --ag-* design tokens */
+    :host {
+      display: block;
+    }
+
+    .ag-breadcrumb__list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      white-space: nowrap;
+    }
+
+    .ag-breadcrumb__item {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .ag-breadcrumb__item + .ag-breadcrumb__item {
+      padding-inline-start: var(--ag-space-2);
+    }
+
+    .ag-breadcrumb__item + .ag-breadcrumb__item::before {
+      content: "›";
+      padding-inline-end: var(--ag-space-2);
+      color: var(--ag-text-secondary);
+      speak: none;
+      user-select: none;
+    }
+
+    /* Separator variants */
+    :host([type="slash"]) .ag-breadcrumb__item + .ag-breadcrumb__item::before {
+      content: "/";
+    }
+
+    :host([type="arrow"]) .ag-breadcrumb__item + .ag-breadcrumb__item::before {
+      content: "→";
+    }
+
+    :host([type="bullet"]) .ag-breadcrumb__item + .ag-breadcrumb__item::before {
+      content: "•";
+    }
+
+    /* Default link styling - uses text color */
+    .ag-breadcrumb__link {
+      text-decoration: none;
+      color: var(--ag-text-primary);
+      padding: var(--ag-space-1);
+      margin: calc(var(--ag-space-1) * -1);
+      border-radius: var(--ag-border-radius);
+      transition: all var(--ag-transition-duration) ease;
+      cursor: pointer;
+    }
+
+    .ag-breadcrumb__link:hover {
+      text-decoration: underline;
+    }
+
+    /* Primary variant - blue link styling (opt-in) */
+    :host([primary]) .ag-breadcrumb__link {
+      color: var(--ag-primary-text);
+    }
+
+    :host([primary]) .ag-breadcrumb__link:hover {
+      color: var(--ag-primary-text);
+      text-decoration: underline;
+    }
+
+    .ag-breadcrumb__link:focus-visible {
+      outline: var(--ag-focus-width) solid var(--ag-focus);
+      outline-offset: var(--ag-focus-offset);
+    }
+
+    /* Current page styling - de-emphasized */
+    .ag-breadcrumb__link[aria-current="page"] {
+      color: var(--ag-text-secondary);
+      text-decoration: none;
+      cursor: default;
+    }
+
+    .ag-breadcrumb__link[aria-current="page"]:hover {
+      text-decoration: none;
+    }
+
+    /* Non-linked current page */
+    .ag-breadcrumb__text {
+      color: var(--ag-text-primary);
+      padding: var(--ag-space-1);
+      margin: calc(var(--ag-space-1) * -1);
+    }
+  `;
+let t = o;
+c([
+  s({ type: Array })
+], t.prototype, "items");
+c([
+  s({ type: String, reflect: !0 })
+], t.prototype, "type");
+c([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "primary");
+c([
+  s({ type: String, reflect: !0, attribute: "aria-label" })
+], t.prototype, "ariaLabel");
+c([
+  s({ attribute: !1 })
+], t.prototype, "onBreadcrumbClick");
+export {
+  t as AgBreadcrumb
+};

package/dist/components/Breadcrumb/react/ReactBreadcrumb.d.ts

@@ -0,0 +1,15 @@
+import { EventName } from '@lit/react';
+import { AgBreadcrumb, BreadcrumbProps, BreadcrumbClickEvent } from '../core/Breadcrumb';
+import * as React from "react";
+/**
+ * React-specific props interface derived from core BreadcrumbProps
+ * Extends core props including event handlers (onBreadcrumbClick)
+ */
+export interface ReactBreadcrumbProps extends BreadcrumbProps {
+    children?: React.ReactNode;
+}
+export declare const ReactBreadcrumb: import('@lit/react').ReactWebComponent<AgBreadcrumb, {
+    onBreadcrumbClick: EventName<BreadcrumbClickEvent>;
+}>;
+export type { BreadcrumbClickEvent, BreadcrumbItem } from '../core/Breadcrumb';
+//# sourceMappingURL=ReactBreadcrumb.d.ts.map

package/dist/components/Breadcrumb/react/ReactBreadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactBreadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/react/ReactBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAE5B;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,eAAe;uBAKiB,SAAS,CAAC,oBAAoB,CAAC;EAE1E,CAAC;AAGH,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}