@hjmds/design-contracts 1.1.0 → 1.2.0

package/dist/asset.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 아이콘·이미지·Lottie·비디오를 **같은 액자**에 넣는 자리.
+ *
+ * Icon·Image·Avatar가 이미 있는데 왜 또 두는가: 세 컴포넌트는 각자 다른 모양 규칙을 갖고
+ * 있고(아이콘은 정사각, Avatar는 원, Image는 비율), 화면에서 이들이 **같은 줄에 섞여**
+ * 나올 때 크기와 모서리가 어긋난다. Diairy의 `LottieArt`·`AnimalArt`가 그 어긋남을
+ * 제품 안에서 다시 맞추고 있었다. Asset은 그 액자 규칙만 갖고, **무엇을 그릴지는 슬롯으로
+ * 받는다** — Lottie와 비디오 재생기를 이 패키지가 의존하지 않기 위해서다.
+ *
+ * 그래서 이 계약에 재생 상태(play/pause/seek)가 없다. 재생기는 제품 것이고, 여기서
+ * 정하는 것은 액자·크기·겹침·보조 표식뿐이다.
+ */
+export type AssetMediaKind = "icon" | "image" | "lottie" | "video";
+export type AssetShape = "square" | "rounded" | "circle";
+export type AssetSize = "small" | "medium" | "large" | "xlarge";
+export type AssetDescriptor = Readonly<{
+    kind: AssetMediaKind;
+    size?: AssetSize;
+    shape?: AssetShape;
+    /**
+     * 장식이면 `true`. 장식이 아닌데 이름이 없으면 거절한다 — 움직이는 그림일수록
+     * "무엇을 뜻하는지"가 화면에 없으면 보조기기에서 사라진다.
+     */
+    decorative?: boolean;
+    accessibilityLabel?: string;
+}>;
+export declare function validateAssetDescriptor(descriptor: AssetDescriptor): void;
+/**
+ * 움직이는 자산은 `reducedMotion`에서 **첫 프레임(또는 포스터)로 정지**한다. 숨기지
+ * 않는 이유: 그 자리에 그림이 있다는 사실 자체가 화면의 뜻인 경우가 많다(에어리의 동물).
+ * 정지 화면을 제품이 주지 못하면 재생을 멈추기만 한다.
+ */
+export declare function shouldAnimateAsset(kind: AssetMediaKind, reducedMotion: boolean): boolean;
+export declare const assetRecipe: {
+    readonly slots: readonly ["root", "frame", "media", "accessory", "group"];
+    readonly kinds: readonly ["icon", "image", "lottie", "video"];
+    readonly defaults: {
+        readonly size: "medium";
+        readonly shape: "rounded";
+    };
+    readonly sizes: {
+        readonly small: 32;
+        readonly medium: 48;
+        readonly large: 72;
+        readonly xlarge: 120;
+    };
+    readonly shapes: {
+        readonly square: 0;
+        readonly rounded: 12;
+        readonly circle: 999;
+    };
+    readonly background: Readonly<{
+        source: "theme";
+        key: "surfaceAlt";
+        alpha?: number;
+    }>;
+    readonly border: Readonly<{
+        source: "theme";
+        key: "border";
+        alpha?: number;
+    }>;
+    /** 묶음으로 겹칠 때의 비율. Avatar와 같은 값을 쓴다 — 한 줄에 섞여 나오기 때문이다. */
+    readonly overlapRatio: 0.3;
+    /** 보조 표식(재생 아이콘·상태 점)은 액자 **바깥 모서리**에 붙어 매체를 가리지 않는다. */
+    readonly accessory: {
+        readonly offset: 4;
+        readonly gap: 4;
+    };
+};
+export declare const assetBehavior: {
+    /** 상태가 없다 — 액자는 값을 갖지 않고 슬롯만 받는다. */
+    readonly controlled: readonly [];
+    readonly inputs: readonly ["kind", "size", "shape", "decorative", "accessibilityLabel"];
+    readonly configuration: {
+        readonly kind: readonly ["icon", "image", "lottie", "video"];
+        readonly shape: readonly ["square", "rounded", "circle"];
+        readonly size: readonly ["small", "medium", "large", "xlarge"];
+    };
+    readonly stateAxes: {
+        readonly availability: readonly ["enabled"];
+    };
+    readonly web: {
+        readonly roles: readonly ["img", "presentation"];
+        readonly keyboard: readonly [];
+        readonly focus: "none";
+    };
+    readonly native: {
+        readonly roles: readonly ["image"];
+        readonly states: readonly [];
+        readonly actions: readonly [];
+    };
+    readonly scenarios: readonly ["one-frame-rule-covers-icon-image-lottie-and-video-so-a-mixed-row-lines-up", "the-package-never-depends-on-a-player-the-media-arrives-as-a-slot", "a-meaningful-asset-without-a-name-is-rejected-instead-of-silently-decorative", "reduced-motion-freezes-the-frame-rather-than-removing-the-asset", "an-accessory-sits-on-the-frames-outer-corner-and-never-covers-the-media"];
+};
+//# sourceMappingURL=asset.d.ts.map

package/dist/asset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.d.ts","sourceRoot":"","sources":["../src/asset.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AAEH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,eAAe,GAAG,IAAI,CAazE;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,GAAG,OAAO,CAExF;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUtB,0DAA0D;;IAE1D,yDAAyD;;;;;CAEjD,CAAC;AAEX,eAAO,MAAM,aAAa;IACxB,qCAAqC;;;;;;;;;;;;;;;;;;;;;;CAkBF,CAAC"}

package/dist/asset.js

@@ -0,0 +1,60 @@
+import { radius, spacing } from "./foundations.js";
+import { semanticColors } from "./semantic-colors.js";
+export function validateAssetDescriptor(descriptor) {
+    if (!assetRecipe.kinds.includes(descriptor.kind)) {
+        throw new TypeError(`Unsupported Asset kind: ${String(descriptor.kind)}`);
+    }
+    const decorative = descriptor.decorative ?? false;
+    const label = descriptor.accessibilityLabel?.trim() ?? "";
+    if (!decorative && label.length === 0) {
+        throw new TypeError("A meaningful Asset must provide accessibilityLabel");
+    }
+    if (decorative && label.length > 0) {
+        // 둘 다 주면 어느 쪽이 참인지 화면이 모른다. 조용히 무시하면 이름을 지운 줄 모른다.
+        throw new TypeError("A decorative Asset must not provide accessibilityLabel");
+    }
+}
+/**
+ * 움직이는 자산은 `reducedMotion`에서 **첫 프레임(또는 포스터)로 정지**한다. 숨기지
+ * 않는 이유: 그 자리에 그림이 있다는 사실 자체가 화면의 뜻인 경우가 많다(에어리의 동물).
+ * 정지 화면을 제품이 주지 못하면 재생을 멈추기만 한다.
+ */
+export function shouldAnimateAsset(kind, reducedMotion) {
+    return (kind === "lottie" || kind === "video") && !reducedMotion;
+}
+export const assetRecipe = {
+    slots: ["root", "frame", "media", "accessory", "group"],
+    kinds: ["icon", "image", "lottie", "video"],
+    defaults: { size: "medium", shape: "rounded" },
+    sizes: { small: 32, medium: 48, large: 72, xlarge: 120 },
+    // 정사각은 모서리 0이다 — radius 토큰에 0이 없는 이유는 "모서리 없음"이 토큰이 아니라
+    // 값의 부재이기 때문이다.
+    shapes: { square: 0, rounded: radius.md, circle: radius.full },
+    background: semanticColors.surface.sunken,
+    border: semanticColors.border.default,
+    /** 묶음으로 겹칠 때의 비율. Avatar와 같은 값을 쓴다 — 한 줄에 섞여 나오기 때문이다. */
+    overlapRatio: 0.3,
+    /** 보조 표식(재생 아이콘·상태 점)은 액자 **바깥 모서리**에 붙어 매체를 가리지 않는다. */
+    accessory: { offset: spacing.xxs, gap: spacing.xxs },
+};
+export const assetBehavior = {
+    /** 상태가 없다 — 액자는 값을 갖지 않고 슬롯만 받는다. */
+    controlled: [],
+    inputs: ["kind", "size", "shape", "decorative", "accessibilityLabel"],
+    configuration: {
+        kind: ["icon", "image", "lottie", "video"],
+        shape: ["square", "rounded", "circle"],
+        size: ["small", "medium", "large", "xlarge"],
+    },
+    stateAxes: { availability: ["enabled"] },
+    web: { roles: ["img", "presentation"], keyboard: [], focus: "none" },
+    native: { roles: ["image"], states: [], actions: [] },
+    scenarios: [
+        "one-frame-rule-covers-icon-image-lottie-and-video-so-a-mixed-row-lines-up",
+        "the-package-never-depends-on-a-player-the-media-arrives-as-a-slot",
+        "a-meaningful-asset-without-a-name-is-rejected-instead-of-silently-decorative",
+        "reduced-motion-freezes-the-frame-rather-than-removing-the-asset",
+        "an-accessory-sits-on-the-frames-outer-corner-and-never-covers-the-media",
+    ],
+};
+//# sourceMappingURL=asset.js.map

package/dist/asset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.js","sourceRoot":"","sources":["../src/asset.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BehaviorContract } from \"./behaviors.js\";\nimport { radius, spacing } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\n/**\n * 아이콘·이미지·Lottie·비디오를 **같은 액자**에 넣는 자리.\n *\n * Icon·Image·Avatar가 이미 있는데 왜 또 두는가: 세 컴포넌트는 각자 다른 모양 규칙을 갖고\n * 있고(아이콘은 정사각, Avatar는 원, Image는 비율), 화면에서 이들이 **같은 줄에 섞여**\n * 나올 때 크기와 모서리가 어긋난다. Diairy의 `LottieArt`·`AnimalArt`가 그 어긋남을\n * 제품 안에서 다시 맞추고 있었다. Asset은 그 액자 규칙만 갖고, **무엇을 그릴지는 슬롯으로\n * 받는다** — Lottie와 비디오 재생기를 이 패키지가 의존하지 않기 위해서다.\n *\n * 그래서 이 계약에 재생 상태(play/pause/seek)가 없다. 재생기는 제품 것이고, 여기서\n * 정하는 것은 액자·크기·겹침·보조 표식뿐이다.\n */\nexport type AssetMediaKind = \"icon\" | \"image\" | \"lottie\" | \"video\";\nexport type AssetShape = \"square\" | \"rounded\" | \"circle\";\nexport type AssetSize = \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\nexport type AssetDescriptor = Readonly<{\n  kind: AssetMediaKind;\n  size?: AssetSize;\n  shape?: AssetShape;\n  /**\n   * 장식이면 `true`. 장식이 아닌데 이름이 없으면 거절한다 — 움직이는 그림일수록\n   * \"무엇을 뜻하는지\"가 화면에 없으면 보조기기에서 사라진다.\n   */\n  decorative?: boolean;\n  accessibilityLabel?: string;\n}>;\n\nexport function validateAssetDescriptor(descriptor: AssetDescriptor): void {\n  if (!assetRecipe.kinds.includes(descriptor.kind)) {\n    throw new TypeError(`Unsupported Asset kind: ${String(descriptor.kind)}`);\n  }\n  const decorative = descriptor.decorative ?? false;\n  const label = descriptor.accessibilityLabel?.trim() ?? \"\";\n  if (!decorative && label.length === 0) {\n    throw new TypeError(\"A meaningful Asset must provide accessibilityLabel\");\n  }\n  if (decorative && label.length > 0) {\n    // 둘 다 주면 어느 쪽이 참인지 화면이 모른다. 조용히 무시하면 이름을 지운 줄 모른다.\n    throw new TypeError(\"A decorative Asset must not provide accessibilityLabel\");\n  }\n}\n\n/**\n * 움직이는 자산은 `reducedMotion`에서 **첫 프레임(또는 포스터)로 정지**한다. 숨기지\n * 않는 이유: 그 자리에 그림이 있다는 사실 자체가 화면의 뜻인 경우가 많다(에어리의 동물).\n * 정지 화면을 제품이 주지 못하면 재생을 멈추기만 한다.\n */\nexport function shouldAnimateAsset(kind: AssetMediaKind, reducedMotion: boolean): boolean {\n  return (kind === \"lottie\" || kind === \"video\") && !reducedMotion;\n}\n\nexport const assetRecipe = {\n  slots: [\"root\", \"frame\", \"media\", \"accessory\", \"group\"] as const,\n  kinds: [\"icon\", \"image\", \"lottie\", \"video\"] as const,\n  defaults: { size: \"medium\", shape: \"rounded\" },\n  sizes: { small: 32, medium: 48, large: 72, xlarge: 120 },\n  // 정사각은 모서리 0이다 — radius 토큰에 0이 없는 이유는 \"모서리 없음\"이 토큰이 아니라\n  // 값의 부재이기 때문이다.\n  shapes: { square: 0, rounded: radius.md, circle: radius.full },\n  background: semanticColors.surface.sunken,\n  border: semanticColors.border.default,\n  /** 묶음으로 겹칠 때의 비율. Avatar와 같은 값을 쓴다 — 한 줄에 섞여 나오기 때문이다. */\n  overlapRatio: 0.3,\n  /** 보조 표식(재생 아이콘·상태 점)은 액자 **바깥 모서리**에 붙어 매체를 가리지 않는다. */\n  accessory: { offset: spacing.xxs, gap: spacing.xxs },\n} as const;\n\nexport const assetBehavior = {\n  /** 상태가 없다 — 액자는 값을 갖지 않고 슬롯만 받는다. */\n  controlled: [],\n  inputs: [\"kind\", \"size\", \"shape\", \"decorative\", \"accessibilityLabel\"],\n  configuration: {\n    kind: [\"icon\", \"image\", \"lottie\", \"video\"],\n    shape: [\"square\", \"rounded\", \"circle\"],\n    size: [\"small\", \"medium\", \"large\", \"xlarge\"],\n  },\n  stateAxes: { availability: [\"enabled\"] },\n  web: { roles: [\"img\", \"presentation\"], keyboard: [], focus: \"none\" },\n  native: { roles: [\"image\"], states: [], actions: [] },\n  scenarios: [\n    \"one-frame-rule-covers-icon-image-lottie-and-video-so-a-mixed-row-lines-up\",\n    \"the-package-never-depends-on-a-player-the-media-arrives-as-a-slot\",\n    \"a-meaningful-asset-without-a-name-is-rejected-instead-of-silently-decorative\",\n    \"reduced-motion-freezes-the-frame-rather-than-removing-the-asset\",\n    \"an-accessory-sits-on-the-frames-outer-corner-and-never-covers-the-media\",\n  ],\n} as const satisfies BehaviorContract;\n"]}

package/dist/base-recipes.d.ts

@@ -98,7 +98,26 @@ export declare const buttonRecipe: {
         readonly disabled: 0.5;
         readonly pressed: 0.86;
     };
+    /**
+     * 긴 라벨의 처리 규칙. 지금까지 이 판단이 없어서 Web은 무한히 줄바꿈하고 RN은 한 줄로
+     * 잘렸다 — 같은 번역문이 두 표면에서 다르게 보였다.
+     *
+     * 자르지 않고 **두 줄까지 접는다**. 잘린 행동 라벨("삭제하..."))은 무엇을 하는 버튼인지
+     * 잃는다. 대신 무제한 줄바꿈도 막는다 — 하단 CTA 행처럼 버튼이 남의 레이아웃을 밀어내는
+     * 자리가 있고, 두 줄을 넘는 라벨은 레이아웃이 아니라 카피의 문제다.
+     *
+     * 큰 글자 설정에서는 상한을 **푼다**. 사용자가 키운 글자에서 두 줄로 자르면 내용이
+     * 사라지고, 그건 WCAG 1.4.4를 어긴다. 제품 카피가 아니라 사용자 설정이 원인이기 때문에
+     * 같은 규칙을 적용할 수 없다.
+     */
+    readonly label: {
+        readonly overflow: "wrap";
+        readonly maxLines: 2;
+        readonly liftCapOnLargeText: true;
+    };
 };
+/** Resolves the label's line cap for one resolved environment. `null` means uncapped. */
+export declare function resolveButtonLabelLines(largeText: boolean): number | null;
 export declare const surfaceRecipe: {
     readonly default: {
         readonly background: "surface";

package/dist/base-recipes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-recipes.d.ts","sourceRoot":"","sources":["../src/base-recipes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAc,MAAM,EAAE,OAAO,EAAc,MAAM,kBAAkB,CAAC;AAGpF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/E,uEAAuE;AACvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAC7C;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC,YAAY,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,4EAA4E;AAC5E,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcvB;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DJ,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEF,6CAA6C;AAC7C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BtB;;;;OAIG;uCAC+B,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAqDhD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;CAU3B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;CAM3B,CAAC"}
+{"version":3,"file":"base-recipes.d.ts","sourceRoot":"","sources":["../src/base-recipes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAc,MAAM,EAAE,OAAO,EAAc,MAAM,kBAAkB,CAAC;AAGpF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/E,uEAAuE;AACvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAC7C;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC,YAAY,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,4EAA4E;AAC5E,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcvB;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2BH;;;;;;;;;;;OAWG;;;;;;CAmCJ,CAAC;AAEF,yFAAyF;AACzF,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAEzE;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEF,6CAA6C;AAC7C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BtB;;;;OAIG;uCAC+B,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAqDhD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;CAU3B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;CAM3B,CAAC"}

package/dist/base-recipes.js

@@ -45,7 +45,24 @@ export const buttonRecipe = {
     shapes: { rounded: "md", pill: "full" },
     aligns: { center: "center", leading: "flex-start" },
     opacity: { disabled: 0.5, pressed: 0.86 },
+    /**
+     * 긴 라벨의 처리 규칙. 지금까지 이 판단이 없어서 Web은 무한히 줄바꿈하고 RN은 한 줄로
+     * 잘렸다 — 같은 번역문이 두 표면에서 다르게 보였다.
+     *
+     * 자르지 않고 **두 줄까지 접는다**. 잘린 행동 라벨("삭제하..."))은 무엇을 하는 버튼인지
+     * 잃는다. 대신 무제한 줄바꿈도 막는다 — 하단 CTA 행처럼 버튼이 남의 레이아웃을 밀어내는
+     * 자리가 있고, 두 줄을 넘는 라벨은 레이아웃이 아니라 카피의 문제다.
+     *
+     * 큰 글자 설정에서는 상한을 **푼다**. 사용자가 키운 글자에서 두 줄로 자르면 내용이
+     * 사라지고, 그건 WCAG 1.4.4를 어긴다. 제품 카피가 아니라 사용자 설정이 원인이기 때문에
+     * 같은 규칙을 적용할 수 없다.
+     */
+    label: { overflow: "wrap", maxLines: 2, liftCapOnLargeText: true },
 };
+/** Resolves the label's line cap for one resolved environment. `null` means uncapped. */
+export function resolveButtonLabelLines(largeText) {
+    return largeText && buttonRecipe.label.liftCapOnLargeText ? null : buttonRecipe.label.maxLines;
+}
 export const surfaceRecipe = {
     default: {
         background: "surface",

package/dist/base-recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-recipes.js","sourceRoot":"","sources":["../src/base-recipes.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ThemeColors } from \"./colors.js\";\nimport { control, fontWeight, radius, spacing, typography } from \"./foundations.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\n\nexport type ButtonTone = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"link\";\n/** Corner geometry of the control frame. Mirrors `IconButtonShape`. */\nexport type ButtonShape = \"rounded\" | \"pill\";\n/**\n * Where the label sits inside the frame. `center` is the action default;\n * `leading` is for a full-width row action whose label reads as list copy.\n */\nexport type ButtonAlign = \"center\" | \"leading\";\nexport type ButtonSize = keyof typeof control.buttonHeight;\nexport type SurfaceTone = \"default\" | \"raised\" | \"accent\" | \"sunken\" | \"subtle\";\nexport type SurfacePadding = \"none\" | keyof typeof spacing;\nexport type SurfaceRadius = keyof typeof radius;\nexport type FieldVariant = \"surface\" | \"inset\";\nexport type FieldShape = \"medium\" | \"large\" | \"full\";\n\n/** Small renderer entry point for the three foundational visual recipes. */\nexport const buttonRecipe = {\n  slots: [\"root\", \"leading\", \"label\", \"trailing\", \"spinner\"] as const,\n  defaults: { tone: \"primary\", size: \"medium\", shape: \"rounded\", align: \"center\" } as const,\n  tones: {\n    primary: { background: \"primary\", content: \"onPrimary\", border: null, paddingHorizontal: null },\n    // The outline is a border role, not a text color. Drawing it in `textSub`\n    // made a resting control read heavier than the selected one beside it.\n    secondary: { background: \"surfaceAlt\", content: \"text\", border: \"borderControl\", paddingHorizontal: null },\n    ghost: { background: null, content: \"textMuted\", border: null, paddingHorizontal: null },\n    danger: { background: \"dangerFill\", content: \"onDanger\", border: null, paddingHorizontal: null },\n    // A link-tone control is inline copy, so the size axis' horizontal padding\n    // would push it out of alignment with the text around it.\n    link: { background: null, content: \"contentBrand\", border: null, paddingHorizontal: 0 },\n  },\n  /**\n   * Visual treatment for a control that is also a toggle. `accessibilityState`\n   * / `aria-pressed` already expressed the state; without a paired visual every\n   * consumer painted the selected background in product styles.\n   */\n  states: {\n    selected: { background: \"surfaceAccent\", content: \"contentBrand\", border: \"contentBrand\" },\n  },\n  sizes: {\n    small: {\n      height: control.buttonHeight.small,\n      hitSlop: control.buttonHitSlop.small,\n      paddingHorizontal: spacing.sm,\n      textVariant: \"label\",\n    },\n    medium: {\n      height: control.buttonHeight.medium,\n      hitSlop: control.buttonHitSlop.medium,\n      paddingHorizontal: spacing.md,\n      textVariant: \"body\",\n    },\n    large: {\n      height: control.buttonHeight.large,\n      hitSlop: control.buttonHitSlop.large,\n      paddingHorizontal: spacing.lg,\n      textVariant: \"bodyLarge\",\n    },\n  },\n  shapes: { rounded: \"md\", pill: \"full\" },\n  aligns: { center: \"center\", leading: \"flex-start\" },\n  opacity: { disabled: 0.5, pressed: 0.86 },\n} as const satisfies {\n  slots: readonly string[];\n  defaults: { tone: ButtonTone; size: ButtonSize; shape: ButtonShape; align: ButtonAlign };\n  tones: Record<\n    ButtonTone,\n    {\n      background: keyof ThemeColors | null;\n      content: keyof ThemeColors;\n      border: keyof ThemeColors | null;\n      /** `null` keeps the size axis' padding. */\n      paddingHorizontal: number | null;\n    }\n  >;\n  states: {\n    selected: {\n      background: keyof ThemeColors;\n      content: keyof ThemeColors;\n      border: keyof ThemeColors;\n    };\n  };\n  sizes: Record<\n    ButtonSize,\n    {\n      height: number;\n      hitSlop: number;\n      paddingHorizontal: number;\n      textVariant: TextVariant;\n    }\n  >;\n  shapes: Record<ButtonShape, keyof typeof radius>;\n  aligns: Record<ButtonAlign, \"center\" | \"flex-start\">;\n  opacity: { disabled: number; pressed: number };\n};\n\nexport const surfaceRecipe = {\n  default: {\n    background: \"surface\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  raised: {\n    background: \"bg\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: true,\n    borderAlways: false,\n    // An elevated surface must not clip: `overflow: hidden` cuts off its own\n    // shadow. Every other tone clips so a child image cannot spill past the\n    // rounded corner, which consumers were fixing in product styles.\n    clipsContent: false,\n  },\n  // `semanticColors.surface.sunken` already named this role; without a paired\n  // tone a consumer had to paint `surfaceAlt` in its own product styles.\n  sunken: {\n    background: \"surfaceAlt\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  accent: {\n    background: \"surfaceAccent\",\n    border: \"primary\",\n    borderAlpha: 0.3,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  subtle: {\n    background: \"bg\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: true,\n    clipsContent: true,\n  },\n} as const satisfies Record<\n  SurfaceTone,\n  {\n    background: keyof ThemeColors;\n    border: keyof ThemeColors;\n    borderAlpha: number;\n    elevated: boolean;\n    clipsContent: boolean;\n    borderAlways: boolean;\n  }\n>;\n\n/** Text placement inside a field control. */\nexport type FieldAlign = \"start\" | \"center\";\n\nexport const fieldRecipe = {\n  slots: [\n    \"root\",\n    \"label\",\n    \"control\",\n    \"leading\",\n    \"input\",\n    \"trailing\",\n    \"hint\",\n    \"error\",\n  ] as const,\n  defaults: { variant: \"surface\", shape: \"medium\", align: \"start\" } as const,\n  variants: {\n    surface: { background: \"surface\" },\n    inset: { background: \"bg\" },\n  },\n  shapes: {\n    medium: \"md\",\n    large: \"lg\",\n    full: \"full\",\n  },\n  states: {\n    idle: { border: \"textMuted\" },\n    focused: { border: \"contentBrand\" },\n    invalid: { border: \"danger\" },\n  },\n  minHeight: control.minTouchTarget,\n  multilineMinHeight: 80,\n  /**\n   * Upper bound for a growing multiline field, expressed in visible lines. A\n   * consumer otherwise reaches for `inputStyle={{ maxHeight }}`, which moves a\n   * recipe-owned dimension into product code. `null` keeps unbounded growth.\n   */\n  multilineMaxVisibleLines: null as number | null,\n  borderWidth: 1,\n  focusRingWidth: 2,\n  focusRingOffset: 2,\n  paddingHorizontal: spacing.md,\n  paddingVertical: spacing.sm,\n  textVariant: \"body\",\n  label: {\n    color: \"textBody\",\n    textVariant: \"body\",\n    fontWeight: fontWeight.semibold,\n    gap: spacing.xs,\n  },\n  support: {\n    hintColor: \"textMuted\",\n    errorColor: \"danger\",\n    textVariant: \"label\",\n    gap: 6,\n  },\n  placeholder: { color: \"textMuted\" },\n  disabledOpacity: 0.6,\n} as const satisfies {\n  slots: readonly string[];\n  defaults: { variant: FieldVariant; shape: FieldShape; align: FieldAlign };\n  variants: Record<FieldVariant, { background: keyof ThemeColors }>;\n  shapes: Record<FieldShape, keyof typeof radius>;\n  states: Record<\n    \"idle\" | \"focused\" | \"invalid\",\n    { border: keyof ThemeColors }\n  >;\n  minHeight: number;\n  multilineMinHeight: number;\n  multilineMaxVisibleLines: number | null;\n  borderWidth: number;\n  focusRingWidth: number;\n  focusRingOffset: number;\n  paddingHorizontal: number;\n  paddingVertical: number;\n  textVariant: keyof typeof typography;\n  label: {\n    color: keyof ThemeColors;\n    textVariant: keyof typeof typography;\n    fontWeight: FontWeightValue;\n    gap: number;\n  };\n  support: {\n    hintColor: keyof ThemeColors;\n    errorColor: keyof ThemeColors;\n    textVariant: keyof typeof typography;\n    gap: number;\n  };\n  placeholder: { color: keyof ThemeColors };\n  disabledOpacity: number;\n};\n\n/**\n * Renderer-neutral Surface geometry. Tone colors stay in `surfaceRecipe` for\n * compatibility; these axes make the previously implicit Web/Native defaults\n * explicit without changing that public recipe shape.\n */\nexport const surfaceDefaults = {\n  tone: \"default\",\n  padding: \"none\",\n  radius: \"lg\",\n  bordered: false,\n} as const satisfies {\n  tone: SurfaceTone;\n  padding: SurfacePadding;\n  radius: SurfaceRadius;\n  bordered: boolean;\n};\n\nexport const surfaceGeometry = {\n  paddings: { none: 0, ...spacing },\n  radii: radius,\n} as const satisfies {\n  paddings: Record<SurfacePadding, number>;\n  radii: Record<SurfaceRadius, number>;\n};\n"]}
+{"version":3,"file":"base-recipes.js","sourceRoot":"","sources":["../src/base-recipes.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ThemeColors } from \"./colors.js\";\nimport { control, fontWeight, radius, spacing, typography } from \"./foundations.js\";\nimport type { FontWeightValue, TextVariant } from \"./foundations.js\";\n\nexport type ButtonTone = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"link\";\n/** Corner geometry of the control frame. Mirrors `IconButtonShape`. */\nexport type ButtonShape = \"rounded\" | \"pill\";\n/**\n * Where the label sits inside the frame. `center` is the action default;\n * `leading` is for a full-width row action whose label reads as list copy.\n */\nexport type ButtonAlign = \"center\" | \"leading\";\nexport type ButtonSize = keyof typeof control.buttonHeight;\nexport type SurfaceTone = \"default\" | \"raised\" | \"accent\" | \"sunken\" | \"subtle\";\nexport type SurfacePadding = \"none\" | keyof typeof spacing;\nexport type SurfaceRadius = keyof typeof radius;\nexport type FieldVariant = \"surface\" | \"inset\";\nexport type FieldShape = \"medium\" | \"large\" | \"full\";\n\n/** Small renderer entry point for the three foundational visual recipes. */\nexport const buttonRecipe = {\n  slots: [\"root\", \"leading\", \"label\", \"trailing\", \"spinner\"] as const,\n  defaults: { tone: \"primary\", size: \"medium\", shape: \"rounded\", align: \"center\" } as const,\n  tones: {\n    primary: { background: \"primary\", content: \"onPrimary\", border: null, paddingHorizontal: null },\n    // The outline is a border role, not a text color. Drawing it in `textSub`\n    // made a resting control read heavier than the selected one beside it.\n    secondary: { background: \"surfaceAlt\", content: \"text\", border: \"borderControl\", paddingHorizontal: null },\n    ghost: { background: null, content: \"textMuted\", border: null, paddingHorizontal: null },\n    danger: { background: \"dangerFill\", content: \"onDanger\", border: null, paddingHorizontal: null },\n    // A link-tone control is inline copy, so the size axis' horizontal padding\n    // would push it out of alignment with the text around it.\n    link: { background: null, content: \"contentBrand\", border: null, paddingHorizontal: 0 },\n  },\n  /**\n   * Visual treatment for a control that is also a toggle. `accessibilityState`\n   * / `aria-pressed` already expressed the state; without a paired visual every\n   * consumer painted the selected background in product styles.\n   */\n  states: {\n    selected: { background: \"surfaceAccent\", content: \"contentBrand\", border: \"contentBrand\" },\n  },\n  sizes: {\n    small: {\n      height: control.buttonHeight.small,\n      hitSlop: control.buttonHitSlop.small,\n      paddingHorizontal: spacing.sm,\n      textVariant: \"label\",\n    },\n    medium: {\n      height: control.buttonHeight.medium,\n      hitSlop: control.buttonHitSlop.medium,\n      paddingHorizontal: spacing.md,\n      textVariant: \"body\",\n    },\n    large: {\n      height: control.buttonHeight.large,\n      hitSlop: control.buttonHitSlop.large,\n      paddingHorizontal: spacing.lg,\n      textVariant: \"bodyLarge\",\n    },\n  },\n  shapes: { rounded: \"md\", pill: \"full\" },\n  aligns: { center: \"center\", leading: \"flex-start\" },\n  opacity: { disabled: 0.5, pressed: 0.86 },\n  /**\n   * 긴 라벨의 처리 규칙. 지금까지 이 판단이 없어서 Web은 무한히 줄바꿈하고 RN은 한 줄로\n   * 잘렸다 — 같은 번역문이 두 표면에서 다르게 보였다.\n   *\n   * 자르지 않고 **두 줄까지 접는다**. 잘린 행동 라벨(\"삭제하...\"))은 무엇을 하는 버튼인지\n   * 잃는다. 대신 무제한 줄바꿈도 막는다 — 하단 CTA 행처럼 버튼이 남의 레이아웃을 밀어내는\n   * 자리가 있고, 두 줄을 넘는 라벨은 레이아웃이 아니라 카피의 문제다.\n   *\n   * 큰 글자 설정에서는 상한을 **푼다**. 사용자가 키운 글자에서 두 줄로 자르면 내용이\n   * 사라지고, 그건 WCAG 1.4.4를 어긴다. 제품 카피가 아니라 사용자 설정이 원인이기 때문에\n   * 같은 규칙을 적용할 수 없다.\n   */\n  label: { overflow: \"wrap\", maxLines: 2, liftCapOnLargeText: true },\n} as const satisfies {\n  slots: readonly string[];\n  defaults: { tone: ButtonTone; size: ButtonSize; shape: ButtonShape; align: ButtonAlign };\n  tones: Record<\n    ButtonTone,\n    {\n      background: keyof ThemeColors | null;\n      content: keyof ThemeColors;\n      border: keyof ThemeColors | null;\n      /** `null` keeps the size axis' padding. */\n      paddingHorizontal: number | null;\n    }\n  >;\n  states: {\n    selected: {\n      background: keyof ThemeColors;\n      content: keyof ThemeColors;\n      border: keyof ThemeColors;\n    };\n  };\n  sizes: Record<\n    ButtonSize,\n    {\n      height: number;\n      hitSlop: number;\n      paddingHorizontal: number;\n      textVariant: TextVariant;\n    }\n  >;\n  shapes: Record<ButtonShape, keyof typeof radius>;\n  aligns: Record<ButtonAlign, \"center\" | \"flex-start\">;\n  opacity: { disabled: number; pressed: number };\n  label: { overflow: \"wrap\"; maxLines: number; liftCapOnLargeText: boolean };\n};\n\n/** Resolves the label's line cap for one resolved environment. `null` means uncapped. */\nexport function resolveButtonLabelLines(largeText: boolean): number | null {\n  return largeText && buttonRecipe.label.liftCapOnLargeText ? null : buttonRecipe.label.maxLines;\n}\n\nexport const surfaceRecipe = {\n  default: {\n    background: \"surface\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  raised: {\n    background: \"bg\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: true,\n    borderAlways: false,\n    // An elevated surface must not clip: `overflow: hidden` cuts off its own\n    // shadow. Every other tone clips so a child image cannot spill past the\n    // rounded corner, which consumers were fixing in product styles.\n    clipsContent: false,\n  },\n  // `semanticColors.surface.sunken` already named this role; without a paired\n  // tone a consumer had to paint `surfaceAlt` in its own product styles.\n  sunken: {\n    background: \"surfaceAlt\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  accent: {\n    background: \"surfaceAccent\",\n    border: \"primary\",\n    borderAlpha: 0.3,\n    elevated: false,\n    borderAlways: false,\n    clipsContent: true,\n  },\n  subtle: {\n    background: \"bg\",\n    border: \"border\",\n    borderAlpha: 1,\n    elevated: false,\n    borderAlways: true,\n    clipsContent: true,\n  },\n} as const satisfies Record<\n  SurfaceTone,\n  {\n    background: keyof ThemeColors;\n    border: keyof ThemeColors;\n    borderAlpha: number;\n    elevated: boolean;\n    clipsContent: boolean;\n    borderAlways: boolean;\n  }\n>;\n\n/** Text placement inside a field control. */\nexport type FieldAlign = \"start\" | \"center\";\n\nexport const fieldRecipe = {\n  slots: [\n    \"root\",\n    \"label\",\n    \"control\",\n    \"leading\",\n    \"input\",\n    \"trailing\",\n    \"hint\",\n    \"error\",\n  ] as const,\n  defaults: { variant: \"surface\", shape: \"medium\", align: \"start\" } as const,\n  variants: {\n    surface: { background: \"surface\" },\n    inset: { background: \"bg\" },\n  },\n  shapes: {\n    medium: \"md\",\n    large: \"lg\",\n    full: \"full\",\n  },\n  states: {\n    idle: { border: \"textMuted\" },\n    focused: { border: \"contentBrand\" },\n    invalid: { border: \"danger\" },\n  },\n  minHeight: control.minTouchTarget,\n  multilineMinHeight: 80,\n  /**\n   * Upper bound for a growing multiline field, expressed in visible lines. A\n   * consumer otherwise reaches for `inputStyle={{ maxHeight }}`, which moves a\n   * recipe-owned dimension into product code. `null` keeps unbounded growth.\n   */\n  multilineMaxVisibleLines: null as number | null,\n  borderWidth: 1,\n  focusRingWidth: 2,\n  focusRingOffset: 2,\n  paddingHorizontal: spacing.md,\n  paddingVertical: spacing.sm,\n  textVariant: \"body\",\n  label: {\n    color: \"textBody\",\n    textVariant: \"body\",\n    fontWeight: fontWeight.semibold,\n    gap: spacing.xs,\n  },\n  support: {\n    hintColor: \"textMuted\",\n    errorColor: \"danger\",\n    textVariant: \"label\",\n    gap: 6,\n  },\n  placeholder: { color: \"textMuted\" },\n  disabledOpacity: 0.6,\n} as const satisfies {\n  slots: readonly string[];\n  defaults: { variant: FieldVariant; shape: FieldShape; align: FieldAlign };\n  variants: Record<FieldVariant, { background: keyof ThemeColors }>;\n  shapes: Record<FieldShape, keyof typeof radius>;\n  states: Record<\n    \"idle\" | \"focused\" | \"invalid\",\n    { border: keyof ThemeColors }\n  >;\n  minHeight: number;\n  multilineMinHeight: number;\n  multilineMaxVisibleLines: number | null;\n  borderWidth: number;\n  focusRingWidth: number;\n  focusRingOffset: number;\n  paddingHorizontal: number;\n  paddingVertical: number;\n  textVariant: keyof typeof typography;\n  label: {\n    color: keyof ThemeColors;\n    textVariant: keyof typeof typography;\n    fontWeight: FontWeightValue;\n    gap: number;\n  };\n  support: {\n    hintColor: keyof ThemeColors;\n    errorColor: keyof ThemeColors;\n    textVariant: keyof typeof typography;\n    gap: number;\n  };\n  placeholder: { color: keyof ThemeColors };\n  disabledOpacity: number;\n};\n\n/**\n * Renderer-neutral Surface geometry. Tone colors stay in `surfaceRecipe` for\n * compatibility; these axes make the previously implicit Web/Native defaults\n * explicit without changing that public recipe shape.\n */\nexport const surfaceDefaults = {\n  tone: \"default\",\n  padding: \"none\",\n  radius: \"lg\",\n  bordered: false,\n} as const satisfies {\n  tone: SurfaceTone;\n  padding: SurfacePadding;\n  radius: SurfaceRadius;\n  bordered: boolean;\n};\n\nexport const surfaceGeometry = {\n  paddings: { none: 0, ...spacing },\n  radii: radius,\n} as const satisfies {\n  paddings: Record<SurfacePadding, number>;\n  radii: Record<SurfaceRadius, number>;\n};\n"]}