@aleph-alpha/chat-kit 5.12.0 → 5.13.0

package/dist/components/base/CkCitation/CkCitation.stories.d.ts

@@ -10,11 +10,8 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 declare const meta: Meta<typeof CkCitation>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-/**
- * A single marker in its default (amber) state. Hover the chip (or focus it and
- * press Enter) to reveal the source card.
- */
 export declare const Default: Story;
+export declare const States: Story;
 /**
  * The selected (teal) state — set `selected` when the citation's source is the
  * one currently open/highlighted, so the active marker stands out.

package/dist/components/base/CkCitation/CkCitation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCitation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/CkCitation.stories.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAK3D;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA2BjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}
+{"version":3,"file":"CkCitation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/CkCitation.stories.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAK3D;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA2BjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6BnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAoBF,eAAO,MAAM,MAAM,EAAE,KAoCpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}

package/dist/components/base/CkCitation/CkCitation.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCitation.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/CkCitation.vue"],"names":[],"mappings":"AA0JA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA+R/C,QAAA,MAAM,YAAY;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkCitation.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/CkCitation.vue"],"names":[],"mappings":"AA8JA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiS/C,QAAA,MAAM,YAAY;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/base/CkCitation/types.d.ts

@@ -27,6 +27,11 @@ export interface CkCitationSource {
      * non-paginated sources.
      */
     locationLabel?: string;
+    /**
+     * Name of the collection the source belongs to, shown in the card footer
+     * before the location. Omit when the source has no collection.
+     */
+    collectionName?: string;
     /**
      * Source URL for the card's external-link action. Activating it emits
      * `open-source`. Omit to hide the action.
@@ -52,7 +57,7 @@ export interface CkCitationProps extends CkCitationSource {
     /**
      * Marks the citation as selected/active (e.g. the source it points to is
      * currently open or highlighted). Renders the marker in its selected (teal)
-     * state instead of the default amber.
+     * state instead of the default neutral one.
      * @default false
      */
     selected?: boolean;

package/dist/components/base/CkCitation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitation/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC"}

package/dist/components/base/CkCitationCard/CkCitationCard.stories.d.ts

@@ -22,10 +22,21 @@ export declare const Default: Story;
  */
 export declare const WithoutLink: Story;
 /**
- * No `locationLabel` — the footer is hidden. Use for non-paginated sources
- * such as a plain web page or a whole-document citation.
+ * No `locationLabel` — the footer keeps just the collection. Use for
+ * non-paginated sources such as a plain web page.
  */
 export declare const WithoutLocation: Story;
+/**
+ * No `collectionName` — the footer keeps just the location, and the separator
+ * goes with it. Use for sources that don't come from a collection.
+ */
+export declare const WithoutCollection: Story;
+/**
+ * A collection name longer than the card is wide. The name truncates and the
+ * location stays on the same line — the page a citation points at is the more
+ * useful half, so it must not be pushed out or wrapped away.
+ */
+export declare const LongCollectionName: Story;
 /**
  * Minimal: title + excerpt only (no link, no location). The leanest source a
  * card can describe.

package/dist/components/base/CkCitationCard/CkCitationCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCitationCard.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/CkCitationCard.stories.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAK3D;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAuBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC"}
+{"version":3,"file":"CkCitationCard.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/CkCitationCard.stories.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAK3D;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAyBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC"}

package/dist/components/base/CkCitationCard/CkCitationCard.vue.d.ts

@@ -5,6 +5,7 @@ declare const __VLS_export: import("vue").DefineComponent<CkCitationCardProps, {
     "onOpen-source"?: ((url: string) => any) | undefined;
 }>, {
     locationLabel: string;
+    collectionName: string;
     url: string;
     openSourceLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/base/CkCitationCard/CkCitationCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCitationCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/CkCitationCard.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA4KnD,QAAA,MAAM,YAAY;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkCitationCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/CkCitationCard.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA+PnD,QAAA,MAAM,YAAY;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/base/CkCitationCard/types.d.ts

@@ -25,9 +25,14 @@ export interface CkCitationCardProps {
     /**
      * Location label shown in the footer, e.g. `"Page 3"`. Pass a fully
      * formatted, localized string — the component does no number formatting.
-     * Omit for non-paginated sources to hide the footer.
+     * Omit for non-paginated sources.
      */
     locationLabel?: string;
+    /**
+     * Name of the collection the source belongs to, shown in the footer before
+     * the location. Omit when the source has no collection.
+     */
+    collectionName?: string;
     /**
      * When set, the external-link action is shown in the header. Activating it
      * emits `open-source` with this value; the host opens it (it may be an

package/dist/components/base/CkCitationCard/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationCard/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC"}

package/dist/components/base/CkCitationLabel/CkCitationLabel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCitationLabel.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationLabel/CkCitationLabel.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA6GpD,QAAA,MAAM,YAAY;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkCitationLabel.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCitationLabel/CkCitationLabel.vue"],"names":[],"mappings":"AA8EA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAiHpD,QAAA,MAAM,YAAY;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, c, C, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A } from "../CkHistory.vue_vue_type_script_setup_true_lang-CImSzLYs.js";
+import { _, a, b, c, C, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A } from "../CkHistory.vue_vue_type_script_setup_true_lang-BNcJURkq.js";
 export {
   _ as CkAgentMessage,
   a as CkAgentMessageHeader,

package/dist/composables/useIsTruncated.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Local copy of ui-library's internal probe of the same name. chat-kit's
+ * supported ui-library range (^5.3.0) does not export it, and it is too small
+ * to justify widening that package's public API. Drop this file once the range
+ * moves up to a version that exports it.
+ */
+import { type Ref, type ShallowRef } from 'vue';
+/** An element ref as produced by `useTemplateRef`. */
+type ElementRef = Readonly<ShallowRef<HTMLElement | null>>;
+/**
+ * Whether an element's text is currently clipped by `text-overflow: ellipsis`.
+ *
+ * Re-measures when the element resizes and whenever `watchSource` changes, so
+ * it stays correct as the container narrows or the text is swapped out. Use it
+ * to show a tooltip only for names that are actually cut off.
+ * @param elementRef - The element whose text may be clipped
+ * @param watchSource - Value to re-measure on, e.g. the rendered text
+ * @returns Reactive truncation state
+ */
+export declare function useIsTruncated(elementRef: ElementRef, watchSource?: () => unknown): Ref<boolean>;
+export {};
+//# sourceMappingURL=useIsTruncated.d.ts.map

package/dist/composables/useIsTruncated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsTruncated.d.ts","sourceRoot":"","sources":["../../src/composables/useIsTruncated.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAA8B,KAAK,GAAG,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5E,sDAAsD;AACtD,KAAK,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;AA6B3D;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,UAAU,EAAE,UAAU,EACtB,WAAW,CAAC,EAAE,MAAM,OAAO,GAC1B,GAAG,CAAC,OAAO,CAAC,CA6Bd"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-Tellov3w.js";
 import { C, d, p, u as u2, b } from "./useChatKitLabels-CMOr3Kjq.js";
 import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-Dn4ctxk8.js";
-import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B } from "./CkHistory.vue_vue_type_script_setup_true_lang-CImSzLYs.js";
+import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B } from "./CkHistory.vue_vue_type_script_setup_true_lang-BNcJURkq.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -67,7 +67,6 @@
     "vue": "^3.5.27"
   },
   "dependencies": {
-    "@aleph-alpha/ui-library": "^5.3.0",
     "dompurify": "^3.3.2",
     "katex": "^0.17.0",
     "mdast-util-find-and-replace": "^3.0.2",
@@ -77,7 +76,8 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "unified": "^11.0.5"
+    "unified": "^11.0.5",
+    "@aleph-alpha/ui-library": "5.10.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.2.17",

package/src/components/base/CkCitation/CkCitation.spec.ts

@@ -72,11 +72,11 @@ describe('CkCitation', () => {
     expect(marker).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('renders the default (amber) marker state by default', () => {
+  it('renders the default (neutral) marker state by default', () => {
     render(CkCitation, { props: base });
 
     const marker = screen.getByRole('button', { name: 'Source 1' });
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     expect(marker.className).not.toContain('bg-background-accent-soft');
   });
 
@@ -85,6 +85,6 @@ describe('CkCitation', () => {
 
     const marker = screen.getByRole('button', { name: 'Source 1' });
     expect(marker.className).toContain('bg-background-accent-soft');
-    expect(marker.className).not.toContain('bg-background-accent-yellow');
+    expect(marker.className).not.toContain('bg-background-surface-citation');
   });
 });

package/src/components/base/CkCitation/CkCitation.stories.ts

@@ -1,4 +1,5 @@
 import CkCitation from './CkCitation.vue';
+import { CkCitationLabel } from '../CkCitationLabel';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 const SNIPPET =
@@ -44,10 +45,91 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * A single marker in its default (amber) state. Hover the chip (or focus it and
- * press Enter) to reveal the source card.
+ * A single marker in its default (neutral) state. Hover the chip (or focus it
+ * and press Enter) to reveal the source card.
  */
-export const Default: Story = {};
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkCitation } from '@aleph-alpha/chat-kit';
+
+function openSource(url: string) {
+  // The source URL is often auth-proxied, so the host opens it.
+  window.open(url, '_blank', 'noopener');
+}
+</script>
+
+<template>
+  <p>
+    Departments with tailored training adopted the tools faster.<CkCitation
+      :index="1"
+      file-name="Q2_Business_Plan.pdf"
+      snippet="Lorem ipsum dolor sit amet consectetur…"
+      location-label="Page 3"
+      collection-name="Collection name"
+      url="/api/v1/search-stores/ss_abc/files/file_123/public-urls"
+      @open-source="openSource"
+    />
+  </p>
+</template>`;
+
+export const Default: Story = {
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * The four marker states side by side, as specified in the design: default,
+ * hover, focus and selected. Hover and focus are live — mouse over the second
+ * chip or tab to the third to see them.
+ */
+const statesTemplateSource = `<script setup lang="ts">
+import { CkCitationLabel } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <!-- \`hover-layer-active\` pins the hover overlay open; focus is a real
+       :focus-visible, so it only shows when the chip is focused. -->
+  <CkCitationLabel as="button" :index="1" />
+  <CkCitationLabel as="button" :index="1" class="hover-layer-active" />
+  <CkCitationLabel as="button" :index="1" />
+  <CkCitationLabel as="button" :index="1" selected />
+</template>`;
+
+export const States: Story = {
+  parameters: { docs: { source: { code: statesTemplateSource } } },
+  render: (args) => ({
+    components: { CkCitationLabel },
+    setup() {
+      return { args };
+    },
+    // `CkCitationLabel` renders the chip on its own, so each state can be shown
+    // at rest. Hover is forced with `hover-layer-active` (the class ui-library
+    // uses to pin its overlay open); focus is real, applied by the play
+    // function below, because `:focus-visible` cannot be faked with a class.
+    template: `
+      <div style="display: flex; align-items: flex-start; gap: 32px;">
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" />
+          <small style="font-size: 11px; opacity: 0.6;">default</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" class="hover-layer-active" />
+          <small style="font-size: 11px; opacity: 0.6;">hover</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" data-focus-demo />
+          <small style="font-size: 11px; opacity: 0.6;">focus</small>
+        </div>
+        <div style="display: grid; justify-items: center; gap: 8px;">
+          <CkCitationLabel v-bind="args" :index="1" as="button" selected />
+          <small style="font-size: 11px; opacity: 0.6;">selected</small>
+        </div>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    // A real focus, so the ring is the one keyboard users actually get.
+    canvasElement.querySelector<HTMLElement>('[data-focus-demo]')?.focus();
+  },
+};
 
 /**
  * The selected (teal) state — set `selected` when the citation's source is the

package/src/components/base/CkCitation/CkCitation.vue

@@ -109,10 +109,13 @@ onBeforeUnmount(() => {
 <template>
   <UiPopover v-model:open="open">
     <UiPopoverTrigger as-child>
+      <!-- An open card is itself a selection: the chip the user is reading
+           about shows the selected state, so it stands out from its neighbours
+           while the card is up. -->
       <CkCitationLabel
         as="button"
         :index="index"
-        :selected="selected"
+        :selected="selected || open"
         :aria-label="ariaLabel"
         @keydown="onTriggerKeydown"
         @mouseenter="onPointerEnter"
@@ -134,6 +137,7 @@ onBeforeUnmount(() => {
         :file-name="fileName"
         :snippet="snippet"
         :location-label="locationLabel"
+        :collection-name="collectionName"
         :url="url"
         :open-source-label="openSourceLabel"
         @open-source="(u: string) => emit('open-source', u)"

package/src/components/base/CkCitation/types.ts

@@ -27,6 +27,11 @@ export interface CkCitationSource {
    * non-paginated sources.
    */
   locationLabel?: string;
+  /**
+   * Name of the collection the source belongs to, shown in the card footer
+   * before the location. Omit when the source has no collection.
+   */
+  collectionName?: string;
   /**
    * Source URL for the card's external-link action. Activating it emits
    * `open-source`. Omit to hide the action.
@@ -53,7 +58,7 @@ export interface CkCitationProps extends CkCitationSource {
   /**
    * Marks the citation as selected/active (e.g. the source it points to is
    * currently open or highlighted). Renders the marker in its selected (teal)
-   * state instead of the default amber.
+   * state instead of the default neutral one.
    * @default false
    */
   selected?: boolean;

package/src/components/base/CkCitationCard/CkCitationCard.spec.ts

@@ -69,6 +69,43 @@ describe('CkCitationCard', () => {
     expect(screen.getByText(snippet).className).toContain('line-clamp-6');
   });
 
+  it('shows the collection name before the location in the footer', () => {
+    render(CkCitationCard, {
+      props: { ...base, collectionName: 'EU AI Act', locationLabel: 'Page 3' },
+    });
+
+    const footer = screen.getByText('EU AI Act').closest('p');
+    expect(footer).toHaveTextContent('EU AI Act | Page 3');
+  });
+
+  it('drops the separator when only one footer part is present', () => {
+    render(CkCitationCard, { props: { ...base, collectionName: 'EU AI Act' } });
+
+    expect(screen.getByText('EU AI Act').closest('p')).not.toHaveTextContent(
+      '|',
+    );
+  });
+
+  it('hides the footer entirely with neither a collection nor a location', () => {
+    render(CkCitationCard, { props: base });
+
+    expect(screen.queryByText('Page 3')).not.toBeInTheDocument();
+    expect(screen.queryByText('|')).not.toBeInTheDocument();
+  });
+
+  it('keeps the location intact when the collection name is too long', () => {
+    const collectionName =
+      'Public Sector Knowledge Base — European Union Regulatory Corpus 2026';
+    render(CkCitationCard, {
+      props: { ...base, collectionName, locationLabel: 'Page 3' },
+    });
+
+    // jsdom has no layout, so the guarantee is asserted through the classes
+    // that produce it: the name is the only part allowed to give way.
+    expect(screen.getByText(collectionName).className).toContain('truncate');
+    expect(screen.getByText('Page 3').className).toContain('shrink-0');
+  });
+
   it('uses the injected citationOpenSource label via provideChatKitLabels', () => {
     const Wrapper = defineComponent({
       setup() {

package/src/components/base/CkCitationCard/CkCitationCard.stories.ts

@@ -20,6 +20,7 @@ const meta: Meta<typeof CkCitationCard> = {
     fileName: { control: 'text' },
     snippet: { control: 'text' },
     locationLabel: { control: 'text' },
+    collectionName: { control: 'text' },
     url: { control: 'text' },
     openSourceLabel: { control: 'text' },
   },
@@ -27,6 +28,7 @@ const meta: Meta<typeof CkCitationCard> = {
     fileName: 'Q2_Business_Plan.pdf',
     snippet: LOREM,
     locationLabel: 'Page 3',
+    collectionName: 'Collection name',
     url: '/api/v1/search-stores/ss_abc/files/file_123/public-urls',
   },
   decorators: [
@@ -76,19 +78,44 @@ export const WithoutLink: Story = {
 };
 
 /**
- * No `locationLabel` — the footer is hidden. Use for non-paginated sources
- * such as a plain web page or a whole-document citation.
+ * No `locationLabel` — the footer keeps just the collection. Use for
+ * non-paginated sources such as a plain web page.
  */
 export const WithoutLocation: Story = {
   args: { locationLabel: undefined },
 };
 
+/**
+ * No `collectionName` — the footer keeps just the location, and the separator
+ * goes with it. Use for sources that don't come from a collection.
+ */
+export const WithoutCollection: Story = {
+  args: { collectionName: undefined },
+};
+
+/**
+ * A collection name longer than the card is wide. The name truncates and the
+ * location stays on the same line — the page a citation points at is the more
+ * useful half, so it must not be pushed out or wrapped away.
+ */
+export const LongCollectionName: Story = {
+  args: {
+    collectionName:
+      'Public Sector Knowledge Base — European Union Regulatory Corpus 2026',
+    locationLabel: 'Page 3',
+  },
+};
+
 /**
  * Minimal: title + excerpt only (no link, no location). The leanest source a
  * card can describe.
  */
 export const MinimalSnippetOnly: Story = {
-  args: { url: undefined, locationLabel: undefined },
+  args: {
+    url: undefined,
+    locationLabel: undefined,
+    collectionName: undefined,
+  },
 };
 
 /**

package/src/components/base/CkCitationCard/CkCitationCard.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { UiFileType, UiButton, UiIcon } from '@aleph-alpha/ui-library';
+import { computed, useTemplateRef } from 'vue';
+import {
+  UiFileType,
+  UiButton,
+  UiIcon,
+  UiTooltip,
+} from '@aleph-alpha/ui-library';
+import { useIsTruncated } from '../../../composables/useIsTruncated';
 import {
   defaultChatKitLabels,
   useChatKitLabels,
@@ -13,6 +19,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<CkCitationCardProps>(), {
   locationLabel: undefined,
+  collectionName: undefined,
   url: undefined,
   openSourceLabel: undefined,
 });
@@ -31,6 +38,16 @@ const openSourceAriaLabel = computed(
     defaultChatKitLabels.citationOpenSource!,
 );
 
+// Both labels are clipped to the card width, so each gets the same tooltip
+// treatment as a file row: revealed only when the text is actually cut off.
+const fileNameRef = useTemplateRef<HTMLElement>('fileNameRef');
+const collectionRef = useTemplateRef<HTMLElement>('collectionRef');
+const isFileNameTruncated = useIsTruncated(fileNameRef, () => props.fileName);
+const isCollectionTruncated = useIsTruncated(
+  collectionRef,
+  () => props.collectionName,
+);
+
 function handleOpen(): void {
   if (props.url) {
     emit('open-source', props.url);
@@ -42,14 +59,20 @@ function handleOpen(): void {
   <div
     class="ck-citation-card flex w-[22.5rem] max-w-[90vw] flex-col gap-2 rounded-md bg-background-surface-floating px-6 pb-6 pt-4 shadow-md"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex min-w-0 items-center gap-3 py-0.5">
       <UiFileType :filename="fileName" class="shrink-0" />
-      <p
-        class="min-w-0 truncate text-sm font-medium text-content-on-surface-primary"
-        :title="fileName"
+      <UiTooltip
+        :content="fileName"
+        :disabled="!isFileNameTruncated"
+        align="start"
       >
-        {{ fileName }}
-      </p>
+        <p
+          ref="fileNameRef"
+          class="min-w-0 truncate text-sm font-medium leading-4 text-content-on-surface-primary"
+        >
+          {{ fileName }}
+        </p>
+      </UiTooltip>
       <UiButton
         v-if="url"
         variant="ghost"
@@ -68,11 +91,30 @@ function handleOpen(): void {
       {{ snippet }}
     </p>
 
+    <!-- The location is the more useful half, so the collection name is the
+         part that gives way when the two don't fit on one line. -->
     <p
-      v-if="locationLabel"
-      class="text-sm leading-5 text-content-on-surface-muted"
+      v-if="collectionName || locationLabel"
+      class="flex items-center gap-1.5 text-sm leading-5 text-content-on-surface-muted"
     >
-      {{ locationLabel }}
+      <UiTooltip
+        v-if="collectionName"
+        :content="collectionName"
+        :disabled="!isCollectionTruncated"
+        align="start"
+      >
+        <span ref="collectionRef" class="min-w-0 truncate">
+          {{ collectionName }}
+        </span>
+      </UiTooltip>
+      <span
+        v-if="collectionName && locationLabel"
+        aria-hidden="true"
+        class="shrink-0 text-border-input-strong"
+      >
+        |
+      </span>
+      <span v-if="locationLabel" class="shrink-0">{{ locationLabel }}</span>
     </p>
   </div>
 </template>

package/src/components/base/CkCitationCard/types.ts

@@ -25,9 +25,14 @@ export interface CkCitationCardProps {
   /**
    * Location label shown in the footer, e.g. `"Page 3"`. Pass a fully
    * formatted, localized string — the component does no number formatting.
-   * Omit for non-paginated sources to hide the footer.
+   * Omit for non-paginated sources.
    */
   locationLabel?: string;
+  /**
+   * Name of the collection the source belongs to, shown in the footer before
+   * the location. Omit when the source has no collection.
+   */
+  collectionName?: string;
   /**
    * When set, the external-link action is shown in the header. Activating it
    * emits `open-source` with this value; the host opens it (it may be an

package/src/components/base/CkCitationLabel/CkCitationLabel.spec.ts

@@ -53,11 +53,11 @@ describe('CkCitationLabel', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders the default (amber) state by default', () => {
+  it('renders the default (neutral) state by default', () => {
     const { container } = render(CkCitationLabel, { props: { index: 1 } });
 
     const marker = container.querySelector('.ck-citation')!;
-    expect(marker.className).toContain('bg-background-accent-yellow');
+    expect(marker.className).toContain('bg-background-surface-citation');
     expect(marker.className).not.toContain('bg-background-accent-soft');
   });
 
@@ -68,6 +68,6 @@ describe('CkCitationLabel', () => {
 
     const marker = container.querySelector('.ck-citation')!;
     expect(marker.className).toContain('bg-background-accent-soft');
-    expect(marker.className).not.toContain('bg-background-accent-yellow');
+    expect(marker.className).not.toContain('bg-background-surface-citation');
   });
 });

package/src/components/base/CkCitationLabel/CkCitationLabel.vue

@@ -46,17 +46,18 @@ const resolvedAriaLabel = computed(
     :role="isButton ? undefined : 'img'"
     :aria-label="resolvedAriaLabel"
     :class="[
-      'ck-citation mx-px inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1 align-middle text-sm leading-4 tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'ck-citation ui-focus-ring mx-px inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-transparent px-1 align-middle text-sm leading-4 tabular-nums transition-colors',
       // The static chip is part of the prose: it must stay selectable so the
       // number survives a copy of the surrounding text. A control shouldn't
       // start a text selection on click, so button mode keeps `select-none`.
-      isButton ? 'select-none' : '',
+      // Only the control gets the hover layer; a static chip has no hover state.
+      isButton ? 'select-none hover-layer hover-layer-default' : '',
       selected
-        ? 'bg-background-accent-soft text-black'
-        : 'bg-background-accent-yellow text-background-status-warning',
+        ? 'bg-background-accent-soft text-content-on-accent-soft'
+        : 'bg-background-surface-citation text-content-on-surface-primary',
     ]"
   >
-    {{ index }}
+    <span>{{ index }}</span>
   </component>
 </template>