@s_and_a/arrow-ui-design-classic 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/parts/ArCard.css +3 -3
  3. package/src/parts/ArEmpty.css +2 -2
  4. package/src/parts/ArField.css +11 -2
  5. package/src/parts/ArTable.css +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@s_and_a/arrow-ui-design-classic",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "ARROW UI の design：classic",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/src/parts/ArCard.css CHANGED
@@ -34,6 +34,6 @@
34
34
  [data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{flex-wrap:wrap}
35
35
  [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}
36
36
  [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)}
37
- [data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"])){padding:10px}
38
- [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}
39
- [data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"]){height:auto;min-width:0}
37
+ [data-ar-design="classic"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"])){padding:10px}
38
+ [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}
39
+ [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/ArEmpty.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* @covers ArEmpty 1.0.0 */
2
- /* ArEmpty（ARROW の EmptyCard：余白30・白地・#DDDDDD の1px の枠・14px 黒・中央「データがありません」。size="sm" は枠なし（表の下の p.nodata：上下16・14px・rgba(0,0,0,.25)）） */
3
- [data-ar-design="classic"] [data-ar="empty"]{gap:8px;padding:16px 0;color:rgba(0,0,0,.25);font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,"ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;font-size:14px;line-height:14px}
2
+ /* ArEmpty（ARROW の EmptyCard：余白30・白地・#DDDDDD の1px の枠・14px 黒・中央「データがありません」。size="sm" は枠なし。状態を説明する本文はdisabledの薄さにしない。） */
3
+ [data-ar-design="classic"] [data-ar="empty"]{gap:8px;padding:16px 0;color:rgba(0,0,0,.65);font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,"ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;font-size:14px;line-height:1.5}
4
4
  [data-ar-design="classic"] [data-ar="empty"]>[data-part="icon"]{width:20px;height:20px;color:rgba(0,0,0,.25)}
5
5
  [data-ar-design="classic"] [data-ar="empty"][data-size="md"]{margin-top:15px;padding:30px;border:1px solid #DDDDDD;background:#fff;color:#000}
6
6
  [data-ar-design="classic"] [data-ar="empty"][data-size="md"]>[data-part="icon"]{color:#9B9A9B}
package/src/parts/ArField.css CHANGED
@@ -5,8 +5,8 @@
5
5
  [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}
6
6
  [data-ar-design="classic"] [data-ar="field"][data-layout="stacked"]>[data-part="label"]{padding-bottom:8px}
7
7
  [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]{column-gap:0}
8
- [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;height:32px;white-space:nowrap;overflow:hidden}
9
- [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:":";position:relative;margin-inline:2px 8px}
8
+ [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}
9
+ [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:":";position:relative;margin-inline:2px 0}
10
10
  [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"][data-empty]::after{content:none}
11
11
  [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}
12
12
  [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 @@
17
17
  [data-ar-design="classic"] [data-ar="field"][data-layout="toolbar"]{gap:4px}
18
18
  [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}
19
19
  [data-ar-design="classic"] [data-ar="field"][data-layout="toolbar"]>[data-part="label"]::after{content:"："}
20
+
21
+ /* 狭い入力欄は親幅で縦配置へ。画面幅が広いダイアログやカラム内も同じ扱い。 */
22
+ [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)}
23
+ @container ar-field (max-width:480px){
24
+ [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"],
25
+ [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="control"]{grid-column:1/-1;min-width:0}
26
+ [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}
27
+ [data-ar-design="classic"] [data-ar="field"][data-layout="inline"]>[data-part="label"]::after{content:none}
28
+ }
package/src/parts/ArTable.css CHANGED
@@ -107,3 +107,5 @@
107
107
  /* Long comments and document reasons can share the available table width. */
108
108
  [data-ar-design="classic"] [data-ar="table"][data-fit]>[data-part="viewport"]>[data-part="table"]{width:100%;table-layout:fixed}
109
109
  [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}
110
+
111
+ [data-ar-design="classic"] [data-ar="table"] [data-part="header-cell"][data-wrap]{white-space:normal;overflow-wrap:anywhere;padding-block:6px}