@endfield-ui/react 1.0.0 → 1.0.1

package/dist/index.js

@@ -1487,7 +1487,7 @@ function DashIndicator({ count, index, className, ...props }) {
 		role: "img",
 		"aria-label": `第 ${current + 1} 项，共 ${total} 项`,
 		...props,
-		className: cn("inline-flex items-center gap-1", className),
+		className: cn("inline-flex max-w-full min-w-0 items-center gap-1", className),
 		children: Array.from({ length: total }, (_, position) => /* @__PURE__ */ jsx("span", {
 			"data-current": position === current ? "" : void 0,
 			className: cn("h-0.5 transition-[width,background-color] duration-(--duration-base) ease-standard", position === current ? "w-8 bg-accent-ink forced-colors:bg-[Highlight]" : "w-4 bg-line-strong forced-colors:bg-[CanvasText]")
@@ -1644,7 +1644,7 @@ function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = fa
 				"aria-hidden": "true",
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-tech text-xs text-ink-secondary tabular-nums",
+					className: "shrink-0 font-tech text-xs whitespace-nowrap text-ink-secondary tabular-nums",
 					children: `${index + 1} / ${count}`
 				}), indicator && /* @__PURE__ */ jsx(DashIndicator, {
 					count,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "终末地风格的 React 基础控件库（非官方）",
   "keywords": [
     "react",

package/src/components/README.md

@@ -138,7 +138,7 @@ components/
 - 每个交互组件都要有 `:focus-visible` 样式，用 [`focusRing`](../lib/focus-ring.ts)；会被滚动容器裁切的地方用 `focusRingInset`；外框自己不能聚焦、里面的控件能（输入框）时用 `focusRingWithin`。焦点环不能被 `clip-path` 裁掉（做法见 [切角与斜楔](../../../../docs/design/elements/corner-and-wedge.md)）。
 - 悬停用 Tailwind 的 `hover:`，它只在有指针的设备上生效。
 - 组件内部的响应式看**自身宽度**，用容器查询（`@container` + `@md:` 这类变体），不用视口断点（`md:`）：组件不知道自己会被放进多窄的栏里。视口断点只留给"必须和页面布局同步切换"的地方，目前只有 `SectionTitle` 的 `side` 形态。
-- 会出现英文长单词的大号文字加 `wrap-anywhere` 兜底，并确保它所在的弹性子项能收缩（`min-w-0` 或 `max-w-full`）。有意不换行的控件（按钮、标签、页签）除外。
+- 会出现英文长单词的大号文字加 `wrap-anywhere` 兜底，并确保它所在的弹性子项能收缩（`min-w-0` 或 `max-w-full`）。有意不换行的控件（按钮、标签、页签）除外。中间带空格的短读数（轮播的 `1 / 5`）不折行也不收缩（`shrink-0 whitespace-nowrap`）：同一行里让别的东西去收，不然它被挤成一竖条。
 - 装饰元素（竖条、箭头、分隔线）加 `aria-hidden`。
 - 动效遵守 `prefers-reduced-motion`：降级后内容必须停在终态。循环动画停下来的样子不能被看成一个具体的值：不确定进度的色块停在正中，进度环换成一圈虚线。
 - 用 `group` / `peer` 时给 `group` 起名字（`group/card` + `group-hover/card:`）：不起名的 `group-hover:` 会被外层任何一个 `group` 的悬停带着走，控件一旦被放进别的可悬停容器就会出错。

package/src/components/carousel/Carousel.tsx

@@ -186,7 +186,8 @@ export function Carousel({
       <div className="flex flex-col gap-1">
         {/* 看得见的计数和短横只给眼睛：同样的话下面的说明区会播报 */}
         <div aria-hidden="true" className="flex items-center gap-3">
-          <span className="font-tech text-xs text-ink-secondary tabular-nums">
+          {/* 这一行放不下时让短横去收窄：计数中间有空格，被挤了会折成一竖条 */}
+          <span className="shrink-0 font-tech text-xs whitespace-nowrap text-ink-secondary tabular-nums">
             {`${index + 1} / ${count}`}
           </span>
           {indicator && <DashIndicator count={count} index={index} />}

package/src/components/dash-indicator/DashIndicator.tsx

@@ -26,7 +26,11 @@ export function DashIndicator({
       role="img"
       aria-label={`第 ${current + 1} 项，共 ${total} 项`}
       {...props}
-      className={cn("inline-flex items-center gap-1", className)}
+      className={cn(
+        // 放不下时各根等比收窄，不顶出容器：短横本来就能收，卡住的是这一层自己的最小宽度
+        "inline-flex max-w-full min-w-0 items-center gap-1",
+        className,
+      )}
     >
       {Array.from({ length: total }, (_, position) => (
         <span