@s_and_a/arrow-ui-design-remix 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/dist/productTokens.js

@@ -3,6 +3,9 @@ export function createProductTokens(design) {
     const { tokens: library, palettes } = design;
     return {
         ...classicTokens,
+        "page-padding": "26px 32px 80px",
+        "page-padding-tablet": "20px 24px 86px",
+        "page-padding-mobile": "16px 12px 86px",
         "color-primary": palettes.blue.accent,
         "color-link": palettes.blue["accent-ink"],
         "color-danger": library["color.danger"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-remix",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ARROW UI の design：remix",
   "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 */
 /* row（設定の .cf-flow）：間8px、札は 32px・角丸16・内側 0 12px・12.5px 700。先頭の「申請」と済みの段は acc-50 にテーマ色の文字、
    これからの段は白に acc-line の線、いまの番はテーマ色の線を太く、差し戻しは淡い赤。間の › は mute-3（15px）。
    list（勤怠の承認 .stpr の一覧）：外枠 角丸12・線、内側 6px 14px。行は上下10px・下に line-2、「24px の丸｜名前 13.5px 700＋人 12px mute｜札 22px」。
@@ -11,22 +11,32 @@
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] :is([data-part="start"],[data-part="step"]){gap:6px;height:32px;padding:0 12px;border-radius:16px;box-sizing:border-box;font-size:12.5px;font-weight:700;line-height:18.75px}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="start"],[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"][data-state="done"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] :is([data-part="start"],[data-part="step"]) [data-ar="icon"]{width:15px;height:15px}
-[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"]>[data-part="title"]{gap:6px}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"]>[data-part="body"]>[data-part="title"]{gap:6px}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"]:is([data-state="todo"],[data-state="skipped"]){background:#fff;color:var(--ar-accent-ink);box-shadow:inset 0 0 0 1px var(--ar-accent-line)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"][data-state="skipped"]{color:var(--ar-color-text-muted);box-shadow:inset 0 0 0 1px var(--ar-color-border);text-decoration:line-through}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"][data-state="current"]{background:#fff;color:var(--ar-accent-ink);box-shadow:inset 0 0 0 2px var(--ar-accent)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"][data-state="denied"]{background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink)}
-[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"]>[data-part="who"]{color:var(--ar-color-text-muted);font-size:11.5px;font-weight:500}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"][data-state="blocked"]{background:var(--ar-color-warn-subtle);color:#6B4300;box-shadow:inset 0 0 0 1px var(--ar-color-warn)}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="row"] [data-part="step"]>[data-part="body"]>[data-part="who"]{color:var(--ar-color-text-muted);font-size:11.5px;font-weight:500}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"]{padding:6px 14px;border-radius:12px;background:var(--ar-color-surface);box-shadow:inset 0 0 0 1px var(--ar-color-border)}
-[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"]>[data-part="item"]{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--ar-color-border-subtle);font-size:14px;line-height:1.5}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"]>[data-part="item"]{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--ar-color-border-subtle);font-size:14px;line-height:1.5}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"]>[data-part="item"]:last-child{border-bottom:0}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="mark"]{width:24px;height:24px;border-radius:50%;background:#EEF1F5;color:var(--ar-color-text-secondary);font-size:12px;font-weight:600;line-height:18px}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="mark"][data-state="done"]{background:var(--ar-color-ok);color:#fff}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="mark"][data-state="current"]{background:var(--ar-accent);color:var(--ar-on-accent)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="mark"][data-state="denied"]{background:var(--ar-color-danger);color:#fff}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="mark"][data-state="blocked"]{background:var(--ar-color-warn-subtle);color:#6B4300}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"][data-state="blocked"]{background:var(--ar-color-warn-subtle);color:#6B4300}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="title"]{font-size:13.5px;font-weight:700;line-height:20.25px}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="who"]{color:var(--ar-color-text-muted);font-size:12px;line-height:18px}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"]{height:22px;padding:0 8px;border-radius:11px;background:#EEF1F5;color:#525E6B;font-size:12px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"][data-state="done"]{background:var(--ar-color-ok-subtle);color:var(--ar-color-ok)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"][data-state="current"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
 [data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="status"][data-state="denied"]{background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink)}
+
+[data-ar-design="remix"] [data-ar="approval-flow"][data-layout="list"] [data-part="body"]>[data-part="title"]>[data-ar="icon"]{display:none}
+[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}
+[data-ar-design="remix"] [data-ar="approval-flow"][data-detailed][data-layout="row"] [data-part="step"]{padding:12px;border-radius:12px;gap:6px}
+[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)}
+[data-ar-design="remix"] [data-ar="approval-flow"] [data-part="details"]{font-size:13px;line-height:1.5}
+@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/ArCalendar.css

@@ -1,4 +1,4 @@
-/* @covers ArCalendar 1.1.0 */
+/* @covers ArCalendar 1.2.0 */
 /* ArCalendar：デザインシステムの .ad-calf（角丸12・線の枠・見出しの段 8/10 と下線、曜日は淡いテーマ色の 28px、マスは 54px・線 #F0F3F6・12px 中太の数字、
    今日はテーマ色の 20px の丸、選んだ日は acc-25 の地と 1.5px の枠、前後の月は #A3AEB9）と .ev（行事の印）、.seg（月／年の切り替え）。 */
 [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}
@@ -94,3 +94,11 @@
 [data-ar-design="remix"] [data-ar="calendar"][data-size="mini"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]>[data-part="event"][data-tone="ok"]{background:var(--ar-color-ok-subtle);color:var(--ar-color-ok)}
 [data-ar-design="remix"] [data-ar="calendar"][data-size="mini"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]>[data-part="note"]{max-width:100%;overflow:hidden;color:var(--ar-color-text-secondary);font-size:10.5px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis}
 [data-ar-design="remix"] [data-ar="calendar"][data-size="mini"]>[data-part="footer"]{display:flex;flex-wrap:wrap;gap:14px;color:var(--ar-color-text-secondary);font-size:12px;line-height:1.5}
+
+[data-ar-design="remix"] [data-ar="calendar"] [data-part="times"]{gap:4px;padding-top:2px}
+[data-ar-design="remix"] [data-ar="calendar"] [data-part="time-range"]{font:600 10.5px/1.3 var(--ar-font-family-numeric);font-variant-numeric:tabular-nums;color:var(--ar-accent-ink)}
+[data-ar-design="remix"] [data-ar="calendar"] [data-part="time-end"]{color:var(--ar-color-text-secondary)}
+
+/* State badges are deliberately compact in a seven-column phone calendar. Long translations wrap. */
+[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}
+@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

@@ -44,3 +44,24 @@
 [data-ar-design="remix"] [data-ar="card"][data-variant="plain"][data-size="sm"]{padding:8px 10px}
 
 [data-ar-design="remix"] [data-ar="card"][data-flush]>[data-part="body"]{--ar-card-pad-x:0px;padding:0}
+
+/* Page titles can contain long company/employee names. Keep the complete title and
+   actions in the same flow instead of letting absolute actions cover the title. */
+[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{height:auto;min-height:54px;padding-block:8px}
+[data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="sm"]>[data-part="head"]{height:auto;min-height:46px}
+[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}
+[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}
+[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}
+/* Text actions sit on the coloured band, so use its foreground rather than
+   the normal surface link colour. Nested action clusters follow the same rule. */
+[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)}
+[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):hover:not(:disabled,[aria-disabled="true"]){background:rgba(255,255,255,.16)}
+/* Form action groups need natural height when buttons wrap. Direct footer
+   buttons retain the segmented card footer used by compact summaries. */
+[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:is([data-ar="cluster"],[data-ar="stack"])){padding:12px 18px}
+[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"]){height:auto;min-width:0}
+@media(max-width:640px){
+  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]{min-height:50px;padding-inline:12px}
+  [data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]>[data-part="title"]{font-size:17px}
+  [data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){display:flex;flex-wrap:wrap;gap:8px}
+}

package/src/parts/ArChoiceCard.css

@@ -37,7 +37,7 @@
 [data-ar-design="remix"] [data-ar="choice-card"][data-variant="option"]>[data-part="body"]>[data-part="title"]{font-size:15px;font-weight:700;line-height:1.5}
 /* tile */
 [data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"]{gap:10px;min-height:52px;padding:9px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border);font-size:13.5px;font-weight:700;line-height:1.35}
-[data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"]:hover:not(:disabled){background:var(--ar-accent-faint);box-shadow:inset 0 0 0 1px var(--ar-accent-line)}
+[data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"]:hover:not(:disabled,[data-state~="on"]){background:var(--ar-accent-faint);box-shadow:inset 0 0 0 1px var(--ar-accent-line)}
 [data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"][data-state~="on"]{background:var(--ar-accent);color:var(--ar-on-accent);box-shadow:none}
 [data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"]:disabled{background:#FAFBFC;color:#A3AEB9}
 [data-ar-design="remix"] [data-ar="choice-card"][data-variant="tile"]>[data-part="icon"]{width:30px;height:30px;border-radius:9px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}

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：.dti（年 76×36・月日 40×36・600 14px、単位は 13px ink-2、曜日 12px mute。日は赤・土は青）。
    大きさの段（data-size）：sm 30（年 70・月日 36・13px）／md 36（.dti のまま）／lg 42（年 84・月日 46・15px）、角丸 9／10／11。 */
 [data-ar-design="remix"] [data-ar="date-input"]{font-feature-settings:"palt" 1;gap:4px;font-size:13px;color:var(--ar-color-text-secondary)}

package/src/parts/ArDateView.css

@@ -1,4 +1,4 @@
-/* @covers ArDateView 1.0.0 */
+/* @covers ArDateView 1.1.0 */
 /* ArDateView（シフト画面の日付の見出しと同じ：数字は等幅・600、曜日は小さめの灰色、土曜は sat・日曜祝日は sun の色） */
 [data-ar-design="remix"] [data-ar="date-view"]{color:var(--ar-color-text);font-size:13px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
 [data-ar-design="remix"] [data-ar="date-view"]>*>[data-part="weekday"]{margin-left:1px;color:var(--ar-color-text-muted);font-size:12px;font-weight:500}

package/src/parts/ArDescriptions.css

@@ -1,16 +1,20 @@
-/* @covers ArDescriptions 1.0.0 */
+/* @covers ArDescriptions 1.1.0 */
 /* ArDescriptions（bordered＝.ad-desc：角丸12・線、セルは10/12、ラベルは acc-25 の地に ink-2 の太字。plain＝日の要約：灰色のラベル＋太字の値） */
 [data-ar-design="remix"] [data-ar="descriptions"]{font-feature-settings:"palt" 1;color:var(--ar-color-text);font-size:13px;line-height:1.5}
 [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]{margin-bottom:10px}
 [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]>[data-part="title"]{font-size:14.5px;font-weight:700}
 [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)}
 [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)}
-[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:nowrap}
+[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}
 [data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{color:var(--ar-color-text)}
 [data-ar-design="remix"] [data-ar="descriptions"][data-variant="plain"]>[data-part="list"]{gap:8px 18px}
 [data-ar-design="remix"] [data-ar="descriptions"][data-variant="plain"]>[data-part="list"]>[data-part="item"]{gap:6px}
 [data-ar-design="remix"] [data-ar="descriptions"][data-variant="plain"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{color:var(--ar-color-text-muted)}
 [data-ar-design="remix"] [data-ar="descriptions"][data-variant="plain"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{font-weight:700;font-variant-numeric:tabular-nums}
+[data-ar-design="remix"] [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="remix"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]{gap:4px}
+[data-ar-design="remix"] [data-ar="descriptions"][data-layout="stacked"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{font-size:12px;font-weight:700;white-space:normal}
+[data-ar-design="remix"] [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="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="danger"]>[data-part="value"]{color:var(--ar-color-danger-ink)}
 [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="warn"]>[data-part="value"]{color:var(--ar-color-warn)}
 [data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="ok"]>[data-part="value"]{color:var(--ar-color-ok)}

package/src/parts/ArModal.css

@@ -38,10 +38,10 @@
 [data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="footer"]>*>[data-part="note"]{font-size:12.5px;line-height:1.5;color:var(--ar-color-text-muted)}@media (max-width:640px){
   /* スマホ：全画面（.fsc）。頭は閉じるを左・題を真ん中（.fh）、足は白でボタンを広げる */
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]{border-radius:0;box-shadow:none;background:var(--ar-color-bg)}
-  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]{height:52px;box-sizing:border-box;align-items:center;gap:0;padding:0 6px;background:var(--ar-color-surface)}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]{min-height:52px;box-sizing:border-box;align-items:center;gap:0;padding:8px 6px;background:var(--ar-color-surface)}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="heading"]{text-align:center}
-  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="heading"]>[data-part="title"]{font-size:var(--ar-font-size-heading);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="heading"]>[data-part="description"]{display:none}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="heading"]>[data-part="title"]{font-size:var(--ar-font-size-heading);line-height:1.5;white-space:normal;overflow-wrap:anywhere}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="heading"]>[data-part="description"]{margin-top:4px;overflow-wrap:anywhere}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="close"]{width:44px;height:44px;border-radius:8px;color:var(--ar-color-text-secondary)}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]>[data-part="close"]>[data-ar="icon"]{width:21px;height:21px}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="header"]::after{content:"";width:44px;flex:none}
@@ -50,5 +50,17 @@
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]{padding:12px 16px 24px;background:var(--ar-color-surface)}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]{flex:1}
   [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="button"]{flex:1}
-  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>*>[data-part="note"]{display:none}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>*>[data-part="note"]{display:block;overflow-wrap:anywhere}
+}
+/* 小型の完了通知もスマホでは確定操作を押しやすい幅にする。確認用confirmは従来の配置を保つ。 */
+@media(max-width:640px){
+  [data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]{flex:1}
+  [data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="button"]{flex:1}
+}
+
+/* Supplemental information remains readable on mobile; actions occupy their own row. */
+@media(max-width:640px){
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]{flex-wrap:wrap}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-start"]:has([data-part="note"]){flex-basis:100%}
+  [data-ar-design="remix"] [data-ar="modal"][data-mobile="fullscreen"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-part="note"]{flex-basis:100%}
 }

package/src/parts/ArOrgChart.css

@@ -1,4 +1,4 @@
-/* @covers ArOrgChart 1.0.0 */
+/* @covers ArOrgChart 1.1.0 */
 /* ArOrgChart：会社情報キャンバスの「部署/店舗階層構造」（地は #F7F9FB に 18px ごとの #D9E1E8 の点、図は上から 40px、
    いちばん上の札は幅176・角丸14・余白 10px 12px・内側 1.5px（子があれば acc-line、無ければ line）と浅い影、建物の絵と 13.5px 700 acc-ink の下線つきの名前・11.5px の ID・人の絵と 12px の人数、
    子の札は幅150・角丸12・余白 8px 10px・内側 1px line・13px の名前、つなぐ線は 2px の acc-line（札の下 18px・横の線・子の上 18px）、上の段の札の間 28px・子の札の間 14px、

package/src/parts/ArPageHeading.css

@@ -5,4 +5,4 @@
 [data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::before{right:-30px;top:-46px;width:150px;height:150px;background:rgba(255,255,255,.1)}
 [data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::after{left:-40px;bottom:-70px;width:140px;height:140px;background:rgba(255,255,255,.07)}
 [data-ar-design="remix"] [data-ar="page-heading"][data-type="text"]{color:var(--ar-color-text);font-size:22px;text-align:center;padding:0}
-@media(max-width:767px){[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]{min-height:46px;padding:10px 12px;font-size:16px;border-radius:14px 14px 0 0}}
+@media(max-width:767px){[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]{min-height:50px;padding:10px 12px;font-size:17px;border-radius:14px 14px 0 0}}

package/src/parts/ArPayslip.css

@@ -52,3 +52,5 @@
 [data-ar-design="remix"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"][data-state~="emphasis"]{background:var(--ar-accent-subtle)}
 [data-ar-design="remix"] [data-ar="payslip"]>[data-part="totals"]>[data-part="total"][data-state~="emphasis"]>dd{font-size:22px}
 @media (max-width:767px){[data-ar-design="remix"] [data-ar="payslip"]{padding:14px 12px}[data-ar-design="remix"] [data-ar="payslip"]>[data-part="totals"]{order:-1}}
+
+[data-ar-design="remix"] [data-ar="payslip"]>[data-part="totals"]{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}

package/src/parts/ArPeriodNav.css

@@ -31,3 +31,10 @@
 [data-ar-design="remix"] [data-ar="period-nav"]>[data-part="today"]{grid-column:3;justify-self:end;position:static;transform:none}
 /* 1.1：祝日の名前（date と holidays。PopRecruitDays の「11/3（火・祝） 文化の日」と同じく、日曜の赤の小さな文字） */
 [data-ar-design="remix"] [data-ar="period-nav"]>[data-part="center"]>[data-part="label"]>[data-part="holiday"]{color:var(--ar-color-sun);font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap}
+
+/* Employee titles may wrap; arrows retain their own column. */
+[data-ar-design="remix"] [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="remix"] [data-ar="period-nav"][data-size="md"]>[data-part="center"]>[data-part="label"]{height:auto;min-height:40px;line-height:1.4}
+@media(max-width:600px){
+  [data-ar-design="remix"] [data-ar="period-nav"][data-size="md"]>[data-part="center"]>[data-part="label"]{padding:0 8px;font-size:18px}
+}

package/src/parts/ArProfileCard.css

@@ -0,0 +1,3 @@
+/* @covers ArProfileCard 1.0.0 */
+/* The profile composes the design's Card, Avatar, Title, Tag and Descriptions. */
+[data-ar-design="remix"] [data-ar="profile-card"]{color:var(--ar-color-text)}

package/src/parts/ArPunchButton.css

@@ -15,3 +15,5 @@
 [data-ar-design="remix"] [data-ar="punch-button"]>[data-part="button"]:disabled{background:#EEF1F5;color:#A3AEB9;box-shadow:none;text-shadow:none}
 [data-ar-design="remix"] [data-ar="punch-button"][data-state~="loading"]>[data-part="button"]{cursor:progress}
 [data-ar-design="remix"] [data-ar="punch-button"]>[data-part="reason"]{color:var(--ar-color-text-secondary);font-size:12px;font-weight:400;line-height:18px;text-align:center}
+/* 既定の大きな打刻ボタンもスマホでは md と同じ高さに収める。 */
+@media(max-width:640px){[data-ar-design="remix"] [data-ar="punch-button"][data-size="lg"]>[data-part="button"]{height:136px}}

package/src/parts/ArPunchPanel.css

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

package/src/parts/ArTable.css

@@ -1,4 +1,4 @@
-/* @covers ArTable 1.4.0 */
+/* @covers ArTable 1.5.0 */
 /* ArTable（box＝.lst/.lr：外枠 角丸12・線、見出し34・行44。board＝シフト画面の .v-tr：外枠なし、角の丸い見出し・行50・合計の帯） */
 [data-ar-design="remix"] [data-ar="table"]{font-feature-settings:"palt" 1;color:var(--ar-color-text);font-size:13px;line-height:1.5}
 [data-ar-design="remix"] [data-ar="table"]>[data-part="viewport"]:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px}
@@ -188,3 +188,7 @@
 [data-ar-design="remix"] [data-ar="table"] td>[data-part="actions"][data-kind="edit"]{gap:6px}
 /* 1.4：行ぜんぶを1つのセル（案内・説明の行）：上下10・左右12、折り返す、灰色の 12.5px の文 */
 [data-ar-design="remix"] [data-ar="table"] td[data-full]{padding:10px 12px;color:var(--ar-color-text-secondary);font-size:12.5px;line-height:1.6;white-space:normal}
+
+/* Long comments and document reasons can share the available table width. */
+[data-ar-design="remix"] [data-ar="table"][data-fit]>[data-part="viewport"]>[data-part="table"]{width:100%;table-layout:fixed}
+[data-ar-design="remix"] [data-ar="table"] [data-part="cell"][data-wrap]{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip;line-height:1.6;padding-block:8px}

package/src/parts/ArTimeChart.css

@@ -1,4 +1,4 @@
-/* @covers ArTimeChart 1.0.0 */
+/* @covers ArTimeChart 1.1.0 */
 /* ArTimeChart：勤怠キャンバスの勤怠詳細の「チャート」（.r-chleg 凡例 11.5px・16×10 角丸3 の色、.r-chg 角丸12・ln の内側の線、見出し acc-50 の 30px・11.5px 700 acc-ink、目盛り 10.5px 700、
    日の名前 168px（12.5px 700・曜日 日は赤 土は青・形態 11px mute）、帯の場所 高さ38・ln-2 の上の線・#EEF1F4 の目盛りの線、土日は #FAFBFD の地・有給全日は斜線の地、
    帯：シフトは上の 4px の線（#5591CE）、勤務は 13px から 16px の角丸4（通常 #4EB187・法定内残業 #E3A73B・法定外残業 #D86A3A・法定外休日 #3D9FB0・法定休日 #2E7BBF）、深夜は下の 4px の線（#6F55C2）、休憩は灰色の斜線、打刻もれは赤い斜線）
@@ -50,3 +50,18 @@
 [data-ar-design="remix"] [data-ar="time-chart"] [data-kind="break"]{background:repeating-linear-gradient(135deg,#9AA6B2 0 2px,#fff 2px 4px)}
 [data-ar-design="remix"] [data-ar="time-chart"]>[data-part="legend"] [data-kind="break"],[data-ar-design="remix"] [data-ar="time-chart"][data-mode="day"] [data-part="bar"][data-kind="break"]{box-shadow:inset 0 0 0 1px #9AA6B2}
 [data-ar-design="remix"] [data-ar="time-chart"] [data-kind="missing"]{background:repeating-linear-gradient(90deg,#F2C4C0 0 4px,#fff 4px 8px);box-shadow:inset 0 0 0 1px var(--ar-remix-short-line)}
+
+[data-ar-design="remix"] [data-ar="time-chart"]>[data-part="grid"]>[data-part="row"]>[data-part="lane"]>[data-ar="tooltip"]>[data-part="bar"][data-kind="preover"]>[data-part="bar-text"]{color:#392A0F}
+
+[data-ar-design="remix"] [data-ar="time-chart"][data-mode="day"]>[data-part="grid"]{grid-template-columns:112px minmax(max(520px,var(--ar-chart-tick-width,0px)),1fr)}
+
+/* Distinguish daily, weekly, monthly and sixty-hour premiums in the legend and bars. */
+[data-ar-design="remix"] [data-ar="time-chart"] [data-kind="overtime"]{background:#C75E2B}
+[data-ar-design="remix"] [data-ar="time-chart"] [data-kind="weekOver"]{background:#B5462C}
+[data-ar-design="remix"] [data-ar="time-chart"] [data-kind="monthOver"]{background:#963D38}
+[data-ar-design="remix"] [data-ar="time-chart"] [data-kind="sixtyOver"]{background:#793441}
+
+[data-ar-design="remix"] [data-ar="time-chart"]{--ar-chart-track-height:18px;--ar-chart-track-bar-height:12px}
+[data-ar-design="remix"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]{grid-template-columns:168px minmax(max(520px,var(--ar-chart-tick-width,0px)),1fr)}
+[data-ar-design="remix"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]>[data-part="row"]>[data-part="row-label"]{flex-wrap:wrap;align-content:center;gap:2px 8px;padding-block:6px}
+@media(max-width:600px){[data-ar-design="remix"] [data-ar="time-chart"][data-mode="month"]>[data-part="grid"]{grid-template-columns:112px minmax(max(520px,var(--ar-chart-tick-width,0px)),1fr)}}

package/src/parts/ArTimeInput.css

@@ -1,4 +1,4 @@
-/* @covers ArTimeInput 1.1.0, ArTimeRange 1.0.0 */
+/* @covers ArTimeInput 1.1.0, ArTimeRange 1.1.0 */
 /* ArTimeInput：.tin（枠 field・600 14px）。［当日］は #F1F4F7 の 700 11px、［前日］は橙。
    大きさの段はほかの入力と同じ sm 30／md 36／lg 42・角丸 9／10／11（デザインシステムの .tin は 32／36／40・角丸9 だが、横に並べてそろえるため段に合わせた）。文字は .tin どおり 13／14／15px。 */
 [data-ar-design="remix"] [data-ar="time-input"]{height:var(--ar-size-control-md);border:1px solid var(--ar-color-field);border-radius:10px;background:#fff;transition:border-color var(--ar-motion-fast),box-shadow var(--ar-motion-fast)}

package/src/parts/_product.css

@@ -207,11 +207,6 @@
 [data-ar-design="remix"] [data-ar="modal"] table tr:last-child > td:not([data-ui-fixed], [data-ui-fixed] *) {
   border-bottom: 0;
 }
-[data-ar-design="remix"] [data-ar="modal"] .control_wrap:not([data-ui-fixed], [data-ui-fixed] *) {
-  border: 1px solid var(--ar-color-border, #e6ebf0);
-  border-radius: 12px;
-  background: var(--ar-color-surface-alt, #f8fafc);
-}
 [data-ar-design="remix"] [data-ar="modal"] img[src$="apply.png"]:not([data-ui-fixed], [data-ui-fixed] *) {
   width: 28px;
   height: auto;
@@ -318,3 +313,12 @@
 [data-ar-design="remix"] .menu_wrap[data-v-uid32255837481]:not([data-ui-fixed], [data-ui-fixed] *) {margin:12px auto;padding:12px;border-radius:14px}
 [data-ar-design="remix"] .app-grid[data-v-uid32255837481]:not([data-ui-fixed], [data-ui-fixed] *) {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 }
+
+/* A card or dialog is the surface. Structural groups inside it do not draw another frame. */
+[data-ar-design="remix"] :is([data-ar="card"],[data-ar="modal"],[data-ui-part="section"],[data-ui-part="panel"]) :is([data-ui-part="section"],[data-ui-part="panel"]):not([data-ui-fixed], [data-ui-fixed] *) {border:0;border-radius:0;background:transparent}
+/* A viewport provides scrolling; tables and cards own their visible boundaries. */
+[data-ar-design="remix"] [data-ui-part="tableViewport"]:not([data-ui-fixed], [data-ui-fixed] *) {border:0}
+
+@media(max-width:767px) {
+  [data-ar-design="remix"] .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/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/ArRadioGroup.css";