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

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 (47) hide show
  1. package/dist/covers.generated.d.ts +20 -18
  2. package/dist/covers.generated.js +20 -18
  3. package/package.json +2 -2
  4. package/src/parts/ArAffix.css +6 -0
  5. package/src/parts/ArAlert.css +3 -0
  6. package/src/parts/ArAnchor.css +1 -1
  7. package/src/parts/ArAppHeader.css +3 -2
  8. package/src/parts/ArApprovalFlow.css +8 -1
  9. package/src/parts/ArAuthPanel.css +5 -1
  10. package/src/parts/ArButton.css +14 -1
  11. package/src/parts/ArCalendar.css +2 -1
  12. package/src/parts/ArCard.css +24 -11
  13. package/src/parts/ArChangedValue.css +7 -0
  14. package/src/parts/ArChoiceCard.css +1 -0
  15. package/src/parts/ArCollapse.css +3 -0
  16. package/src/parts/ArDescriptions.css +8 -0
  17. package/src/parts/ArDocumentBlock.css +2 -0
  18. package/src/parts/ArDropdown.css +12 -2
  19. package/src/parts/ArField.css +9 -4
  20. package/src/parts/ArFlagGroup.css +4 -2
  21. package/src/parts/ArImage.css +4 -1
  22. package/src/parts/ArItem.css +9 -0
  23. package/src/parts/ArKanaInput.css +4 -4
  24. package/src/parts/ArList.css +2 -2
  25. package/src/parts/ArMenu.css +3 -1
  26. package/src/parts/ArModal.css +21 -3
  27. package/src/parts/ArPageHeading.css +1 -1
  28. package/src/parts/ArParagraph.css +1 -1
  29. package/src/parts/ArPayslip.css +10 -2
  30. package/src/parts/ArProfileCard.css +7 -4
  31. package/src/parts/ArPunchPanel.css +3 -1
  32. package/src/parts/ArRichTextEditor.css +1 -1
  33. package/src/parts/ArSaveBar.css +11 -0
  34. package/src/parts/ArSectionMenu.css +3 -1
  35. package/src/parts/ArSegmented.css +7 -0
  36. package/src/parts/ArStatistic.css +1 -0
  37. package/src/parts/ArSteps.css +1 -0
  38. package/src/parts/ArTable.css +21 -18
  39. package/src/parts/ArTableHeader.css +1 -1
  40. package/src/parts/ArThumbnail.css +1 -1
  41. package/src/parts/ArTimeInput.css +1 -1
  42. package/src/parts/ArTreeSelect.css +1 -1
  43. package/src/parts/ArUpload.css +2 -4
  44. package/src/parts/ArWizard.css +13 -1
  45. package/src/parts/ArZipInput.css +1 -1
  46. package/src/parts/_choice.css +2 -2
  47. package/src/parts/_product.css +97 -1
package/dist/covers.generated.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const covers: {
6
6
  readonly ArAppFooter: "1.0.0";
7
7
  readonly ArAppHeader: "1.1.0";
8
8
  readonly ArApprovalFlow: "1.2.0";
9
- readonly ArAuthPanel: "1.0.0";
9
+ readonly ArAuthPanel: "1.1.0";
10
10
  readonly ArAutoComplete: "1.0.0";
11
11
  readonly ArAvatar: "1.1.1";
12
12
  readonly ArAvatarGroup: "1.0.0";
@@ -15,8 +15,8 @@ export declare const covers: {
15
15
  readonly ArBorderBeam: "1.0.0";
16
16
  readonly ArBottomNav: "1.1.0";
17
17
  readonly ArBreadcrumb: "1.0.0";
18
- readonly ArButton: "1.0.0";
19
- readonly ArCalendar: "1.2.0";
18
+ readonly ArButton: "1.1.0";
19
+ readonly ArCalendar: "1.3.0";
20
20
  readonly ArCard: "1.1.0";
21
21
  readonly ArCarousel: "1.0.0";
22
22
  readonly ArCascader: "1.0.0";
@@ -39,13 +39,13 @@ export declare const covers: {
39
39
  readonly ArDivider: "1.0.0";
40
40
  readonly ArDocumentBlock: "1.0.0";
41
41
  readonly ArDrawer: "1.1.0";
42
- readonly ArDropdown: "1.1.0";
42
+ readonly ArDropdown: "1.2.0";
43
43
  readonly ArDurationInput: "1.1.0";
44
44
  readonly ArEllipsis: "1.0.0";
45
45
  readonly ArEmpty: "1.0.0";
46
46
  readonly ArExample: "1.0.0";
47
47
  readonly ArField: "1.0.0";
48
- readonly ArFlagGroup: "1.1.0";
48
+ readonly ArFlagGroup: "1.2.0";
49
49
  readonly ArFlagView: "1.0.0";
50
50
  readonly ArFloatButton: "1.0.0";
51
51
  readonly ArForm: "1.0.0";
@@ -58,11 +58,11 @@ export declare const covers: {
58
58
  readonly ArKanaText: "1.0.0";
59
59
  readonly ArLayout: "1.0.0";
60
60
  readonly ArLink: "1.0.0";
61
- readonly ArList: "1.0.0";
61
+ readonly ArList: "1.1.0";
62
62
  readonly ArLogoSpin: "1.0.0";
63
63
  readonly ArMapPreview: "1.0.0";
64
64
  readonly ArMentions: "1.0.0";
65
- readonly ArMenu: "1.0.0";
65
+ readonly ArMenu: "1.1.0";
66
66
  readonly ArMenuTile: "1.0.0";
67
67
  readonly ArMessage: "1.0.0";
68
68
  readonly ArMessageHost: "1.0.0";
@@ -75,8 +75,10 @@ export declare const covers: {
75
75
  readonly ArOtpInput: "1.0.0";
76
76
  readonly ArPageHeading: "1.0.0";
77
77
  readonly ArPagination: "1.0.0";
78
- readonly ArParagraph: "1.0.0";
79
- readonly ArPayslip: "1.0.0";
78
+ readonly ArParagraph: "1.1.0";
79
+ readonly ArPayslip: "1.1.0";
80
+ readonly ArPayslipLine: "1.0.0";
81
+ readonly ArPayslipTable: "1.0.0";
80
82
  readonly ArPdfViewer: "1.0.0";
81
83
  readonly ArPeriodBox: "1.0.0";
82
84
  readonly ArPeriodNav: "1.1.0";
@@ -87,17 +89,17 @@ export declare const covers: {
87
89
  readonly ArProfileCard: "1.0.0";
88
90
  readonly ArProgress: "1.0.0";
89
91
  readonly ArPunchButton: "1.0.0";
90
- readonly ArPunchPanel: "1.0.0";
92
+ readonly ArPunchPanel: "1.1.0";
91
93
  readonly ArQRCode: "1.0.0";
92
94
  readonly ArRadio: "1.1.0";
93
95
  readonly ArRadioGroup: "1.2.0";
94
96
  readonly ArRate: "1.0.0";
95
97
  readonly ArResult: "1.0.0";
96
98
  readonly ArRibbon: "1.0.0";
97
- readonly ArRichTextEditor: "1.0.0";
99
+ readonly ArRichTextEditor: "1.1.0";
98
100
  readonly ArSaveBar: "1.0.0";
99
101
  readonly ArSectionHead: "1.0.0";
100
- readonly ArSectionMenu: "1.0.0";
102
+ readonly ArSectionMenu: "1.1.0";
101
103
  readonly ArSegmented: "1.2.0";
102
104
  readonly ArSelect: "1.3.0";
103
105
  readonly ArShiftChart: "1.0.0";
@@ -114,35 +116,35 @@ export declare const covers: {
114
116
  readonly ArStepSelect: "1.0.0";
115
117
  readonly ArSubItem: "1.0.0";
116
118
  readonly ArSwitch: "1.1.0";
117
- readonly ArTable: "1.5.0";
119
+ readonly ArTable: "1.6.0";
118
120
  readonly ArTableHeader: "1.0.0";
119
121
  readonly ArTabs: "1.1.0";
120
122
  readonly ArTag: "1.0.0";
121
123
  readonly ArText: "1.0.0";
122
124
  readonly ArTextarea: "1.1.0";
123
125
  readonly ArTextInput: "1.1.0";
124
- readonly ArThumbnail: "1.1.0";
126
+ readonly ArThumbnail: "1.3.0";
125
127
  readonly ArTimeChart: "1.1.0";
126
128
  readonly ArTimeInput: "1.1.0";
127
129
  readonly ArTimeline: "1.0.0";
128
130
  readonly ArTimePicker: "1.0.0";
129
- readonly ArTimeRange: "1.1.0";
131
+ readonly ArTimeRange: "1.3.0";
130
132
  readonly ArTitle: "1.0.0";
131
133
  readonly ArToast: "1.0.0";
132
134
  readonly ArTooltip: "1.1.0";
133
135
  readonly ArTour: "1.0.0";
134
136
  readonly ArTransfer: "1.0.0";
135
137
  readonly ArTree: "1.0.0";
136
- readonly ArTreeSelect: "1.1.0";
138
+ readonly ArTreeSelect: "1.2.0";
137
139
  readonly ArTreeTable: "1.1.0";
138
140
  readonly ArUpload: "1.2.0";
139
141
  readonly ArVariablePanel: "1.0.0";
140
142
  readonly ArViewOptions: "1.1.0";
141
143
  readonly ArWatermark: "1.0.0";
142
144
  readonly ArWeekdayPicker: "1.1.0";
143
- readonly ArWizard: "1.0.0";
145
+ readonly ArWizard: "1.2.0";
144
146
  readonly ArYearInput: "1.1.0";
145
147
  readonly ArYearMonthInput: "1.1.0";
146
- readonly ArZipInput: "1.2.0";
148
+ readonly ArZipInput: "1.3.0";
147
149
  readonly ArZoomControl: "1.0.0";
148
150
  };
package/dist/covers.generated.js CHANGED
@@ -7,7 +7,7 @@ export const covers = {
7
7
  ArAppFooter: "1.0.0",
8
8
  ArAppHeader: "1.1.0",
9
9
  ArApprovalFlow: "1.2.0",
10
- ArAuthPanel: "1.0.0",
10
+ ArAuthPanel: "1.1.0",
11
11
  ArAutoComplete: "1.0.0",
12
12
  ArAvatar: "1.1.1",
13
13
  ArAvatarGroup: "1.0.0",
@@ -16,8 +16,8 @@ export const covers = {
16
16
  ArBorderBeam: "1.0.0",
17
17
  ArBottomNav: "1.1.0",
18
18
  ArBreadcrumb: "1.0.0",
19
- ArButton: "1.0.0",
20
- ArCalendar: "1.2.0",
19
+ ArButton: "1.1.0",
20
+ ArCalendar: "1.3.0",
21
21
  ArCard: "1.1.0",
22
22
  ArCarousel: "1.0.0",
23
23
  ArCascader: "1.0.0",
@@ -40,13 +40,13 @@ export const covers = {
40
40
  ArDivider: "1.0.0",
41
41
  ArDocumentBlock: "1.0.0",
42
42
  ArDrawer: "1.1.0",
43
- ArDropdown: "1.1.0",
43
+ ArDropdown: "1.2.0",
44
44
  ArDurationInput: "1.1.0",
45
45
  ArEllipsis: "1.0.0",
46
46
  ArEmpty: "1.0.0",
47
47
  ArExample: "1.0.0",
48
48
  ArField: "1.0.0",
49
- ArFlagGroup: "1.1.0",
49
+ ArFlagGroup: "1.2.0",
50
50
  ArFlagView: "1.0.0",
51
51
  ArFloatButton: "1.0.0",
52
52
  ArForm: "1.0.0",
@@ -59,11 +59,11 @@ export const covers = {
59
59
  ArKanaText: "1.0.0",
60
60
  ArLayout: "1.0.0",
61
61
  ArLink: "1.0.0",
62
- ArList: "1.0.0",
62
+ ArList: "1.1.0",
63
63
  ArLogoSpin: "1.0.0",
64
64
  ArMapPreview: "1.0.0",
65
65
  ArMentions: "1.0.0",
66
- ArMenu: "1.0.0",
66
+ ArMenu: "1.1.0",
67
67
  ArMenuTile: "1.0.0",
68
68
  ArMessage: "1.0.0",
69
69
  ArMessageHost: "1.0.0",
@@ -76,8 +76,10 @@ export const covers = {
76
76
  ArOtpInput: "1.0.0",
77
77
  ArPageHeading: "1.0.0",
78
78
  ArPagination: "1.0.0",
79
- ArParagraph: "1.0.0",
80
- ArPayslip: "1.0.0",
79
+ ArParagraph: "1.1.0",
80
+ ArPayslip: "1.1.0",
81
+ ArPayslipLine: "1.0.0",
82
+ ArPayslipTable: "1.0.0",
81
83
  ArPdfViewer: "1.0.0",
82
84
  ArPeriodBox: "1.0.0",
83
85
  ArPeriodNav: "1.1.0",
@@ -88,17 +90,17 @@ export const covers = {
88
90
  ArProfileCard: "1.0.0",
89
91
  ArProgress: "1.0.0",
90
92
  ArPunchButton: "1.0.0",
91
- ArPunchPanel: "1.0.0",
93
+ ArPunchPanel: "1.1.0",
92
94
  ArQRCode: "1.0.0",
93
95
  ArRadio: "1.1.0",
94
96
  ArRadioGroup: "1.2.0",
95
97
  ArRate: "1.0.0",
96
98
  ArResult: "1.0.0",
97
99
  ArRibbon: "1.0.0",
98
- ArRichTextEditor: "1.0.0",
100
+ ArRichTextEditor: "1.1.0",
99
101
  ArSaveBar: "1.0.0",
100
102
  ArSectionHead: "1.0.0",
101
- ArSectionMenu: "1.0.0",
103
+ ArSectionMenu: "1.1.0",
102
104
  ArSegmented: "1.2.0",
103
105
  ArSelect: "1.3.0",
104
106
  ArShiftChart: "1.0.0",
@@ -115,35 +117,35 @@ export const covers = {
115
117
  ArStepSelect: "1.0.0",
116
118
  ArSubItem: "1.0.0",
117
119
  ArSwitch: "1.1.0",
118
- ArTable: "1.5.0",
120
+ ArTable: "1.6.0",
119
121
  ArTableHeader: "1.0.0",
120
122
  ArTabs: "1.1.0",
121
123
  ArTag: "1.0.0",
122
124
  ArText: "1.0.0",
123
125
  ArTextarea: "1.1.0",
124
126
  ArTextInput: "1.1.0",
125
- ArThumbnail: "1.1.0",
127
+ ArThumbnail: "1.3.0",
126
128
  ArTimeChart: "1.1.0",
127
129
  ArTimeInput: "1.1.0",
128
130
  ArTimeline: "1.0.0",
129
131
  ArTimePicker: "1.0.0",
130
- ArTimeRange: "1.1.0",
132
+ ArTimeRange: "1.3.0",
131
133
  ArTitle: "1.0.0",
132
134
  ArToast: "1.0.0",
133
135
  ArTooltip: "1.1.0",
134
136
  ArTour: "1.0.0",
135
137
  ArTransfer: "1.0.0",
136
138
  ArTree: "1.0.0",
137
- ArTreeSelect: "1.1.0",
139
+ ArTreeSelect: "1.2.0",
138
140
  ArTreeTable: "1.1.0",
139
141
  ArUpload: "1.2.0",
140
142
  ArVariablePanel: "1.0.0",
141
143
  ArViewOptions: "1.1.0",
142
144
  ArWatermark: "1.0.0",
143
145
  ArWeekdayPicker: "1.1.0",
144
- ArWizard: "1.0.0",
146
+ ArWizard: "1.2.0",
145
147
  ArYearInput: "1.1.0",
146
148
  ArYearMonthInput: "1.1.0",
147
- ArZipInput: "1.2.0",
149
+ ArZipInput: "1.3.0",
148
150
  ArZoomControl: "1.0.0",
149
151
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@s_and_a/arrow-ui-design-remix",
3
- "version": "0.1.8",
3
+ "version": "0.1.11",
4
4
  "description": "ARROW UI の design：remix",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -25,7 +25,7 @@
25
25
  "build": "tsc -p tsconfig.build.json"
26
26
  },
27
27
  "peerDependencies": {
28
- "@s_and_a/arrow-ui": "^0.1.4"
28
+ "@s_and_a/arrow-ui": "^0.1.11"
29
29
  },
30
30
  "dependencies": {
31
31
  "@s_and_a/arrow-ui-tokens": "0.1.2"
package/src/parts/ArAffix.css CHANGED
@@ -4,3 +4,9 @@
4
4
  [data-ar-design="remix"] [data-ar="affix"]:is([data-band="always"],[data-state~="affixed"]){background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
5
5
  [data-ar-design="remix"] [data-ar="affix"][data-position="top"]:is([data-band="always"],[data-state~="affixed"]){border-bottom:1px solid var(--ar-color-border)}
6
6
  [data-ar-design="remix"] [data-ar="affix"][data-position="bottom"]:is([data-band="always"],[data-state~="affixed"]){border-top:1px solid var(--ar-color-border)}
7
+
8
+ /* Product shells keep page actions above their fixed navigation and safe-area inset. */
9
+ html[data-ar-design="remix"] .menu_layout [data-ar="affix"][data-position="bottom"]{--ar-affix-bottom-inset:var(--arrow-floating-bottom,16px)}
10
+
11
+ /* Leave the desktop help dock outside the action hit targets, even at the page end. */
12
+ @media (min-width:960px){html[data-ar-design="remix"] .menu_layout [data-ar="affix"][data-position="bottom"]{padding-inline-end:76px}}
package/src/parts/ArAlert.css CHANGED
@@ -17,3 +17,6 @@
17
17
  [data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="content"]>[data-part="title"]{color:var(--ar-color-text)}
18
18
  [data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"][data-titled]>[data-part="content"]>[data-part="body"]{font-size:var(--ar-font-size-caption);color:var(--ar-color-text-muted)}
19
19
  [data-ar-design="remix"] [data-ar="alert"][data-banner]{border-radius:0}
20
+
21
+ /* Preserve intentional paragraphs in API and translated guidance. */
22
+ [data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="body"]{white-space:pre-line;overflow-wrap:anywhere}
package/src/parts/ArAnchor.css CHANGED
@@ -7,6 +7,6 @@
7
7
  [data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"][data-state~="active"]{color:var(--ar-accent-ink);font-weight:700;border-left-color:var(--ar-accent)}
8
8
  [data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ar-accent-ring);border-radius:4px}
9
9
  [data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]{border-left:0;border-bottom:2px solid var(--ar-color-border)}
10
- [data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"]{margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
10
+ [data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"]{flex:0 0 auto;margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
11
11
  [data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-level="2"]{padding-left:12px}
12
12
  [data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-state~="active"]{border-bottom-color:var(--ar-accent)}
package/src/parts/ArAppHeader.css CHANGED
@@ -27,7 +27,7 @@
27
27
  [data-ar-design="remix"] [data-ar="app-account-menu"]{min-width:200px}
28
28
  [data-ar-design="remix"] [data-ar="app-account-menu"]>[data-part="menu-item"]>[data-part="menu-arrow"][data-ar="icon"]{margin-left:auto;color:var(--ar-color-text-faint)}
29
29
  /* 画面の足（.v-fo：左に文字のリンク、右に白いボタン。下に .v-cp の著作権：11px・左寄せ・下に26px） */
30
- [data-ar-design="remix"] [data-ar="app-footer"]{padding:30px 32px 0;color:var(--ar-color-text);font-feature-settings:"palt" 1}
30
+ [data-ar-design="remix"] [data-ar="app-footer"]{padding:30px 32px 0;padding-inline-end:max(32px,var(--ar-app-footer-end-inset,0px));color:var(--ar-color-text);font-feature-settings:"palt" 1}
31
31
  [data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]{align-items:center;gap:6px;padding-bottom:10px}
32
32
  [data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>:is([data-part="links"],[data-part="supports"]){gap:6px}
33
33
  [data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="links"]>[data-part="link"]{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ar-color-text-secondary);font-size:12.5px;font-weight:600;line-height:normal}
@@ -54,7 +54,8 @@
54
54
  [data-ar-design="remix"] [data-ar="bottom-nav"]>[data-part="item"][data-state~="on"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
55
55
  [data-ar-design="remix"] [data-ar="bottom-nav"]>[data-part="item"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ar-accent-ring)}
56
56
  /* ピルの一覧・領域のタブ・畳む・子のメニュー（remix）：白い面と淡い線、テーマ色の文字 */
57
- [data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]{min-width:260px;margin-top:6px;padding:6px;border:1px solid var(--ar-color-border);border-radius:12px;background:#fff;box-shadow:var(--ar-shadow-pop)}
57
+ [data-ar-design="remix"] [data-ar="app-pill-list"]{min-width:min(260px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
58
+ [data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]{min-width:0;margin-top:6px;padding:6px;border:1px solid var(--ar-color-border);border-radius:12px;background:#fff;box-shadow:var(--ar-shadow-pop)}
58
59
  [data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]{max-height:min(360px,calc(100vh - 140px))}
59
60
  [data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]>[data-part="pill-row"]{gap:2px;border-radius:8px}
60
61
  [data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]>[data-part="pill-row"]:hover{background:var(--ar-accent-faint)}
package/src/parts/ArApprovalFlow.css CHANGED
@@ -36,7 +36,14 @@
36
36
 
37
37
  [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="body"]>[data-part="title"]>[data-ar="icon"]{display:none}
38
38
  [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"]{max-width:100%;height:auto;min-height:22px;white-space:normal;overflow-wrap:anywhere}
39
- [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"] [data-part="step"]{padding:12px;border-radius:12px;gap:6px}
39
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"]{align-items:stretch}
40
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"]>[data-part="item"]{align-items:stretch}
41
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"] [data-part="step"]{height:auto;padding:12px;border-radius:12px;gap:6px;min-width:150px}
42
+ @media(max-width:600px){
43
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"]{flex-direction:column}
44
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"]>[data-part="item"]{flex-direction:column;width:100%;gap:4px}
45
+ [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"] [data-part="sep"]{transform:rotate(90deg);align-self:center}
46
+ }
40
47
  [data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"] [data-part="status"]{font-size:12px;color:var(--ar-color-text-secondary)}
41
48
  [data-ar-design="remix"] [data-ar="approval-flow"] [data-part="details"]{font-size:13px;line-height:1.5}
42
49
  @media(max-width:600px){[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="step"]{grid-template-columns:minmax(0,1fr)}[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"]{justify-self:start}}
package/src/parts/ArAuthPanel.css CHANGED
@@ -1,7 +1,11 @@
1
- /* @covers ArAuthPanel 1.0.0 */
1
+ /* @covers ArAuthPanel 1.1.0 */
2
2
  [data-ar-design="remix"] [data-ar="auth-panel"]>[data-part="card"]{background:var(--ar-color-surface,#fff);border:1px solid var(--ar-color-border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #182c4110}
3
3
  [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="heading"]{background:linear-gradient(120deg,var(--ar-accent),var(--ar-accent-strong));color:var(--ar-on-accent,#fff);font-size:17px;font-weight:700}
4
4
  [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company"]{border-bottom:1px solid var(--ar-color-border)}
5
5
  [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="initial"]{border-radius:8px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-weight:700}
6
6
  [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company-name"]{font-weight:700;font-size:14px}
7
7
  [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company-code"]{font-size:12px;color:var(--ar-color-text-muted)}
8
+ /* The authentication band follows the same shape and contrast as page headings. */
9
+ [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="heading"]{background:radial-gradient(circle at 0 100%,#ffffff12 0 90px,transparent 91px),radial-gradient(circle at 100% 0,#ffffff18 0 115px,transparent 116px),linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent),var(--ar-accent-strong));letter-spacing:.06em}
10
+ [data-ar-design="remix"] [data-ar="auth-panel"] [data-part="initial"]{width:38px;height:38px}
11
+ [data-ar-design="remix"] [data-ar="auth-panel"]>[data-part="footer"]{font-size:11px}
package/src/parts/ArButton.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @covers ArButton 1.0.0 */
1
+ /* @covers ArButton 1.1.0 */
2
2
  /* ArButton：ARROW 共通の .btn（角丸10・13px太字）。大きさの段は入力と同じ sm 30・md 36・lg 42（size.control-*）。デザインシステムの .btn は 34 だが、入力・時刻と横に並べてそろえるため 36 にした。 */
3
3
  [data-ar-design="remix"] [data-ar="button"]{height:var(--ar-size-control-md);padding:0 14px;gap:6px;border:0;border-radius:10px;font-size:13px;font-weight:700;line-height:normal;text-decoration:none;background:#fff;color:var(--ar-color-text-secondary);box-shadow:inset 0 0 0 1px var(--ar-color-border);transition:background var(--ar-motion-fast),box-shadow var(--ar-motion-fast),color var(--ar-motion-fast)}
4
4
  [data-ar-design="remix"] [data-ar="button"]:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ar-accent-ring)}
@@ -47,3 +47,16 @@
47
47
  [data-ar-design="remix"] [data-ar="button"][data-size="xl"]{height:var(--ar-size-control-lg);padding:0 18px;font-size:14px;border-radius:11px}
48
48
  [data-ar-design="remix"] [data-ar="button"][data-icon-only][data-size="xl"],[data-ar-design="remix"] [data-ar="button"][data-shape="circle"][data-size="xl"]{width:var(--ar-size-control-lg)}
49
49
  [data-ar-design="remix"] [data-ar="button"][data-state~="blink"]>:is([data-part="label"],[data-ar="icon"]){animation:ar-btn-blink 1s ease-in infinite alternate}@keyframes ar-btn-blink{0%{opacity:.35}100%{opacity:1}}@media (prefers-reduced-motion:reduce){[data-ar-design="remix"] [data-ar="button"][data-state~="blink"]>:is([data-part="label"],[data-ar="icon"]){animation:none}}
50
+
51
+ /* 操作の意味はページのアクセントに左右されない。disabled の表現は既存契約を維持。 */
52
+ [data-ar-design="remix"] [data-ar="button"][data-intent="add"]{--ar-action:#3578B9;--ar-action-strong:#28639C;--ar-action-ink:#28639C;--ar-action-subtle:#EDF5FC;--ar-action-line:#ADCBE7;--ar-action-ring:rgba(53,120,185,.24)}
53
+ [data-ar-design="remix"] [data-ar="button"]:is([data-intent="edit"],[data-tone="edit"]){--ar-action:#278359;--ar-action-strong:#206C49;--ar-action-ink:#206C49;--ar-action-subtle:#E9F6EE;--ar-action-line:#A8D5BB;--ar-action-ring:rgba(39,131,89,.24)}
54
+ [data-ar-design="remix"] [data-ar="button"][data-intent="delete"]{--ar-action:var(--ar-color-danger);--ar-action-strong:var(--ar-color-danger-ink);--ar-action-ink:var(--ar-color-danger-ink);--ar-action-subtle:var(--ar-color-danger-subtle);--ar-action-line:#EBC2BF;--ar-action-ring:rgba(192,50,43,.22)}
55
+ [data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):not(:disabled,[aria-disabled="true"]){background:var(--ar-action-subtle);color:var(--ar-action-ink);text-shadow:none;box-shadow:none}
56
+ [data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="primary"]:not(:disabled,[aria-disabled="true"]){background:var(--ar-action);color:#fff}
57
+ [data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="dashed"]:not(:disabled,[aria-disabled="true"]){background:#fff;border-color:var(--ar-action-line)}
58
+ [data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):hover:not(:disabled,[aria-disabled="true"]){background:var(--ar-action-subtle);box-shadow:inset 0 0 0 1px var(--ar-action-line)}
59
+ [data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="primary"]:hover:not(:disabled,[aria-disabled="true"]){background:var(--ar-action-strong)}
60
+ [data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):focus-visible:not(:disabled,[aria-disabled="true"]){outline:0;box-shadow:0 0 0 3px var(--ar-action-ring)}
61
+
62
+ [data-ar-design="remix"] [data-ar="button"][data-intent="delete"][data-tone="danger"]:not(:disabled,[aria-disabled="true"]){background:var(--ar-color-danger);color:#fff}
package/src/parts/ArCalendar.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @covers ArCalendar 1.2.0 */
1
+ /* @covers ArCalendar 1.3.0 */
2
2
  /* ArCalendar：デザインシステムの .ad-calf（角丸12・線の枠・見出しの段 8/10 と下線、曜日は淡いテーマ色の 28px、マスは 54px・線 #F0F3F6・12px 中太の数字、
3
3
  今日はテーマ色の 20px の丸、選んだ日は acc-25 の地と 1.5px の枠、前後の月は #A3AEB9）と .ev（行事の印）、.seg（月／年の切り替え）。 */
4
4
  [data-ar-design="remix"] [data-ar="calendar"]:not([data-variant="board"],[data-size="mini"]){border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ar-color-border);overflow:hidden;color:var(--ar-color-text);font-size:14px;line-height:1.5}
@@ -101,4 +101,5 @@
101
101
 
102
102
  /* State badges are deliberately compact in a seven-column phone calendar. Long translations wrap. */
103
103
  [data-ar-design="remix"] [data-ar="calendar"][data-variant="board"] [data-part="foot"]>[data-ar="tag"]{max-width:100%;height:auto;min-height:16px;padding:1px 2px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:14px}
104
+ [data-ar-design="remix"] [data-ar="calendar"][data-variant="board"][data-density="compact"]:not([data-size="mini"])>[data-part="grid"]>[data-part="row"]>[data-part="cell"]{min-height:72px;gap:2px;padding-block:4px}
104
105
  @media(max-width:959px){[data-ar-design="remix"] [data-ar="calendar"][data-variant="board"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]{padding-inline:2px}}
package/src/parts/ArCard.css CHANGED
@@ -2,9 +2,11 @@
2
2
  /* ArCard（band＝.v-card＋.v-band＋.v-tabs、elevated・outlined＝.ad-card、plain＝.stat の小さな線の箱） */
3
3
  [data-ar-design="remix"] [data-ar="card"]{font-feature-settings:"palt" 1;background:var(--ar-color-surface);color:var(--ar-color-text)}
4
4
 
5
+ /* clip keeps rounded content inside the card without making it a scroll container.
6
+ Sticky navigation in the body must follow the page scroll. */
5
7
  /* band：白・角丸18・影。帯は54px・18px太字・字間0.08em、テーマ色の120度のやわらかいグラデーションに淡い白の丸 */
6
- [data-ar-design="remix"] [data-ar="card"][data-variant="band"]{border-radius:18px;box-shadow:var(--ar-shadow-card);overflow:hidden}
7
- [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{position:relative;overflow:hidden;flex:none;flex-wrap:nowrap;height:54px;padding:0 16px;justify-content:center;background:linear-gradient(120deg,var(--ar-accent-hi) 0%,var(--ar-accent) 45%,var(--ar-accent-strong) 100%);color:var(--ar-on-accent);text-shadow:var(--ar-on-accent-shadow)}
8
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]{border-radius:18px;box-shadow:var(--ar-shadow-card);overflow:clip}
9
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{position:relative;overflow:clip;flex:none;flex-wrap:nowrap;height:54px;padding:0 18px;justify-content:flex-start;background:linear-gradient(120deg,var(--ar-accent-hi) 0%,var(--ar-accent) 45%,var(--ar-accent-strong) 100%);color:var(--ar-on-accent);text-shadow:var(--ar-on-accent-shadow)}
8
10
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::before,[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
9
11
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::before{right:-30px;top:-46px;width:150px;height:150px;background:rgba(255,255,255,.10)}
10
12
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::after{left:-40px;bottom:-70px;width:140px;height:140px;background:rgba(255,255,255,.07)}
@@ -20,7 +22,7 @@
20
22
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="sm"]>[data-part="body"]{--ar-card-pad-x:12px;padding:12px}
21
23
 
22
24
  /* elevated・outlined：白・角丸18（影か線）。見出しの行は下に線、本文は灰色の13px */
23
- [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"]){border-radius:18px;overflow:hidden}
25
+ [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"]){border-radius:18px;overflow:clip}
24
26
  [data-ar-design="remix"] [data-ar="card"][data-variant="elevated"]{box-shadow:var(--ar-shadow-card)}
25
27
  [data-ar-design="remix"] [data-ar="card"][data-variant="outlined"]{box-shadow:inset 0 0 0 1px var(--ar-color-border)}
26
28
  [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="head"]{gap:8px;flex-wrap:nowrap;padding:12px 16px;border-bottom:1px solid var(--ar-color-border-subtle)}
@@ -32,8 +34,9 @@
32
34
  [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])[data-size="sm"]>[data-part="body"]{--ar-card-pad-x:14px;padding:12px 14px}
33
35
  [data-ar-design="remix"] [data-ar="card"]>[data-part="cover"]{min-height:90px;background:linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent) 45%,var(--ar-accent-strong))}
34
36
  [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]{display:flex;border-top:1px solid var(--ar-color-border-subtle);color:var(--ar-color-text-muted)}
35
- [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>*{flex:1;height:40px;border-radius:0}
36
- [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>*+*{border-left:1px solid var(--ar-color-border-subtle)}
37
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>*{flex:1;min-width:0}
38
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is(button,a,[role="button"],[data-ar="button"]){min-height:40px;border-radius:0}
39
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is(button,a,[role="button"],[data-ar="button"])+:is(button,a,[role="button"],[data-ar="button"]){border-left:1px solid var(--ar-color-border-subtle)}
37
40
 
38
41
  /* plain：中のさらに小さな線の箱（角丸12・線・10/12の余白） */
39
42
  [data-ar-design="remix"] [data-ar="card"][data-variant="plain"]{border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border);padding:10px 12px}
@@ -49,19 +52,29 @@
49
52
  actions in the same flow instead of letting absolute actions cover the title. */
50
53
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{height:auto;min-height:54px;padding-block:8px}
51
54
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="sm"]>[data-part="head"]{height:auto;min-height:46px}
52
- [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="title"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
53
- [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
55
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="title"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
56
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
54
57
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{position:relative;right:auto;top:auto;transform:none;flex-wrap:wrap}
55
58
  /* Text actions sit on the coloured band, so use its foreground rather than
56
59
  the normal surface link colour. Nested action clusters follow the same rule. */
57
- [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"]):not(:disabled,[aria-disabled="true"]){color:var(--ar-on-accent)}
58
- [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)}
60
+ [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"]):not([data-intent],:disabled,[aria-disabled="true"]){color:var(--ar-on-accent)}
61
+ [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([data-intent],:disabled,[aria-disabled="true"]){background:rgba(255,255,255,.16)}
59
62
  /* Form action groups need natural height when buttons wrap. Direct footer
60
63
  buttons retain the segmented card footer used by compact summaries. */
61
- [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"])){padding:12px 18px}
64
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:not(button,a,[role="button"],[data-ar="button"])){padding:12px 18px}
62
65
  [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}
63
66
  @media(max-width:640px){
64
67
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]{min-height:50px;padding-inline:12px}
65
68
  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]>[data-part="title"]{font-size:17px}
66
- [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){display:flex;flex-wrap:wrap;gap:8px}
69
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty)){display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
70
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty))>[data-part="title"]{flex:1 1 auto;text-align:left}
71
+ [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{margin-inline-start:auto;justify-content:flex-end}
67
72
  }
73
+
74
+ /* A conditional actions slot can remain mounted while its content is empty. */
75
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="head"]>[data-part="actions"]:empty{display:none}
76
+
77
+ /* Direct footer actions wrap as complete controls in narrow cards. */
78
+ /* Equal-height cards keep their actions aligned even when descriptions wrap. */
79
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]{flex-wrap:wrap;margin-top:auto}
80
+ [data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>[data-ar="button"]{flex:1 1 140px;height:auto;min-height:44px;white-space:normal;line-height:1.5}
package/src/parts/ArChangedValue.css CHANGED
@@ -28,3 +28,10 @@
28
28
  [data-ar-design="remix"] [data-ar="changed-value"][data-layout="list"] [data-part="arrow"]{margin:0}
29
29
  /* 1.2 text（今の表記そのままの1つの文）：変わったときは変更後と同じ橙の太字 */
30
30
  [data-ar-design="remix"] [data-ar="changed-value"][data-layout="text"][data-state~="changed"]{color:var(--ar-color-warn);font-weight:700}
31
+
32
+ /* Context rows in history are not changes: no strike-through or accent emphasis. */
33
+ [data-ar-design="remix"] [data-ar="changed-value"] [data-part="row"]:not([data-state~="changed"]) :is([data-part="before"],[data-part="after"]){text-decoration:none;color:var(--ar-color-text);font-weight:400}
34
+
35
+ [data-ar-design="remix"] [data-ar="changed-value"][data-rich]>[data-part="before"]{text-decoration:none;padding:8px;border-radius:8px;background:var(--ar-color-bg);color:var(--ar-color-text-secondary)}
36
+ [data-ar-design="remix"] [data-ar="changed-value"][data-rich][data-state~="changed"]>[data-part="after"]{padding:8px;border-radius:8px;font-weight:400}
37
+ [data-ar-design="remix"] [data-ar="changed-value"][data-rich]>:is([data-part="before-label"],[data-part="after-label"]){font-size:12px;font-weight:700;color:var(--ar-color-text-secondary)}
package/src/parts/ArChoiceCard.css CHANGED
@@ -7,6 +7,7 @@
7
7
  大きさ（1.1）：md がキャンバスの値。sm は一回り小さく（設定・一覧の中）、lg は一回り大きく（スマホ・大きな選択）。 */
8
8
  [data-ar-design="remix"] [data-ar="choice-card"]{color:var(--ar-color-text);font-family:var(--ar-font-family);background:#FFFFFF;transition:background-color var(--ar-motion-fast),box-shadow var(--ar-motion-fast),border-color var(--ar-motion-fast),color var(--ar-motion-fast)}
9
9
  [data-ar-design="remix"] [data-ar="choice-card"]:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px}
10
+ [data-ar-design="remix"] [data-ar="choice-card"]>[data-part="chevron"]{color:var(--ar-color-text-secondary)}
10
11
  [data-ar-design="remix"] [data-ar="choice-card"]>[data-part="body"]>[data-part="title"]{gap:8px}
11
12
  [data-ar-design="remix"] [data-ar="choice-card"] [data-part="tag"]{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap}
12
13
  [data-ar-design="remix"] [data-ar="choice-card"] [data-part="tag"][data-tone="ok"]{background:#E6F3EC;color:#1E7A4C}
package/src/parts/ArCollapse.css CHANGED
@@ -17,3 +17,6 @@
17
17
  [data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="header"]>[data-part="header-extra"]{gap:8px;padding:0 14px 0 4px;background:var(--ar-color-surface-alt);font-size:12px;font-weight:500}
18
18
  [data-ar-design="remix"] [data-ar="collapse"][data-ghost]>[data-part="panel"]>[data-part="header"]>[data-part="header-extra"]{background:none}
19
19
  [data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="header"]>[data-part="trigger"]>[data-part="title"]{gap:6px}
20
+ @media (max-width: 767px){
21
+ [data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="body"]{padding-inline:14px}
22
+ }
package/src/parts/ArDescriptions.css CHANGED
@@ -4,6 +4,8 @@
4
4
  [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]{margin-bottom:10px}
5
5
  [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]>[data-part="title"]{font-size:14.5px;font-weight:700}
6
6
  [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]{border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border);overflow:hidden;background:var(--ar-color-surface)}
7
+ /* Long single-column details reserve space for the value instead of stretching labels to 40%. */
8
+ [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]{grid-template-columns:repeat(var(--ar-desc-visible-columns,var(--ar-desc-columns,3)),minmax(0,min(14rem,calc(40% / var(--ar-desc-visible-columns,var(--ar-desc-columns,3))))) minmax(0,1fr))}
7
9
  [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>:is([data-part="label"],[data-part="value"]){padding:10px 12px;border-bottom:1px solid var(--ar-color-border);border-right:1px solid var(--ar-color-border)}
8
10
  [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{background:var(--ar-accent-faint);color:var(--ar-color-text-secondary);font-weight:700;white-space:normal}
9
11
  [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{color:var(--ar-color-text)}
@@ -18,3 +20,9 @@
18
20
  [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="danger"]>[data-part="value"]{color:var(--ar-color-danger-ink)}
19
21
  [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="warn"]>[data-part="value"]{color:var(--ar-color-warn)}
20
22
  [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="ok"]>[data-part="value"]{color:var(--ar-color-ok)}
23
+ /* Narrow detail panels keep the entire value readable, including long explanations. */
24
+ @container ar-descriptions (max-width:480px){
25
+ [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]{grid-template-columns:minmax(0,1fr)}
26
+ [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{padding:8px 12px 4px;border-bottom:0;font-size:12px}
27
+ [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{grid-column:auto;padding:8px 12px 12px}
28
+ }
package/src/parts/ArDocumentBlock.css CHANGED
@@ -5,3 +5,5 @@
5
5
  [data-ar-design="remix"] [data-ar="document-block"]>[data-part="arrow"]>[data-ar="icon"]{width:28px;height:28px;stroke-width:2}
6
6
  [data-ar-design="remix"] [data-ar="document-block"]>[data-part="box"]{margin:8px 0;padding:16px 20px;border-radius:12px;background:var(--ar-color-surface);box-shadow:inset 0 0 0 1px var(--ar-color-border)}
7
7
  [data-ar-design="remix"] [data-ar="document-block"]>[data-part="box"]>[data-part="title"]{margin-bottom:8px;font-size:15px;font-weight:700;line-height:1.5;text-align:center}@media (max-width:499px){[data-ar-design="remix"] [data-ar="document-block"]>[data-part="box"]{padding:12px 14px}}
8
+ [data-ar-design="remix"] [data-ar="document-block"][data-variant="step"]>[data-part="box"]{margin:0;padding:14px 16px}
9
+ [data-ar-design="remix"] [data-ar="document-block"][data-variant="step"]>[data-part="box"]>[data-part="title"]{text-align:start;font-size:13px}
package/src/parts/ArDropdown.css CHANGED
@@ -1,6 +1,6 @@
1
- /* @covers ArDropdown 1.1.0 */
1
+ /* @covers ArDropdown 1.2.0 */
2
2
  /* ArDropdown：シフトの「操作」メニューと同じ形（.pop .mi）。説明つきの項目は .v-pop .r-mi（アイコンの箱・2行）。 */
3
- [data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]{gap:7px;height:38px;padding:0 10px 0 14px;border:0;border-radius:11px;background:var(--ar-accent);color:var(--ar-on-accent);font-size:13.5px;font-weight:700;line-height:normal;text-shadow:var(--ar-on-accent-shadow);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ar-accent) 80%,transparent);transition:background var(--ar-motion-fast)}
3
+ [data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]{gap:7px;height:var(--ar-size-control-md);padding:0 10px 0 14px;border:0;border-radius:11px;background:var(--ar-accent);color:var(--ar-on-accent);font-size:13.5px;font-weight:700;line-height:normal;text-shadow:var(--ar-on-accent-shadow);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ar-accent) 80%,transparent);transition:background var(--ar-motion-fast)}
4
4
  [data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:hover:not(:disabled),[data-ar-design="remix"] [data-ar="dropdown"][data-state~="open"]>[data-part="trigger"]{background:var(--ar-accent-strong)}
5
5
  [data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:focus-visible{outline:0;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ar-accent) 80%,transparent),0 0 0 3px var(--ar-accent-ring)}
6
6
  [data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:disabled{background:#EEF1F5;color:var(--ar-color-text-faint);box-shadow:none;text-shadow:none}
@@ -34,3 +34,13 @@
34
34
  [data-ar-design="remix"] :is([data-ar="shift-grid-menu"]>[data-part="menu"],[data-ar="app-account-menu"])>[data-part="menu-item"]>[data-ar="icon"]{color:var(--ar-color-text-secondary)}
35
35
  [data-ar-design="remix"] [data-ar="shift-grid-menu"]>[data-part="menu"]>[data-part="menu-item"][data-item="delete"]{color:var(--ar-color-danger-ink)}
36
36
  [data-ar-design="remix"] [data-ar="shift-grid-menu"]>[data-part="menu"]>[data-part="menu-item"][data-item="delete"]>[data-ar="icon"]{color:inherit}
37
+
38
+ /* Operations keep their purpose visible even when unavailable. */
39
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][data-tone="edit"]:not([aria-disabled="true"])>[data-part="icon-box"]{background:#E9F6EE;color:#206C49}
40
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][data-tone="edit"]>[data-part="text"]>[data-part="label"]{color:#206C49}
41
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"]>[data-part="text"]>[data-part="disabled-reason"]{margin-top:3px;font-size:11px;line-height:1.5;white-space:pre-line;color:var(--ar-color-text-secondary)}
42
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][aria-disabled="true"]>[data-part="text"]>[data-part="label"]{color:var(--ar-color-text-muted)}
43
+ @media(max-width:599px){
44
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"][data-rich]>[data-part="item"]{padding:9px 10px;min-height:48px}
45
+ [data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"]>[data-part="text"]>:is([data-part="description"],[data-part="disabled-reason"]){font-size:12px;line-height:1.5}
46
+ }
package/src/parts/ArField.css CHANGED
@@ -3,10 +3,10 @@
3
3
  必須は .req（11px 700・赤い淡い地・角丸4）、間違いは .derr（12.5px 600・上に6px）、説明は .ad-help（12px・上に4px）。 */
4
4
  [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)}
5
5
  [data-ar-design="remix"] [data-ar="field"][data-layout="stacked"]>[data-part="label"]{margin-bottom:6px}
6
- [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{column-gap:14px;align-items:center}
7
- [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}
6
+ [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{column-gap:14px;align-items:start}
7
+ [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;padding-top:8px}
8
8
  [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}
9
- [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)}
9
+ [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);white-space:pre-line;overflow-wrap:anywhere}
10
10
  [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)}
11
11
  [data-ar-design="remix"] [data-ar="field"]>[data-part="control"]>[data-part="error"]>[data-ar="icon"]{flex:none}
12
12
  /* toolbar：シフト画面の .v-st（12.5px 600・mute・入力との間 8px） */
@@ -18,5 +18,10 @@
18
18
  @container ar-field (max-width:480px){
19
19
  [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"],
20
20
  [data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="control"]{grid-column:1/-1;min-width:0}
21
- [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}
21
+ [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;padding-top:0}
22
22
  }
23
+
24
+ /* Context help belongs beside the field label, independent of control width. */
25
+ [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>label{display:inline-flex;align-items:center;gap:4px;min-width:0}
26
+ [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>label>[data-part="required"]{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}
27
+ [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>[data-ar="info"]{flex:none}
package/src/parts/ArFlagGroup.css CHANGED
@@ -1,7 +1,9 @@
1
- /* @covers ArFlagGroup 1.1.0, ArFlagView 1.0.0 */
1
+ /* @covers ArFlagGroup 1.2.0, ArFlagView 1.0.0 */
2
2
  /* チェックの並びの間は _choice.css（ArCheckboxGroup と同じ段） */
3
3
  /* 立っている項目は小さな札で並べる */
4
4
  [data-ar-design="remix"] [data-ar="flag-view"]{gap:4px}
5
- [data-ar-design="remix"] [data-ar="flag-view"]>[data-part="item"]{height:24px;padding:0 9px;border-radius:7px;background:var(--ar-color-surface-alt);box-shadow:inset 0 0 0 1px var(--ar-color-border);color:var(--ar-color-text-secondary);font-size:12px;font-weight:600;line-height:24px}
5
+ [data-ar-design="remix"] [data-ar="flag-view"]>[data-part="item"]{min-height:24px;height:auto;max-width:100%;overflow-wrap:anywhere;padding:0 9px;border-radius:7px;background:var(--ar-color-surface-alt);box-shadow:inset 0 0 0 1px var(--ar-color-border);color:var(--ar-color-text-secondary);font-size:12px;font-weight:600;line-height:24px}
6
6
  [data-ar-design="remix"] [data-ar="flag-view"]>[data-part="empty"]{color:var(--ar-color-text-faint);font-size:13px}
7
7
  [data-ar-design="remix"] [data-ar="flag-view"]{font-feature-settings:"palt" 1}
8
+
9
+ [data-ar-design="remix"] [data-ar="flag-group"][data-direction="vertical"][data-variant="card"]{align-items:stretch}