@s_and_a/arrow-ui-design-remix 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-remix",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "ARROW UI の design：remix",
   "type": "module",
   "sideEffects": [
@@ -25,7 +25,7 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
-    "@s_and_a/arrow-ui": "0.1.4"
+    "@s_and_a/arrow-ui": "^0.1.4"
   },
   "dependencies": {
     "@s_and_a/arrow-ui-tokens": "0.1.2"

package/src/parts/ArCard.css

@@ -58,8 +58,8 @@
 [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):hover:not(:disabled,[aria-disabled="true"]){background:rgba(255,255,255,.16)}
 /* Form action groups need natural height when buttons wrap. Direct footer
    buttons retain the segmented card footer used by compact summaries. */
-[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"])){padding:12px 18px}
-[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"]){height:auto;min-width:0}
+[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"])){padding:12px 18px}
+[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"]){height:auto;min-width:0}
 @media(max-width:640px){
   [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]{min-height:50px;padding-inline:12px}
   [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]>[data-part="title"]{font-size:17px}

package/src/parts/ArField.css

@@ -4,7 +4,7 @@
 [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;line-height:18.75px;color:var(--ar-color-text-secondary)}
 [data-ar-design="remix"] [data-ar="field"][data-layout="stacked"]>[data-part="label"]{margin-bottom:6px}
 [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{column-gap:14px;align-items:center}
-[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;gap:4px;font-size:13.5px;font-weight:600;line-height:20.25px;text-align:right}
+[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;min-width:0;overflow-wrap:anywhere;gap:4px;font-size:13.5px;font-weight:600;line-height:20.25px;text-align:right}
 [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>[data-part="required"]{display:block;flex:none;padding:0 5px;border-radius:4px;background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink);font-size:11px;font-weight:700;line-height:18px}
 [data-ar-design="remix"] [data-ar="field"]>[data-part="control"]>[data-part="help"]{margin-top:4px;font-size:12px;line-height:18px;color:var(--ar-color-text-muted)}
 [data-ar-design="remix"] [data-ar="field"]>[data-part="control"]>[data-part="error"]{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:12.5px;font-weight:600;line-height:18.75px;color:var(--ar-color-danger-ink)}
@@ -12,3 +12,11 @@
 /* toolbar：シフト画面の .v-st（12.5px 600・mute・入力との間 8px） */
 [data-ar-design="remix"] [data-ar="field"][data-layout="toolbar"]{gap:8px}
 [data-ar-design="remix"] [data-ar="field"][data-layout="toolbar"]>[data-part="label"]{gap:4px;font-size:12.5px;font-weight:600;line-height:18.75px;color:var(--ar-color-text-muted)}
+
+/* 狭い入力欄は親幅で縦配置へ。画面幅が広いダイアログやカラム内も同じ扱い。 */
+[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{container-type:inline-size;container-name:ar-field;min-width:0;grid-template-columns:minmax(0,var(--ar-field-label)) minmax(0,1fr)}
+@container ar-field (max-width:480px){
+  [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"],
+  [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="control"]{grid-column:1/-1;min-width:0}
+  [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-start;text-align:left;white-space:normal;overflow:visible;height:auto;margin-bottom:6px;overflow-wrap:anywhere}
+}

package/src/parts/ArTable.css

@@ -192,3 +192,5 @@
 /* Long comments and document reasons can share the available table width. */
 [data-ar-design="remix"] [data-ar="table"][data-fit]>[data-part="viewport"]>[data-part="table"]{width:100%;table-layout:fixed}
 [data-ar-design="remix"] [data-ar="table"] [data-part="cell"][data-wrap]{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip;line-height:1.6;padding-block:8px}
+
+[data-ar-design="remix"] [data-ar="table"] [data-part="header-cell"][data-wrap]{white-space:normal;overflow-wrap:anywhere;padding-block:6px}