@s_and_a/arrow-ui-design-classic 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-classic",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "ARROW UI の design：classic",
   "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

@@ -34,6 +34,6 @@
 [data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{flex-wrap:wrap}
 [data-ar-design="classic"] [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"]):not(:disabled,[aria-disabled="true"]){color:#fff}
 [data-ar-design="classic"] [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)}
-[data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"])){padding:10px}
-[data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"])){margin-inline:0;margin-bottom:0}
-[data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"]){height:auto;min-width:0}
+[data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"])){padding:10px}
+[data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"])){margin-inline:0;margin-bottom:0}
+[data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"]){height:auto;min-width:0}

package/src/parts/ArField.css

@@ -5,8 +5,8 @@
 [data-ar-design="classic"] [data-ar="field"]>[data-part="label"]{display:flex;align-items:center;font-size:14px;font-weight:600;color:rgba(0,0,0,.88);line-height:32px;min-height:32px}
 [data-ar-design="classic"] [data-ar="field"][data-layout="stacked"]>[data-part="label"]{padding-bottom:8px}
 [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]{column-gap:0}
-[data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;height:32px;white-space:nowrap;overflow:hidden}
-[data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:":";position:relative;margin-inline:2px 8px}
+[data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{display:block;min-width:0;height:auto;white-space:normal;overflow-wrap:anywhere;text-align:right;line-height:22px;padding:5px 8px 5px 0}
+[data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:":";position:relative;margin-inline:2px 0}
 [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"][data-empty]::after{content:none}
 [data-ar-design="classic"] [data-ar="field"]>[data-part="label"]:has(>[data-part="required"])::before{content:"*";display:inline-block;margin-inline-end:4px;color:#FF4D4F;font-family:SimSun,sans-serif;font-size:14px;line-height:1}
 [data-ar-design="classic"] [data-ar="field"]>[data-part="label"]>[data-part="required"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@@ -17,3 +17,12 @@
 [data-ar-design="classic"] [data-ar="field"][data-layout="toolbar"]{gap:4px}
 [data-ar-design="classic"] [data-ar="field"][data-layout="toolbar"]>[data-part="label"]{min-height:0;color:#000;font-size:13px;font-weight:400;line-height:32px}
 [data-ar-design="classic"] [data-ar="field"][data-layout="toolbar"]>[data-part="label"]::after{content:"："}
+
+/* 狭い入力欄は親幅で縦配置へ。画面幅が広いダイアログやカラム内も同じ扱い。 */
+[data-ar-design="classic"] [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="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"],
+  [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="control"]{grid-column:1/-1;min-width:0}
+  [data-ar-design="classic"] [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}
+  [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:none}
+}

package/src/parts/ArTable.css

@@ -107,3 +107,5 @@
 /* Long comments and document reasons can share the available table width. */
 [data-ar-design="classic"] [data-ar="table"][data-fit]>[data-part="viewport"]>[data-part="table"]{width:100%;table-layout:fixed}
 [data-ar-design="classic"] [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="classic"] [data-ar="table"] [data-part="header-cell"][data-wrap]{white-space:normal;overflow-wrap:anywhere;padding-block:6px}