@kungal/ui-core 2.54.0 → 2.56.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @kungal/ui-core
 
+## 2.56.0
+
+### Minor Changes
+
+- 570067b: Coloured text and placeholders now clear WCAG AA (4.5:1). A kungal Flutter app's contrast check measured KunUI's own coloured text and placeholders below it, and the web uses the same classes.
+
+  **New tokens:**
+
+  - `--color-{color}-text` (Tailwind `text-primary-text`, `text-danger-text`, …), one per semantic colour, `default` included.
+  - In Dart: `KunColorScale.text`.
+
+  **Why a new token.** A fill colour used as text measured 1.75–4.42:1 on the light page for every colour but `default`, and in dark mode primary and danger fell to 3.87:1 and 3.66:1 on cards. `{color}-text` is the ramp step closest to the fill that clears 4.5:1 on:
+
+  - the page background;
+  - cards (`content1`);
+  - the colour's own 20% tint over each, which is the hover and keyboard-focus fill of a light item and the fill of a flat chip.
+
+  The token generator measures all four in both modes and fails the build if one misses. The steps it picks:
+
+  | Mode  | Step 600                      | Step 700                                |
+  | ----- | ----------------------------- | --------------------------------------- |
+  | Light | secondary, warning            | primary, success, danger, info, default |
+  | Dark  | every colour except secondary | secondary                               |
+
+  **What moved to it:**
+
+  - The `light`, `bordered` and `flat` variants (buttons, chips, badges, menu items) and `kunTextClasses`, which covers KunLink, selected tabs, active steps and reactions.
+  - KunInfo's `bordered` text, and its dark `flat` danger and info.
+  - Every form error message and required asterisk.
+  - Chat sender names, reply and pinned titles, links, mentions, typing and status text.
+
+  **What you'll see.** Coloured text is one step darker in light mode and one step lighter in dark mode. Icons, SVG strokes, spinners and text on solid fills keep their colours.
+
+  **If your own markup uses `text-primary` for readable text**, switch it to `text-primary-text`. `text-primary` stays the fill colour, meant for fills, borders and icons.
+
+  **Placeholders** now use `foreground-muted`, the secondary-text colour: 5.52:1 light and 4.85:1 dark, where `default-400` measured 2.31–3.58:1. This covers the base-layer `::placeholder` rule (every native input), KunSelect's and KunDatePicker's empty trigger, KunChatComposer and KunCommandPalette. A placeholder is often the only label a field has, such as "全部平台" in a filter. Disabled text, outside-month days and icons keep their lighter steps: WCAG exempts disabled controls, and the others are not text.
+
+  Measured on the docs site in Chromium: 227 text elements in each mode across the button, chip, tab, link, select, input, info, dropdown, chat bubble, date picker and textarea pages all clear 4.5:1. The lowest are a warning chip (4.77:1 light, 4.87:1 dark) and the dark placeholder (4.85:1).
+
+## 2.55.0
+
+### Minor Changes
+
+- 0bac099: New `KunSplitPane`: two panes with a divider you can drag or move with the keyboard. It suits a list beside a detail view, or a main area with an auxiliary column. KunChatLayout now switches between one and two panes by its own width, and its list pane can be made draggable.
+
+  **KunSplitPane** puts its panes in the `#start` and `#end` slots.
+
+  - **Width.** `v-model:size` is the primary pane's width in px (default 360). It is a prop the server knows, so the server-rendered HTML already has the layout and the divider's `aria-valuenow`/`min`/`max`.
+  - **Persisting the width.** `v-model:size` updates on every pointer move. Save from `resize-end`, which fires once per drag or key press, for example to a cookie your server reads back into `size`.
+  - **Limits and snapping.** `min-size` and `max-size` default to 240 and 480. `snap-points` (e.g. `[360, 412]`) pull the divider in once it comes within `snap-threshold` px (default 8), and any width in between stays reachable. A keyboard step that ends within the threshold snaps too, but a snap never cancels or reverses a step, so a small `step` cannot get stuck on a snap point.
+  - **Which pane is sized.** `primary="end"` gives the width to the right pane, for an auxiliary column.
+  - **Keyboard** (WAI-ARIA window splitter pattern):
+    - ← and → move the divider by `step` (default 10px); Shift moves five steps.
+    - Home and End jump to the minimum and maximum.
+  - **The divider** is a 1px line. Its grab area is 9px wide with a mouse and 21px on a touch screen, and it sits above the panes' content. A drag follows the pointer that started it; a second finger or the mouse cannot take it over. While you drag, the page keeps a col-resize cursor, no text gets selected, and the panes ignore the pointer, so an iframe can't swallow the drag.
+  - **Narrow layouts.** Below `stack-below` (`md` = 48rem by default, `lg` = 64rem, or `false`), it shows one pane at a time, chosen by `show-pane`. This is a container query on the component's own width, not a media query on the window: a split nested beside a side rail or inside another pane stacks based on the room it actually has.
+  - **Flutter port.** The snapping rule is a pure `resolveKunSplitSize` in `@kungal/ui-core`, with tests.
+
+  **KunChatLayout** now shows two panes once the layout itself is 48rem (768px) wide, rather than once the window is.
+
+  - **Why:** a chat beside an app's side rail used to switch to two panes in a 768px window that left it 679px, and the conversation was squeezed to 327px.
+  - **What might change for you:** pages that give the chat less than 48rem (for example, a window of about 768–800px minus page padding) now show one pane.
+  - **KunChatHeader's `back="mobile"`** follows the KunChatLayout around it. Outside a KunChatLayout it still uses the window's `md` width.
+  - **New props:** `resizable`, `v-model:sidebar-size` (px), `sidebar-min-size` and `sidebar-max-size` make the list draggable through KunSplitPane. The `sidebar-resize-end` event is the one to persist from. Without `resizable`, `sidebar-width` works as before.
+
 ## 2.54.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -54,32 +54,35 @@ var TABLE = {
     danger: "border border-transparent bg-danger text-danger-foreground",
     info: "border border-transparent bg-info text-info-foreground"
   },
+  // `{c}-text`, not the fill: a fill used as text measured 1.75–4.42:1 on the
+  // light page. The generator holds `{c}-text` at 4.5:1 on the page, on cards
+  // and on the hue's 20% tint, so the hover fill and a flat chip stay readable.
   bordered: {
     default: "border border-default bg-transparent",
-    primary: "border border-primary bg-transparent text-primary",
-    secondary: "border border-secondary bg-transparent text-secondary",
-    success: "border border-success bg-transparent text-success",
-    warning: "border border-warning bg-transparent text-warning",
-    danger: "border border-danger bg-transparent text-danger",
-    info: "border border-info bg-transparent text-info"
+    primary: "border border-primary bg-transparent text-primary-text",
+    secondary: "border border-secondary bg-transparent text-secondary-text",
+    success: "border border-success bg-transparent text-success-text",
+    warning: "border border-warning bg-transparent text-warning-text",
+    danger: "border border-danger bg-transparent text-danger-text",
+    info: "border border-info bg-transparent text-info-text"
   },
   light: {
     default: "border border-transparent bg-transparent hover:bg-default/20",
-    primary: "border border-transparent bg-transparent text-primary hover:bg-primary/20",
-    secondary: "border border-transparent bg-transparent text-secondary hover:bg-secondary/20",
-    success: "border border-transparent bg-transparent text-success hover:bg-success/20",
-    warning: "border border-transparent bg-transparent text-warning hover:bg-warning/20",
-    danger: "border border-transparent bg-transparent text-danger hover:bg-danger/20",
-    info: "border border-transparent bg-transparent text-info hover:bg-info/20"
+    primary: "border border-transparent bg-transparent text-primary-text hover:bg-primary/20",
+    secondary: "border border-transparent bg-transparent text-secondary-text hover:bg-secondary/20",
+    success: "border border-transparent bg-transparent text-success-text hover:bg-success/20",
+    warning: "border border-transparent bg-transparent text-warning-text hover:bg-warning/20",
+    danger: "border border-transparent bg-transparent text-danger-text hover:bg-danger/20",
+    info: "border border-transparent bg-transparent text-info-text hover:bg-info/20"
   },
   flat: {
-    default: "border border-transparent bg-default/20 text-default-700",
-    primary: "border border-transparent bg-primary/20 text-primary-600",
-    secondary: "border border-transparent bg-secondary/20 text-secondary-600",
-    success: "border border-transparent bg-success/20 text-success-700 dark:text-success",
-    warning: "border border-transparent bg-warning/20 text-warning-700 dark:text-warning",
-    danger: "border border-transparent bg-danger/20 text-danger-600 dark:text-danger-500",
-    info: "border border-transparent bg-info/20 text-info-700 dark:text-info-500"
+    default: "border border-transparent bg-default/20 text-default-text",
+    primary: "border border-transparent bg-primary/20 text-primary-text",
+    secondary: "border border-transparent bg-secondary/20 text-secondary-text",
+    success: "border border-transparent bg-success/20 text-success-text",
+    warning: "border border-transparent bg-warning/20 text-warning-text",
+    danger: "border border-transparent bg-danger/20 text-danger-text",
+    info: "border border-transparent bg-info/20 text-info-text"
   },
   // Same fill logic as `solid` (see note above) plus a COLORED glow. The glow
   // needs both a size (`shadow-lg` — the geometry) AND a tint (`shadow-{color}/40`
@@ -135,12 +138,12 @@ var kunSolidClasses = {
 };
 var kunTextClasses = {
   default: "text-foreground",
-  primary: "text-primary",
-  secondary: "text-secondary",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger",
-  info: "text-info"
+  primary: "text-primary-text",
+  secondary: "text-secondary-text",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  danger: "text-danger-text",
+  info: "text-info-text"
 };
 var kunBorderClasses = {
   default: "border-default",
@@ -541,6 +544,9 @@ var zh_CN_default = {
       clear: "清除",
       removeOption: "移除 {label}"
     },
+    splitPane: {
+      handle: "调整分栏宽度"
+    },
     spoiler: {
       copyCode: "复制代码",
       reveal: "剧透内容,点击或按回车显示"
@@ -684,6 +690,25 @@ var normalizeKunMenuSeparators = (entries) => {
   return out;
 };
 
+// src/splitPane.ts
+var resolveKunSplitSize = (raw, { min, max, snapPoints = [], snapThreshold = 8, from }) => {
+  const lo = Math.min(min, max);
+  const hi = Math.max(min, max);
+  const clamped = Math.min(Math.max(raw, lo), hi);
+  let best = clamped;
+  let bestDistance = Infinity;
+  for (const point of snapPoints) {
+    if (point < lo || point > hi) continue;
+    const distance = Math.abs(point - clamped);
+    if (distance <= snapThreshold && distance < bestDistance) {
+      best = point;
+      bestDistance = distance;
+    }
+  }
+  if (from !== void 0 && Math.sign(best - from) !== Math.sign(clamped - from)) best = clamped;
+  return Math.round(best);
+};
+
 // src/random.ts
 var randomNum = (lowerValue, upperValue) => Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
 
@@ -1749,6 +1774,7 @@ exports.randomNum = randomNum;
 exports.registerKunIcon = registerKunIcon;
 exports.registerKunIcons = registerKunIcons;
 exports.resolveKunShortcut = resolveKunShortcut;
+exports.resolveKunSplitSize = resolveKunSplitSize;
 exports.resolveRounded = resolveRounded;
 exports.sliceKunChatEntities = sliceKunChatEntities;
 exports.speakKunShortcut = speakKunShortcut;