@s_and_a/arrow-ui-design-classic 0.1.1 → 0.1.3

package/dist/covers.generated.d.ts

@@ -5,7 +5,7 @@ export declare const covers: {
     readonly ArAnchor: "1.0.0";
     readonly ArAppFooter: "1.0.0";
     readonly ArAppHeader: "1.1.0";
-    readonly ArApprovalFlow: "1.0.0";
+    readonly ArApprovalFlow: "1.2.0";
     readonly ArAuthPanel: "1.0.0";
     readonly ArAutoComplete: "1.0.0";
     readonly ArAvatar: "1.1.1";
@@ -16,7 +16,7 @@ export declare const covers: {
     readonly ArBottomNav: "1.1.0";
     readonly ArBreadcrumb: "1.0.0";
     readonly ArButton: "1.0.0";
-    readonly ArCalendar: "1.1.0";
+    readonly ArCalendar: "1.2.0";
     readonly ArCard: "1.1.0";
     readonly ArCarousel: "1.0.0";
     readonly ArCascader: "1.0.0";
@@ -31,11 +31,11 @@ export declare const covers: {
     readonly ArCompact: "1.0.0";
     readonly ArDateInput: "1.1.0";
     readonly ArDatePicker: "1.1.0";
-    readonly ArDateRange: "1.1.0";
+    readonly ArDateRange: "1.2.0";
     readonly ArDateTimeInput: "1.1.0";
-    readonly ArDateView: "1.0.0";
+    readonly ArDateView: "1.1.0";
     readonly ArDaySummary: "1.0.0";
-    readonly ArDescriptions: "1.0.0";
+    readonly ArDescriptions: "1.1.0";
     readonly ArDivider: "1.0.0";
     readonly ArDocumentBlock: "1.0.0";
     readonly ArDrawer: "1.1.0";
@@ -71,7 +71,7 @@ export declare const covers: {
     readonly ArMonthDayInput: "1.1.0";
     readonly ArNotification: "1.0.0";
     readonly ArNotificationHost: "1.0.0";
-    readonly ArOrgChart: "1.0.0";
+    readonly ArOrgChart: "1.1.0";
     readonly ArOtpInput: "1.0.0";
     readonly ArPageHeading: "1.0.0";
     readonly ArPagination: "1.0.0";
@@ -84,8 +84,10 @@ export declare const covers: {
     readonly ArPointerBadge: "1.0.0";
     readonly ArPopconfirm: "1.0.0";
     readonly ArPopover: "1.0.0";
+    readonly ArProfileCard: "1.0.0";
     readonly ArProgress: "1.0.0";
     readonly ArPunchButton: "1.0.0";
+    readonly ArPunchPanel: "1.0.0";
     readonly ArQRCode: "1.0.0";
     readonly ArRadio: "1.1.0";
     readonly ArRadioGroup: "1.2.0";
@@ -112,7 +114,7 @@ export declare const covers: {
     readonly ArStepSelect: "1.0.0";
     readonly ArSubItem: "1.0.0";
     readonly ArSwitch: "1.1.0";
-    readonly ArTable: "1.4.0";
+    readonly ArTable: "1.5.0";
     readonly ArTableHeader: "1.0.0";
     readonly ArTabs: "1.1.0";
     readonly ArTag: "1.0.0";
@@ -120,11 +122,11 @@ export declare const covers: {
     readonly ArTextarea: "1.1.0";
     readonly ArTextInput: "1.1.0";
     readonly ArThumbnail: "1.1.0";
-    readonly ArTimeChart: "1.0.0";
+    readonly ArTimeChart: "1.1.0";
     readonly ArTimeInput: "1.1.0";
     readonly ArTimeline: "1.0.0";
     readonly ArTimePicker: "1.0.0";
-    readonly ArTimeRange: "1.0.0";
+    readonly ArTimeRange: "1.1.0";
     readonly ArTitle: "1.0.0";
     readonly ArToast: "1.0.0";
     readonly ArTooltip: "1.1.0";

package/dist/covers.generated.js

@@ -6,7 +6,7 @@ export const covers = {
     ArAnchor: "1.0.0",
     ArAppFooter: "1.0.0",
     ArAppHeader: "1.1.0",
-    ArApprovalFlow: "1.0.0",
+    ArApprovalFlow: "1.2.0",
     ArAuthPanel: "1.0.0",
     ArAutoComplete: "1.0.0",
     ArAvatar: "1.1.1",
@@ -17,7 +17,7 @@ export const covers = {
     ArBottomNav: "1.1.0",
     ArBreadcrumb: "1.0.0",
     ArButton: "1.0.0",
-    ArCalendar: "1.1.0",
+    ArCalendar: "1.2.0",
     ArCard: "1.1.0",
     ArCarousel: "1.0.0",
     ArCascader: "1.0.0",
@@ -32,11 +32,11 @@ export const covers = {
     ArCompact: "1.0.0",
     ArDateInput: "1.1.0",
     ArDatePicker: "1.1.0",
-    ArDateRange: "1.1.0",
+    ArDateRange: "1.2.0",
     ArDateTimeInput: "1.1.0",
-    ArDateView: "1.0.0",
+    ArDateView: "1.1.0",
     ArDaySummary: "1.0.0",
-    ArDescriptions: "1.0.0",
+    ArDescriptions: "1.1.0",
     ArDivider: "1.0.0",
     ArDocumentBlock: "1.0.0",
     ArDrawer: "1.1.0",
@@ -72,7 +72,7 @@ export const covers = {
     ArMonthDayInput: "1.1.0",
     ArNotification: "1.0.0",
     ArNotificationHost: "1.0.0",
-    ArOrgChart: "1.0.0",
+    ArOrgChart: "1.1.0",
     ArOtpInput: "1.0.0",
     ArPageHeading: "1.0.0",
     ArPagination: "1.0.0",
@@ -85,8 +85,10 @@ export const covers = {
     ArPointerBadge: "1.0.0",
     ArPopconfirm: "1.0.0",
     ArPopover: "1.0.0",
+    ArProfileCard: "1.0.0",
     ArProgress: "1.0.0",
     ArPunchButton: "1.0.0",
+    ArPunchPanel: "1.0.0",
     ArQRCode: "1.0.0",
     ArRadio: "1.1.0",
     ArRadioGroup: "1.2.0",
@@ -113,7 +115,7 @@ export const covers = {
     ArStepSelect: "1.0.0",
     ArSubItem: "1.0.0",
     ArSwitch: "1.1.0",
-    ArTable: "1.4.0",
+    ArTable: "1.5.0",
     ArTableHeader: "1.0.0",
     ArTabs: "1.1.0",
     ArTag: "1.0.0",
@@ -121,11 +123,11 @@ export const covers = {
     ArTextarea: "1.1.0",
     ArTextInput: "1.1.0",
     ArThumbnail: "1.1.0",
-    ArTimeChart: "1.0.0",
+    ArTimeChart: "1.1.0",
     ArTimeInput: "1.1.0",
     ArTimeline: "1.0.0",
     ArTimePicker: "1.0.0",
-    ArTimeRange: "1.0.0",
+    ArTimeRange: "1.1.0",
     ArTitle: "1.0.0",
     ArToast: "1.0.0",
     ArTooltip: "1.1.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-classic",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ARROW UI の design：classic",
   "type": "module",
   "sideEffects": [
@@ -25,10 +25,10 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
-    "@s_and_a/arrow-ui": "0.1.1"
+    "@s_and_a/arrow-ui": "0.1.3"
   },
   "dependencies": {
-    "@s_and_a/arrow-ui-tokens": "0.1.1"
+    "@s_and_a/arrow-ui-tokens": "0.1.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/src/parts/ArApprovalFlow.css

@@ -1,4 +1,4 @@
-/* @covers ArApprovalFlow 1.0.0 */
+/* @covers ArApprovalFlow 1.2.0 */
 /* 今の ARROW の承認フロー（Config/AdmitFlowView.vue・Workflow/ApprovalFlow.vue）：#F0F0F0 の地・角丸8・内側8px、中央寄せ。
    札は白・角丸16・内側6px・最小幅90・14px 600、下に人（10px #5C5C5C）と状態（10px 600）。札の間は「→」（#6C757D 16px bold）。
    申請＝#585858 の2px線、承認済＝#69AF8A、いまの番（承認待ち）＝#ED9118 の点線、差し戻し＝#CA3A31、まだ＝#797C7E・400・線なし。
@@ -10,10 +10,17 @@
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="sep"]::before{content:"→"}
 [data-ar-design="classic"] [data-ar="approval-flow"] :is([data-part="start"],[data-part="step"]){flex-direction:column;justify-content:center;gap:5px;min-width:90px;min-height:26px;padding:6px;border-radius:16px;background:#fff;box-sizing:border-box;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="start"]{color:#585858;border:2px solid #585858}
-[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="start"]>[data-ar="icon"],[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]>[data-part="title"]>[data-ar="icon"]{display:none}
-[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]>[data-part="who"]{color:#5C5C5C;font-size:10px;white-space:normal}
+[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="start"]>[data-ar="icon"],[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]>[data-part="body"]>[data-part="title"]>[data-ar="icon"]{display:none}
+[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]>[data-part="body"]>[data-part="who"]{color:#5C5C5C;font-size:10px;white-space:normal}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]>[data-part="status"]{position:static;width:auto;height:auto;overflow:visible;clip:auto;color:#5C5C5C;font-size:10px;font-weight:600}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"][data-state="done"]{color:#69AF8A;border:2px solid #69AF8A}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"][data-state="current"]{color:#ED9118;border:2px dashed #ED9118}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"][data-state="denied"]{color:#CA3A31;border:2px solid #CA3A31}
+[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"][data-state="blocked"]{color:#874D00;border:2px solid #FAAD14;background:#FFFBE6}
 [data-ar-design="classic"] [data-ar="approval-flow"] [data-part="step"]:is([data-state="todo"],[data-state="skipped"]){color:#797C7E;font-weight:400}@media (max-width:750px){[data-ar-design="classic"] [data-ar="approval-flow"] :is([data-part="start"],[data-part="step"]){min-width:68px;min-height:23px;padding:4px;border-radius:14px;font-size:11px}}@media (max-width:600px){[data-ar-design="classic"] [data-ar="approval-flow"]{flex-direction:column;gap:1px}}
+
+[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="body"]{flex-direction:column;gap:5px}
+[data-ar-design="classic"] [data-ar="approval-flow"][data-detailed] [data-part="step"]{padding:10px;min-width:160px}
+[data-ar-design="classic"] [data-ar="approval-flow"] [data-part="details"]{color:#5C5C5C;font-size:12px;line-height:1.5}
+@media(max-width:600px){[data-ar-design="classic"] [data-ar="approval-flow"][data-detailed] [data-part="item"]{flex-direction:column;align-items:stretch;width:100%}[data-ar-design="classic"] [data-ar="approval-flow"][data-detailed] [data-part="sep"]{transform:rotate(90deg)}}
+@media(max-width:600px){[data-ar-design="classic"] [data-ar="approval-flow"][data-detailed] [data-part="sep"]{transform:none;align-self:center;width:20px}[data-ar-design="classic"] [data-ar="approval-flow"][data-detailed] [data-part="sep"]::before{display:inline-block;transform:rotate(90deg)}}

package/src/parts/ArCalendar.css

@@ -1,4 +1,4 @@
-/* @covers ArCalendar 1.1.0 */
+/* @covers ArCalendar 1.2.0 */
 /* ArCalendar：今の ARROW の Calendar.vue（シフト・勤怠のカレンダー）。7列、曜日の見出しは高さ30・15px 太さ600・淡いテーマ色の地（シフト #F2F8FC）・日は赤 / 土は青、
    マスは高さ100・余白3・枠 0.5px lightgray・中央寄せ、日付は 30px の丸（#F0F0F0・14px 太さ600）、今日はテーマ色の丸に白、選んだ日は 3px のテーマ色の枠と #D9EEFF の地、
    乗せると #E6F3FC、前後の月は lightgray、行事は高さ18・角丸4・色の帯に白い 10px（refs/classic/arrow-Calendar*.png・rules/arrow-Calendar.css を実測）。
@@ -67,3 +67,9 @@
 [data-ar-design="classic"] [data-ar="calendar"][data-size="mini"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]>[data-part="event"]{align-self:center;height:18px;padding:0 4px;border-radius:4px;background:var(--ar-accent);color:#fff;font-size:10px;line-height:18px;white-space:nowrap}
 [data-ar-design="classic"] [data-ar="calendar"][data-size="mini"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]>[data-part="note"]{align-self:center;max-width:100%;overflow:hidden;color:#000;font-size:11px;line-height:14px;white-space:nowrap;text-overflow:ellipsis}
 [data-ar-design="classic"] [data-ar="calendar"][data-size="mini"]>[data-part="footer"]{display:flex;flex-wrap:wrap;gap:12px;padding-top:10px;font-size:12px;line-height:18px}
+
+[data-ar-design="classic"] [data-ar="calendar"] [data-part="times"]{gap:4px;padding-top:2px}
+[data-ar-design="classic"] [data-ar="calendar"] [data-part="time-range"]{font:600 10.5px/1.3 var(--ar-font-family-numeric);font-variant-numeric:tabular-nums;color:rgba(0,0,0,.85)}
+[data-ar-design="classic"] [data-ar="calendar"] [data-part="time-end"]{color:var(--ar-color-text-secondary)}
+
+[data-ar-design="classic"] [data-ar="calendar"][data-variant="board"] [data-part="foot"]>[data-ar="tag"]{max-width:100%;height:auto;min-height:16px;margin-inline-end:0;padding:1px 2px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:14px}

package/src/parts/ArCard.css

@@ -26,3 +26,14 @@
 [data-ar-design="classic"] [data-ar="card"][data-flush]>[data-part="body"]{padding:0}
 [data-ar-design="classic"] [data-ar="card"][data-flush]:not([data-variant="band"]){padding:0}
 [data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="body"]:empty{display:none}
+
+/* Retain classic's compact band without clipping long page titles or actions. */
+[data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="head"]{height:auto;min-height:36px;flex-wrap:wrap}
+[data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){height:auto;min-height:38px}
+[data-ar-design="classic"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="title"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
+[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}

package/src/parts/ArDateInput.css

@@ -1,4 +1,4 @@
-/* @covers ArDateInput 1.1.0, ArDateRange 1.1.0 */
+/* @covers ArDateInput 1.1.0, ArDateRange 1.2.0 */
 /* ArDateInput（ui-Dates）：年は Select（77×32・角丸6・枠 #D9D9D9・14px・右に 12px の ∨ rgba(0,0,0,.25)）、
    単位は間を空けず 13px の黒（行32）、月日は 32×32 の Input（余白0・中央）。不正な日付は月日の枠が #D10C1D。 */
 [data-ar-design="classic"] [data-ar="date-input"]{gap:0;font:13px/32px "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;color:#000}

package/src/parts/ArDateView.css

@@ -1,4 +1,4 @@
-/* @covers ArDateView 1.0.0 */
+/* @covers ArDateView 1.1.0 */
 /* ArDateView（今の Component/DateView：13px・行の高さ13px・黒、曜日は灰 gray、土曜 blue、日曜・祝日 red） */
 [data-ar-design="classic"] [data-ar="date-view"]{color:#000;font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,"ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;font-size:13px;font-weight:400;line-height:13px}
 [data-ar-design="classic"] [data-ar="date-view"]>*>[data-part="weekday"]{color:gray}

package/src/parts/ArDescriptions.css

@@ -1,4 +1,4 @@
-/* @covers ArDescriptions 1.0.0 */
+/* @covers ArDescriptions 1.1.0 */
 /* ArDescriptions（素の ant-design-vue 4 の Descriptions。plain＝既定：「ラベル：値」14px、行の下16。bordered（small）＝角丸8・rgba(5,5,5,.06) の枠、ラベルは rgba(0,0,0,.02) の地・余白 8/16、1行の高さ 38） */
 /* 文字は ARROW の地の書体（今の画面は div・td などに游ゴシックが当たり、antd の書体は外の箱だけ）。 */
 [data-ar-design="classic"] [data-ar="descriptions"]{color:rgba(0,0,0,.88);font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;font-size:14px;line-height:22px}
@@ -8,9 +8,14 @@
 [data-ar-design="classic"] [data-ar="descriptions"][data-variant="plain"]>[data-part="list"]>[data-part="item"]>[data-part="label"]::after{content:":";margin:0 8px 0 2px}
 [data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]{border:1px solid rgba(5,5,5,.06);border-radius:8px;overflow:hidden}
 /* 区切りの線は 1px のすき間に影で描く（最後の行・最後の列の外側には線を足さない＝antd の表と同じ高さ 38）。 */
-[data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]{gap:1px;grid-template-columns:repeat(var(--ar-desc-columns,3),auto auto)}
+[data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]{gap:1px;grid-template-columns:repeat(var(--ar-desc-visible-columns,var(--ar-desc-columns,3)),minmax(0,2fr) minmax(0,3fr))}
 [data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>:is([data-part="label"],[data-part="value"]){padding:8px 16px;box-shadow:1px 0 0 rgba(5,5,5,.06),0 1px 0 rgba(5,5,5,.06),1px 1px 0 rgba(5,5,5,.06)}
-[data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{background:rgba(0,0,0,.02);color:rgba(0,0,0,.88);white-space:nowrap}
+[data-ar-design="classic"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{background:rgba(0,0,0,.02);color:rgba(0,0,0,.88);white-space:normal}
+[data-ar-design="classic"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]{grid-template-columns:repeat(var(--ar-desc-visible-columns,var(--ar-desc-columns,3)),minmax(0,1fr));row-gap:12px}
+[data-ar-design="classic"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]{gap:4px;padding-bottom:0}
+[data-ar-design="classic"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{color:rgba(0,0,0,.65);font-size:13px;white-space:normal}
+[data-ar-design="classic"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]>[data-part="label"]::after{content:none}
+[data-ar-design="classic"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{font-weight:400;line-height:1.7}
 [data-ar-design="classic"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="danger"]>[data-part="value"]{color:#FF4D4F}
 [data-ar-design="classic"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="warn"]>[data-part="value"]{color:#FAAD14}
 [data-ar-design="classic"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="ok"]>[data-part="value"]{color:#3F8600}

package/src/parts/ArList.css

@@ -16,3 +16,7 @@
 [data-ar-design="classic"] [data-ar="list"]>[data-part="viewport"]>[data-part="group"]>[data-part="items"]>[data-part="item"]>[data-part="avatar"]{align-self:flex-start}
 [data-ar-design="classic"] [data-ar="list"]>[data-part="viewport"]>[data-part="group"]>[data-part="items"]>[data-part="item"][data-state~="off"]>[data-part="meta"]{color:rgba(0,0,0,.25)}
 [data-ar-design="classic"] [data-ar="list"][data-size="sm"]>[data-part="viewport"]>[data-part="group"]>[data-part="items"]>[data-part="item"]{padding:8px 16px}
+
+@container ar-list (max-width:480px){
+  [data-ar-design="classic"] [data-ar="list"]>[data-part="viewport"]>[data-part="group"]>[data-part="items"]>[data-part="item"]>[data-part="actions"]{margin-left:0;padding-right:0}
+}

package/src/parts/ArModal.css

@@ -76,3 +76,8 @@
   [data-ar-design="classic"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]{border-radius:0}
   [data-ar-design="classic"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="close"]{order:0;margin-left:auto}
 }
+/* 小型の完了通知でもスマホの確定操作を十分な幅に揃える。 */
+@media(max-width:640px){
+  [data-ar-design="classic"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]{flex:1}
+  [data-ar-design="classic"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="button"]{flex:1}
+}

package/src/parts/ArOrgChart.css

@@ -1,4 +1,4 @@
-/* @covers ArOrgChart 1.0.0 */
+/* @covers ArOrgChart 1.1.0 */
 /* ArOrgChart：今の ARROW に組織図はない（部署/店舗の階層は表と「└」の字下げ）。素の antd 4 と ARROW の材料で作る：
    地は白（#F0F0F0 の1pxの枠・角丸8）、札は antd の Card の small（白・#D9D9D9 の1px・角丸8・余白 8px 12px）、いちばん上の札はページのテーマ色の1pxの枠、
    名前は ARROW のリンクの色 #4F92C2 の 700 13px（下線）、ID と人数は 12px rgba(0,0,0,.45)／.88、つなぐ線は #D9D9D9 の1px、

package/src/parts/ArPageHeading.css

@@ -1,5 +1,5 @@
 /* @covers ArPageHeading 1.0.0 */
 [data-ar-design="classic"] [data-ar="page-heading"]{font-weight:600;font-size:18px;line-height:36px}
-[data-ar-design="classic"] [data-ar="page-heading"][data-type="bar"]{height:36px;background:var(--ar-accent);color:white}
+[data-ar-design="classic"] [data-ar="page-heading"][data-type="bar"]{min-height:36px;height:auto;background:var(--ar-accent);color:white}
 [data-ar-design="classic"] [data-ar="page-heading"][data-type="text"]{font-size:22px;line-height:22px;color:#000}
 @media(max-width:499px){[data-ar-design="classic"] [data-ar="page-heading"][data-type="text"]{font-size:18px}}

package/src/parts/ArPayslip.css

@@ -43,3 +43,15 @@
 [data-ar-design="classic"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"]>dd>[data-part="unit"]{margin-left:1px;font-size:12px}
 [data-ar-design="classic"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"]>dd>[data-part="diff"]{margin-left:6px}
 [data-ar-design="classic"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"][data-state~="emphasis"]>dd{font-weight:600}
+
+/* 紙面を縮小せず、classic の罫線と色を維持して狭い画面にも並べる。 */
+[data-ar-design="classic"] [data-ar="payslip"]>[data-part="head"]>[data-part="title"]{flex:0 1 310px;height:auto;min-height:35px}
+[data-ar-design="classic"] [data-ar="payslip"]>[data-part="columns"]{row-gap:16px}
+[data-ar-design="classic"] [data-ar="payslip"] [data-part="section"] :is(th,td){height:auto;min-height:33px}
+[data-ar-design="classic"] [data-ar="payslip"] [data-part="label"]{white-space:normal;line-height:1.5;padding-block:5px}
+[data-ar-design="classic"] [data-ar="payslip"] [data-part="section-title"]{padding-inline:12px}
+[data-ar-design="classic"] [data-ar="payslip"]>[data-part="totals"]{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
+[data-ar-design="classic"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"]>:is(dt,dd){white-space:normal;overflow-wrap:anywhere}
+@media(max-width:767px){[data-ar-design="classic"] [data-ar="payslip"]{padding:16px 12px}}
+
+[data-ar-design="classic"] [data-ar="payslip"] [data-part="row"]{align-items:stretch}

package/src/parts/ArPeriodNav.css

@@ -34,3 +34,7 @@
 [data-ar-design="classic"] [data-ar="period-nav"][data-inverse]>[data-part="center"]>[data-part="label"]{height:36px;padding:0;border:0;background:none;color:#fff;font-size:18px;line-height:36px}
 /* 1.1：祝日は今の DateChanger と同じく曜日の文字を赤にするだけ（名前は出さない。読み上げには入る） */
 [data-ar-design="classic"] [data-ar="period-nav"]>[data-part="center"]>[data-part="label"]>[data-part="holiday"]{display:none}
+
+/* Employee titles may wrap; arrows retain their own column. */
+[data-ar-design="classic"] [data-ar="period-nav"][data-inverse]>[data-part="center"]>[data-part="label"]{height:auto;min-height:36px;font-size:18px;line-height:1.5}
+[data-ar-design="classic"] [data-ar="period-nav"][data-size="md"]>[data-part="center"]>[data-part="label"]{height:auto;min-height:34px;line-height:1.5}

package/src/parts/ArProfileCard.css

@@ -0,0 +1,3 @@
+/* @covers ArProfileCard 1.0.0 */
+/* The same semantic profile uses classic component styling. */
+[data-ar-design="classic"] [data-ar="profile-card"]{color:var(--ar-color-text)}

package/src/parts/ArPunchButton.css

@@ -19,3 +19,10 @@
 [data-ar-design="classic"] [data-ar="punch-button"][data-state~="loading"]>[data-part="button"]{cursor:progress}
 [data-ar-design="classic"] [data-ar="punch-button"]>[data-part="reason"]{width:350px;max-width:100%;color:rgba(0,0,0,.45);font-size:12px;line-height:1.5}
 [data-ar-design="classic"] [data-ar="punch-button"][data-size="md"]>[data-part="reason"]{width:200px}
+/* スマホの2列でも旧デザインの人物アイコンと白いラベルを切らない。 */
+@media(max-width:640px){
+  [data-ar-design="classic"] [data-ar="punch-button"]>[data-part="button"]{padding:10px}
+  [data-ar-design="classic"] [data-ar="punch-button"][data-size="lg"]>[data-part="button"]{height:200px}
+  [data-ar-design="classic"] [data-ar="punch-button"][data-size="lg"]>[data-part="button"]>[data-part="label"]{font-size:18px;line-height:30px}
+  [data-ar-design="classic"] [data-ar="punch-button"]>[data-part="button"]>[data-part="icon"]{width:min(125px,100%);height:125px;margin-top:15px}
+}

package/src/parts/ArPunchPanel.css

@@ -0,0 +1,2 @@
+/* @covers ArPunchPanel 1.0.0 */
+[data-ar-design="classic"] [data-ar="punch-panel"] [data-part="clock"]{font-size:clamp(22px,4vw,48px);font-weight:400;line-height:1.5;color:#333}

package/src/parts/ArTable.css

@@ -1,9 +1,11 @@
-/* @covers ArTable 1.4.0 */
+/* @covers ArTable 1.5.0 */
 /* ArTable（今の ARROW の表 Component/Table：見出しは白地・テーマ色の1px枠・中央・13px、行は上に #E8E8E8 の線だけ、行高32。並べ替えは ▲▼（#BFBFBF・向きだけ #1677FF）。チェックは灰枠 #808080） */
 [data-ar-design="classic"] [data-ar="table"]{color:rgba(0,0,0,.65);font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,"ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;font-size:13px;line-height:13px}
 /* 今の表は table-layout:fixed・幅100%（幅を決めない列は同じ幅に分ける。行の操作の列も1列として数える）。操作のボタンは左に寄せる */
 [data-ar-design="classic"] [data-ar="table"]>[data-part="viewport"]>[data-part="table"]{width:100%;table-layout:fixed;background:#fff}
 [data-ar-design="classic"] [data-ar="table"]>[data-part="viewport"]>[data-part="table"] :is(th,td,col)[data-col="actions"]{width:auto;text-align:left}
+/* 操作列の幅は内容から確保する。固定幅の列が viewport を超えても、操作列が 0px にならない。 */
+[data-ar-design="classic"] [data-ar="table"]>[data-part="viewport"]>[data-part="table"]:has(>colgroup>col[data-col="actions"]){table-layout:auto}
 [data-ar-design="classic"] [data-ar="table"] td>[data-part="actions"]{justify-content:flex-start}
 [data-ar-design="classic"] [data-ar="table"] [data-part="header-cell"]{height:35px;padding:6px 8px;border:1px solid var(--ar-accent);border-right:0;background:#fff;color:rgba(0,0,0,.65);font-size:13px;font-weight:400;line-height:20px;text-align:center!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 [data-ar-design="classic"] [data-ar="table"] [data-part="header-cell"]:last-child{border-right:1px solid var(--ar-accent)}
@@ -101,3 +103,7 @@
 [data-ar-design="classic"] [data-ar="table"] td>[data-part="actions"][data-kind="edit"]{gap:4px}
 /* 1.4：行ぜんぶを1つのセル（今の UiTableCell(colspan) の案内の行：ふつうのセルと同じ字で、折り返す） */
 [data-ar-design="classic"] [data-ar="table"] td[data-full]{white-space:normal;text-overflow:clip}
+
+/* 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}

package/src/parts/ArTimeChart.css

@@ -1,4 +1,4 @@
-/* @covers ArTimeChart 1.0.0 */
+/* @covers ArTimeChart 1.1.0 */
 /* ArTimeChart：今の ARROW の勤怠の個人の「チャート」（View/Manager/AttendanceEach/MonthlyChart.vue・scoped の CSS を実測）。ARROW の Table（theme attendance）：
    見出しは白・テーマ色の1pxの枠・13px rgba(0,0,0,.65)・高さ35、「日付」「勤務形態」は各 110px、時刻の列は 600px 以上で1時間ごとに lightgray の線と 13px の時刻（線の左下に寄せる）。
    行は下に #E8E8E8 の線、日付と形態は真ん中寄せ 13px。帯は行の中で上から 深夜（15px・#6126A5）・残業（15px：法定内 #FFA8A8・法定外 #FF5656・週 #BE3F3F・月 #742828・60時間超 #DB0000）・
@@ -51,3 +51,11 @@
 [data-ar-design="classic"] [data-ar="time-chart"] [data-kind="break"]{background:#fff}
 [data-ar-design="classic"] [data-ar="time-chart"]>[data-part="legend"] [data-kind="break"]{box-shadow:inset 0 0 0 1px lightgray}
 [data-ar-design="classic"] [data-ar="time-chart"] [data-kind="missing"]{background:repeating-linear-gradient(90deg,#FFCCCC 0 4px,#fff 4px 8px);box-shadow:inset 0 0 0 1px #FF5656}
+
+[data-ar-design="classic"] [data-ar="time-chart"]>[data-part="grid"]>[data-part="row"]>[data-part="lane"]>[data-ar="tooltip"]>[data-part="bar"]:is([data-kind="preover"],[data-kind="outhol"],[data-kind="lawhol"],[data-kind="break"],[data-kind="missing"])>[data-part="bar-text"]{color:#332E27}
+
+[data-ar-design="classic"] [data-ar="time-chart"][data-mode="day"]>[data-part="grid"]{grid-template-columns:110px minmax(max(600px,var(--ar-chart-tick-width,0px)),1fr)}
+
+[data-ar-design="classic"] [data-ar="time-chart"]{--ar-chart-track-height:22px;--ar-chart-track-bar-height:16px}
+[data-ar-design="classic"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]{grid-template-columns:220px minmax(max(600px,var(--ar-chart-tick-width,0px)),1fr)}
+@media(max-width:600px){[data-ar-design="classic"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]{grid-template-columns:112px minmax(max(600px,var(--ar-chart-tick-width,0px)),1fr)}[data-ar-design="classic"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]>[data-part="row"]>[data-part="row-label"]{grid-template-columns:minmax(0,1fr);gap:4px;padding:6px 8px;align-content:center}}

package/src/parts/ArTimeInput.css

@@ -1,4 +1,4 @@
-/* @covers ArTimeInput 1.1.0, ArTimeRange 1.0.0, ArDurationInput 1.1.0 */
+/* @covers ArTimeInput 1.1.0, ArTimeRange 1.1.0, ArDurationInput 1.1.0 */
 /* ArTimeInput（ui-Time）。classic は forms で fields: "split"・dayToggle: "link"（今の形）を選ぶ。
    下の single（1つの箱）の決まりは、forms を外したときの形（箱の値は今の Input と同じ）。 */
 [data-ar-design="classic"] [data-ar="time-input"]{height:32px;align-items:center;gap:3px;border:0;border-radius:0;background:none;box-shadow:none;font:13px/32px "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;color:#000;overflow:visible}

package/src/parts/_product.css

@@ -77,3 +77,11 @@
 @import "./product/workflow.css";
 @import "./product/year.css";
 @import "./product/yearmonth.css";
+
+/* Native authentication cards own their frame; keep page insets in both skins. */
+[data-ar-design="classic"] .login_wrapper:has([data-ar="auth-panel"]):not([data-ui-fixed], [data-ui-fixed] *) { min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:48px 20px 32px; }
+[data-ar-design="classic"] .login:has([data-ar="auth-panel"]):not([data-ui-fixed], [data-ui-fixed] *) { width:100%;max-width:none;margin:0; }
+
+@media(max-width:767px) {
+  [data-ar-design="classic"] .login_wrapper:has([data-ar="auth-panel"]):not([data-ui-fixed], [data-ui-fixed] *) { min-height:0;justify-content:flex-start;padding:32px 20px; }
+}

package/src/parts/product/box.css

@@ -114,19 +114,7 @@
 .v-leave-to:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
   opacity: 0;
 }
-html:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
-  overflow: hidden !important;
-}
-body:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
-  width: 100% !important;
-  overflow-x: auto !important;
-  overflow-y: auto !important;
-  overflow-scrolling: touch;
-  -webkit-overflow-scrolling: touch;
-}
-*:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
-  outline: none !important;
-}
+/* Document scrolling belongs to the host; only an open dialog locks it. */
 *
   :where([data-ar-design="classic"], [data-ar-design="classic"] *)::-webkit-scrollbar {
   width: 8px !important;
@@ -1958,11 +1946,11 @@ table.list-style
   background-color: #dddddd;
 }
 .check_wrap
-  input[type="checkbox"]:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
+  input[type="checkbox"]:not([data-part="input"]):where([data-ar-design="classic"], [data-ar-design="classic"] *) {
   display: none;
 }
 .check_wrap
-  input[type="checkbox"]
+  input[type="checkbox"]:not([data-part="input"])
   + div:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
   position: relative;
   cursor: pointer;
@@ -1972,7 +1960,7 @@ table.list-style
   display: inline-block;
 }
 .check_wrap
-  input[type="checkbox"]
+  input[type="checkbox"]:not([data-part="input"])
   + div:where([data-ar-design="classic"], [data-ar-design="classic"] *)::before {
   content: "";
   display: block;
@@ -1987,7 +1975,7 @@ table.list-style
   margin: 7px 0;
 }
 .check_wrap
-  input[type="checkbox"]:checked
+  input[type="checkbox"]:not([data-part="input"]):checked
   + div:where([data-ar-design="classic"], [data-ar-design="classic"] *)::after {
   content: "";
   display: block;
@@ -2001,16 +1989,16 @@ table.list-style
   border-right: 3px solid #000000;
   line-height: 16px;
 }
-input[type="radio"]:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
+input[type="radio"]:not([data-part="input"]):where([data-ar-design="classic"], [data-ar-design="classic"] *) {
   display: none;
 }
-input[type="radio"]
+input[type="radio"]:not([data-part="input"])
   + span:where([data-ar-design="classic"], [data-ar-design="classic"] *) {
   padding-left: 6px;
   position: relative;
   cursor: pointer;
 }
-input[type="radio"]
+input[type="radio"]:not([data-part="input"])
   + span:where([data-ar-design="classic"], [data-ar-design="classic"] *)::before {
   content: "";
   display: block;

package/src/styles.css

@@ -76,8 +76,10 @@
 @import "./parts/ArPointerBadge.css";
 @import "./parts/ArPopconfirm.css";
 @import "./parts/ArPopover.css";
+@import "./parts/ArProfileCard.css";
 @import "./parts/ArProgress.css";
 @import "./parts/ArPunchButton.css";
+@import "./parts/ArPunchPanel.css";
 @import "./parts/ArQRCode.css";
 @import "./parts/ArRadio.css";
 @import "./parts/ArRate.css";