@aleph-alpha/chat-kit 1.3.0 → 1.3.1

package/dist/{CkInput.vue_vue_type_script_setup_true_lang-BoUxOQbH.js → CkInput.vue_vue_type_script_setup_true_lang-CyGLItQZ.js}

@@ -422,7 +422,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         role: "group",
         "aria-label": groupLabel.value,
-        class: "ck-feedback-button flex items-center gap-1"
+        class: "ck-feedback-button flex items-center gap-4"
       }, [
         createVNode(unref(UiTooltip), {
           content: thumbsUpLabel.value,
@@ -437,7 +437,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               disabled: isUpDisabled.value,
               class: [
                 "ck-feedback-button__thumb",
-                { "ck-feedback-button__thumb--selected": isUpSelected.value }
+                { "bg-core-bg-tertiary": isUpSelected.value }
               ],
               onClick: _cache[0] || (_cache[0] = ($event) => handleClick("up"))
             }), {
@@ -467,7 +467,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               disabled: isDownDisabled.value,
               class: [
                 "ck-feedback-button__thumb",
-                { "ck-feedback-button__thumb--selected": isDownSelected.value }
+                { "bg-core-bg-tertiary": isDownSelected.value }
               ],
               onClick: _cache[1] || (_cache[1] = ($event) => handleClick("down"))
             }), {
@@ -488,7 +488,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-c452d66c"]]);
+const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-245705b8"]]);
 const CHAT_HISTORY_ACTIVE_INDICATOR_CLASS = 'before:absolute before:z-10 before:top-1/2 before:left-0 before:h-1/2 before:w-0.5 before:-translate-y-1/2 before:origin-left before:scale-x-0 before:rounded-full before:bg-background-accent-default before:opacity-0 before:transition-[transform,opacity] before:duration-200 before:ease-linear before:content-[""] data-[active=true]:before:scale-x-100 data-[active=true]:before:opacity-100';
 const _hoisted_1$3 = ["data-active"];
 const _hoisted_2$2 = { class: "min-w-0 flex-1" };

package/dist/chat-kit.css

@@ -14,20 +14,11 @@
 }
 }
 
-.ck-feedback-button__thumb[data-v-c452d66c] button {
+.ck-feedback-button__thumb[data-v-245705b8] {
   transition: background-color 0.15s ease-out;
 }
-
-/* Selected thumbs stay visually emphasised on top of the default ghost
-   variant: the filled icon (via `fill-current`) carries the primary
-   affordance; the tinted background reinforces it without competing with
-   neighbouring action buttons. The token matches `bg-core-bg-tertiary`
-   used elsewhere in chat-kit. */
-.ck-feedback-button__thumb--selected[data-v-c452d66c] button {
-  background-color: var(--core-bg-tertiary);
-}
 @media (prefers-reduced-motion: reduce) {
-.ck-feedback-button__thumb[data-v-c452d66c] button {
+.ck-feedback-button__thumb[data-v-245705b8] {
     transition-duration: 0.01ms;
 }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CkFeedbackButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackButton/CkFeedbackButton.vue"],"names":[],"mappings":"AAqKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyRtE,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CkFeedbackButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkFeedbackButton/CkFeedbackButton.vue"],"names":[],"mappings":"AAqJA,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiRtE,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,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 } from "../CkInput.vue_vue_type_script_setup_true_lang-BoUxOQbH.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p } from "../CkInput.vue_vue_type_script_setup_true_lang-CyGLItQZ.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,

package/dist/index.js

@@ -2,7 +2,7 @@ import { C } from "./ChatService-LogwJNxh.js";
 import { u } from "./useMessageHandler-BmBdu2EW.js";
 import { C as C2, d, p, u as u2, a } from "./useChatKitLabels-ftC52m7f.js";
 import { u as u3, a as a2, b } from "./useConversationSessions-ulFhtpQr.js";
-import { _, a as a3, b as b2, C as C3, c, d as d2, e, f, g, h, i, j, k, l, m, n, o, p as p2 } from "./CkInput.vue_vue_type_script_setup_true_lang-BoUxOQbH.js";
+import { _, a as a3, b as b2, C as C3, c, d as d2, e, f, g, h, i, j, k, l, m, n, o, p as p2 } from "./CkInput.vue_vue_type_script_setup_true_lang-CyGLItQZ.js";
 export {
   C2 as CHAT_KIT_LABELS,
   C as ChatService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -64,11 +64,12 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
-    "@aleph-alpha/ui-library": "2.3.0"
+    "@aleph-alpha/ui-library": "2.4.2"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.2.17",
     "@storybook/addon-docs": "10.2.17",
+    "@storybook/addon-themes": "10.2.17",
     "@storybook/vue3-vite": "10.2.17",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/vue": "8.1.0",

package/src/components/base/CkFeedbackButton/CkFeedbackButton.vue

@@ -27,10 +27,7 @@ const emit = defineEmits<{
 
 const labels = useChatKitLabels();
 
-// Label resolution order: per-instance prop, then injected i18n label, then
-// the English default. The final fallback covers consumers who type their
-// labels object as `ChatKitLabels` without the (optional) feedback keys, so
-// the value is always a string at the call site.
+// Resolution order: per-instance prop, injected label, English default.
 const thumbsUpLabel = computed(
   () =>
     props.ariaLabelThumbsUp ??
@@ -53,12 +50,8 @@ const groupLabel = computed(
 const isUpSelected = computed(() => props.value === 'up');
 const isDownSelected = computed(() => props.value === 'down');
 
-// When locked, the unselected thumb is disabled and skipped in the tab order.
-// The selected thumb stays focusable (no native `disabled`) so assistive tech
-// can still announce the locked-in choice via `aria-pressed`, but both thumbs
-// carry `aria-disabled="true"` so screen readers communicate that the choice
-// is no longer interactive. Clicks on either are no-ops, gated by the early
-// return in `handleClick`.
+// When locked, only the unselected thumb is natively disabled; the selected
+// thumb stays focusable so screen readers can announce its `aria-pressed`.
 const isUpDisabled = computed(
   () => props.disabled || (props.locked && !isUpSelected.value),
 );
@@ -80,7 +73,7 @@ function handleClick(target: 'up' | 'down'): void {
   <div
     role="group"
     :aria-label="groupLabel"
-    class="ck-feedback-button flex items-center gap-1"
+    class="ck-feedback-button flex items-center gap-4"
   >
     <UiTooltip
       :content="thumbsUpLabel"
@@ -95,7 +88,7 @@ function handleClick(target: 'up' | 'down'): void {
         :disabled="isUpDisabled"
         :class="[
           'ck-feedback-button__thumb',
-          { 'ck-feedback-button__thumb--selected': isUpSelected },
+          { 'bg-core-bg-tertiary': isUpSelected },
         ]"
         @click="handleClick('up')"
       >
@@ -120,7 +113,7 @@ function handleClick(target: 'up' | 'down'): void {
         :disabled="isDownDisabled"
         :class="[
           'ck-feedback-button__thumb',
-          { 'ck-feedback-button__thumb--selected': isDownSelected },
+          { 'bg-core-bg-tertiary': isDownSelected },
         ]"
         @click="handleClick('down')"
       >
@@ -136,21 +129,12 @@ function handleClick(target: 'up' | 'down'): void {
 </template>
 
 <style scoped>
-.ck-feedback-button__thumb :deep(button) {
+.ck-feedback-button__thumb {
   transition: background-color 0.15s ease-out;
 }
 
-/* Selected thumbs stay visually emphasised on top of the default ghost
-   variant: the filled icon (via `fill-current`) carries the primary
-   affordance; the tinted background reinforces it without competing with
-   neighbouring action buttons. The token matches `bg-core-bg-tertiary`
-   used elsewhere in chat-kit. */
-.ck-feedback-button__thumb--selected :deep(button) {
-  background-color: var(--core-bg-tertiary);
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .ck-feedback-button__thumb :deep(button) {
+  .ck-feedback-button__thumb {
     transition-duration: 0.01ms;
   }
 }