@s_and_a/arrow-ui-design-remix 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-remix",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "ARROW UI の design：remix",
   "type": "module",
   "sideEffects": [
@@ -25,7 +25,7 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
-    "@s_and_a/arrow-ui": "^0.1.12"
+    "@s_and_a/arrow-ui": "^0.1.13"
   },
   "dependencies": {
     "@s_and_a/arrow-ui-tokens": "0.1.2"

package/src/parts/ArAlert.css

@@ -13,10 +13,13 @@
 [data-ar-design="remix"] [data-ar="alert"][data-tone="danger"]{background:var(--ar-color-danger-subtle);color:#8F231E}
 /* ロック中・権限の帯（.v-lock）：灰の面、見出しは ink、説明は小さく */
 [data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]{gap:8px;padding:8px 12px;border-radius:var(--ar-radius-control);background:#F4F6F9;color:#5B6672;font-size:12.5px;line-height:1.5}
-[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="icon"]{margin-top:2px}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="icon"]{margin-top:calc((1.5em - 16px)/2)}
 [data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="content"]>[data-part="title"]{color:var(--ar-color-text)}
 [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)}
 [data-ar-design="remix"] [data-ar="alert"][data-banner]{border-radius:0}
 
 /* Preserve intentional paragraphs in API and translated guidance. */
 [data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="body"]{white-space:pre-line;overflow-wrap:anywhere}
+
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="icon"]{margin-top:calc((1.6em - 16px)/2)}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="body"]>:first-child{margin-top:0}

package/src/parts/ArAppHeader.css

@@ -123,3 +123,6 @@
   [data-ar-design="remix"] [data-ar="app-header"]>[data-part="domains"]>[data-part="toggle"] { width:28px; flex:none; justify-content:center; padding:0; }
   [data-ar-design="remix"] [data-ar="app-header"]>[data-part="domains"]>[data-part="toggle"]>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 }
+
+/* To-do remains red regardless of the current page palette. */
+[data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"][data-tone="todo"]{--ar-accent-faint:#FFF0EE;--ar-accent-ink:#B4322C;--ar-accent-ring:rgba(180,50,44,.2)}

package/src/parts/ArBadge.css

@@ -2,7 +2,7 @@
 /* ArBadge（.ad-bdg sup：18・角丸9・700 11px・白い2pxの縁、右上に top-7 right-9。点は8px。状態の点 .ad-st は7px＋7pxの間）
    件数の丸はライブラリでこれ1つ。赤はデザインシステムの count（#DC2525。--ar-remix-count）。白い縁は data-ring（子に重ねるとき既定）。
    variant="subtle"：淡い地に濃い字（タブ・表示内容・切り替えの中の件数）。 */
-[data-ar-design="remix"] [data-ar="badge"]{font-family:var(--ar-font-family)}
+[data-ar-design="remix"] [data-ar="badge"]{font-family:var(--ar-font-family-numeric,Arial,sans-serif)}
 [data-ar-design="remix"] [data-ar="badge"]>[data-part="count"]{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ar-remix-count);color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:middle;font-variant-numeric:tabular-nums;box-shadow:none}
 [data-ar-design="remix"] [data-ar="badge"][data-mode="count"]:not([data-standalone])>[data-part="count"]{top:-7px;right:-9px}
 [data-ar-design="remix"] [data-ar="badge"]>[data-part="dot"]{width:8px;height:8px;border-radius:50%;background:var(--ar-remix-count);box-shadow:none}
@@ -31,3 +31,5 @@
 [data-ar-design="remix"] [data-ar="ribbon"][data-tone="danger"]>[data-part="ribbon"]{background:var(--ar-color-danger);color:#fff;text-shadow:none}
 [data-ar-design="remix"] [data-ar="ribbon"][data-tone="ok"]>[data-part="ribbon"]{background:var(--ar-color-ok);color:#fff;text-shadow:none}
 [data-ar-design="remix"] [data-ar="ribbon"][data-tone="warn"]>[data-part="ribbon"]{background:#E39A2D;color:#fff;text-shadow:0 1px 2px rgba(90,40,0,.28)}
+
+[data-ar-design="remix"] [data-ar="badge"][data-standalone]>[data-part="count"]{position:static;top:auto;vertical-align:middle}

package/src/parts/ArCard.css

@@ -25,12 +25,12 @@
 [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"]){border-radius:18px;overflow:clip}
 [data-ar-design="remix"] [data-ar="card"][data-variant="elevated"]{box-shadow:var(--ar-shadow-card)}
 [data-ar-design="remix"] [data-ar="card"][data-variant="outlined"]{box-shadow:inset 0 0 0 1px var(--ar-color-border)}
-[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)}
+[data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="head"]{gap:8px;flex-wrap:nowrap;min-height:60px;box-sizing:border-box;padding:12px 16px;border-bottom:1px solid var(--ar-color-border-subtle)}
 [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="head"]>[data-part="title"]{gap:8px;font-size:14.5px;font-weight:700;line-height:1.5}
 [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="head"]>[data-part="title"]>[data-part="icon"]{width:16px;height:16px;color:var(--ar-accent-ink)}
 [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="head"]>[data-part="actions"]{gap:4px;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ar-accent-ink)}
 [data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])>[data-part="body"]{--ar-card-pad-x:16px;padding:14px 16px;font-size:13px;line-height:1.7;color:var(--ar-color-text-secondary)}
-[data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])[data-size="sm"]>[data-part="head"]{padding:10px 14px}
+[data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])[data-size="sm"]>[data-part="head"]{min-height:56px;padding:10px 14px}
 [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}
 [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))}
 [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)}

package/src/parts/ArColorPicker.css

@@ -40,3 +40,5 @@
 [data-ar-design="remix"] [data-ar="color-swatches"][data-grouped]>[data-part="group"]>[data-part="swatch"][data-state~="selected"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ar-color-text)}
 [data-ar-design="remix"] [data-ar="color-swatches"][data-grouped]>[data-part="group"]>[data-part="swatch"][data-state~="selected"]:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ar-color-text),0 0 0 7px var(--ar-accent-ring)}
 [data-ar-design="remix"] [data-ar="color-swatches"][data-grouped]>[data-part="group"]>[data-part="swatch"]:disabled{opacity:.45}
+
+[data-ar-design="remix"] [data-ar="color-picker"][data-state~="readonly"]>[data-part="chip"]{width:34px;padding:0;justify-content:center}

package/src/parts/ArField.css

@@ -25,3 +25,5 @@
 [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>label{display:inline-flex;align-items:center;gap:4px;min-width:0}
 [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}
 [data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>[data-ar="info"]{flex:none}
+
+[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="control"]>:is([data-ar="select"],[data-ar="tree-select"])[data-block]{max-width:var(--ar-field-control-size,24rem)}

package/src/parts/ArInfo.css

@@ -4,7 +4,7 @@
 [data-ar-design="remix"] [data-ar="info"][data-kind="attention"]{gap:6px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ar-color-danger-ink)}
 [data-ar-design="remix"] [data-ar="info"][data-kind="attention"]>[data-part="icon"]{width:16px;height:16px;margin-top:3px}
 [data-ar-design="remix"] [data-ar="info"][data-kind="mark"]{justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--ar-color-text-muted);transition:background var(--ar-motion-fast),color var(--ar-motion-fast)}
-[data-ar-design="remix"] [data-ar="info"][data-kind="mark"]>[data-part="icon"]{width:16px;height:16px}
+[data-ar-design="remix"] [data-ar="info"][data-kind="mark"]>[data-part="icon"]{width:16px;height:16px;transform:translateY(1px)}
 [data-ar-design="remix"] [data-ar="info"][data-kind="mark"]:hover{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
 [data-ar-design="remix"] [data-ar="info"][data-kind="detail"]{width:fit-content;gap:4px;height:24px;padding:0 6px;border-radius:6px;font-size:11.5px;font-weight:700;color:var(--ar-accent-ink);transition:background var(--ar-motion-fast)}
 [data-ar-design="remix"] [data-ar="info"][data-kind="detail"]:hover{background:var(--ar-accent-subtle)}

package/src/parts/ArSelect.css

@@ -45,3 +45,5 @@
 [data-ar-design="remix"] [data-ar="select-panel"]>[data-part="list"]>[data-part="action"][data-state~="active"]>[data-ar="button"]{box-shadow:0 0 0 3px var(--ar-accent-ring)}
 [data-ar-design="remix"] [data-ar="select"]>[data-part="value"][data-has-dot]>[data-part="value-text"]{font-weight:700}
 [data-ar-design="remix"] [data-ar="select"]>[data-part="value"]>[data-part="value-description"]{color:var(--ar-color-text-muted);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
+/* Single choices stay readable in wide forms; an ArField can explicitly request a longer control. */
+[data-ar-design="remix"] :is([data-ar="select"],[data-ar="cascader"],[data-ar="tree-select"])[data-block]:not([data-multiple]){max-width:var(--ar-field-control-size,24rem)}

package/src/parts/ArShiftGrid.css

@@ -79,7 +79,7 @@
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"][data-state~="drop"]{background:var(--ar-accent-muted)}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"][data-state~="drop-ok"]{background:color-mix(in srgb,var(--ar-accent) 10%,#fff);box-shadow:inset 0 0 0 2px var(--ar-accent)}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"][data-state~="drop-ng"]{background:#FFF5F4;box-shadow:inset 0 0 0 2px #D9443B}
-[data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"]>[data-part="shift"]{gap:1px;align-items:center;justify-content:center;border-radius:4px;border:1px solid color-mix(in srgb,var(--sg-c,#8C96A1) 35%,transparent);background:color-mix(in srgb,var(--sg-c,#8C96A1) 14%,transparent);color:var(--sg-c,#4B5259);font-family:var(--ar-font-family-numeric);font-size:10.5px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
+[data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"]>[data-part="shift"]{gap:1px;align-items:center;justify-content:center;border-radius:4px;border:1px solid color-mix(in srgb,var(--sg-c,#8C96A1) 35%,transparent);background:var(--sg-c,#8C96A1);color:var(--sg-ink,#fff);font-family:var(--ar-font-family-numeric);font-size:10.5px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"][data-pattern="none"]>[data-part="shift"]{background:#fff;border:1.5px dashed #A9AFB6;color:#4B5259}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"]>[data-part="shift"][data-leave]{background:var(--ar-remix-leave-stripe);border-color:#B9BFC6;color:#5C636B}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="cell"]>[data-part="avail"]{border-radius:7px;border:1.5px dashed var(--ar-remix-hope-line);background:var(--ar-remix-hope-subtle);color:#1E7A4C;font-size:10px;font-weight:700}
@@ -114,3 +114,6 @@
 [data-ar-design="remix"] [data-ar="shift-grid-menu"]>[data-part="menu"]>[data-part="menu-item"] [data-ar="icon"]{width:15px;height:15px}
 [data-ar-design="remix"] [data-ar="shift-grid"] [data-part="bar-track"]>[data-part="bar"][data-leave]{cursor:default}
 /* 列の幅の −／＋ は ArZoomControl（.r-zoom：箱 34・compact は sm＝32） */
+
+/* Tracks stay vertically centered, including empty days; times are available in the cell tooltip. */
+[data-ar-design="remix"] [data-ar="shift-grid"] [data-part="track"]>[data-part="bar-label"]{display:none}

package/src/parts/ArTable.css

@@ -3,7 +3,7 @@
 [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}
 [data-ar-design="remix"] [data-ar="table"] [data-part="header-cell"]{padding:0 8px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;white-space:nowrap;border-bottom:1px solid var(--ar-color-border-subtle)}
-[data-ar-design="remix"] [data-ar="table"] thead[data-part="head"]>tr{height:34px}
+[data-ar-design="remix"] [data-ar="table"] thead[data-part="head"]>tr{height:42px}
 [data-ar-design="remix"] [data-ar="table"] :is(tbody[data-part="body"]>tr[data-part="row"],tfoot[data-part="foot"]>tr){height:44px}
 [data-ar-design="remix"] [data-ar="table"] [data-part="cell"]{padding:4px 8px;border-bottom:1px solid var(--ar-color-border-subtle);font-variant-numeric:tabular-nums}
 [data-ar-design="remix"] [data-ar="table"] :is([data-part="header-cell"],[data-part="cell"]):first-child{padding-left:12px}
@@ -62,7 +62,7 @@
 
 /* 空・見出しの下の行・表の下 */
 [data-ar-design="remix"] [data-ar="table"] td[data-part="empty"]{padding:4px 12px}
-[data-ar-design="remix"] [data-ar="table"] tbody[data-part="before-rows"]>tr>td{padding:8px 0 4px}
+[data-ar-design="remix"] [data-ar="table"] tbody[data-part="before-rows"]>tr>td{padding:10px 12px;border-bottom:1px solid var(--ar-color-border)}
 [data-ar-design="remix"] [data-ar="table"][data-variant="box"] tbody[data-part="before-rows"]>tr>td{padding:8px 12px;border-bottom:1px solid var(--ar-color-border-subtle)}
 [data-ar-design="remix"] [data-ar="table"]>[data-part="below"]{margin-top:8px}
 [data-ar-design="remix"] [data-ar="table"][data-variant="board"]>[data-part="below"]{margin-top:20px}
@@ -134,7 +134,7 @@
 [data-ar-design="remix"] [data-ar="table"] tbody td[data-total]{background:var(--ar-accent-faint);font-weight:700}
 [data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]{gap:4px;border-radius:4px}
 [data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]>[data-ar="icon"]{width:14px;height:14px}
-[data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]>[data-part="toggle-hint"]{color:var(--ar-color-text-muted);font-size:10.5px;font-weight:600;letter-spacing:0}
+[data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]>[data-part="toggle-hint"]{color:var(--ar-color-text-muted);font-size:inherit;font-weight:600;letter-spacing:0}
 [data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]:hover{color:var(--ar-accent)}
 [data-ar-design="remix"] [data-ar="table"] th>[data-part="group-toggle"]:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px}
 /* 見出しの列から開くボタン（年調の「＋ 合計」：.btn.tint.sm 24px・11.5px） */
@@ -197,3 +197,6 @@
 /* Empty messages stay inside the visible viewport of a horizontally scrollable table. */
 [data-ar-design="remix"] [data-ar="table"]{container:ar-table / inline-size}
 [data-ar-design="remix"] [data-ar="table"] td[data-part="empty"]>[data-ar="empty"]{position:sticky;left:12px;width:calc(100cqw - 24px);max-width:100%;box-sizing:border-box}
+/* Keep desktop actions reachable; on narrow screens sticky actions would cover time inputs. */
+@media(min-width:640px){[data-ar-design="remix"] td[data-v-ui040a3e8cc0ed]:has(>.operation_col){position:sticky;right:0;z-index:2;background:var(--ar-color-surface,#fff);box-shadow:-1px 0 var(--ar-color-border-subtle)}}
+@media(max-width:639px){[data-ar-design="remix"] table[data-ui-part="table"] th.button[data-v-ui040a3e8cc0ed]{right:auto}}

package/src/parts/ArTextInput.css

@@ -39,3 +39,6 @@
 [data-ar-design="remix"] [data-ar="text-input"][data-size="sm"]>[data-part="addon"][data-side="end"]{border-radius:0 8px 8px 0}
 [data-ar-design="remix"] [data-ar="text-input"][data-size="lg"]>[data-part="addon"]{border-radius:10px 0 0 10px}
 [data-ar-design="remix"] [data-ar="text-input"][data-size="lg"]>[data-part="addon"][data-side="end"]{border-radius:0 10px 10px 0}
+
+/* Single-line fields describe bounded values. Notes and free-form content use ArTextarea. */
+[data-ar-design="remix"] [data-ar="text-input"][data-block]{max-width:var(--ar-field-control-size,24rem)}

package/src/parts/_product.css

@@ -250,6 +250,8 @@
 /* The shift members table: the confirm bar under the row being added or edited. */
 [data-ar-design="remix"] .row_edit_bar:not([data-ui-fixed], [data-ui-fixed] *) {
   display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
   justify-content: flex-end;
   gap: 8px;
   padding: 4px 8px;