@s_and_a/arrow-ui-design-remix 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s_and_a/arrow-ui-design-remix",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.3"
+    "@s_and_a/arrow-ui": "0.1.4"
   },
   "dependencies": {
     "@s_and_a/arrow-ui-tokens": "0.1.2"

package/src/parts/ArPeriodNav.css

@@ -36,5 +36,5 @@
 [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}
+  [data-ar-design="remix"] [data-ar="period-nav"][data-size="md"]:not([data-inverse])>[data-part="center"]>[data-part="label"]{padding:0 4px;font-size:16px;letter-spacing:0}
 }

package/src/parts/_ai-chat.css

@@ -0,0 +1,88 @@
+/* Product chat dock: state, consent and actions belong to the consumer. */
+[data-ar-design="remix"] .ai-chat[data-v-ai-chat] {
+  color: var(--ar-color-text);
+  font: 14px/1.6 var(--ar-font-family);
+}
+[data-ar-design="remix"] .ai-chat__panel[data-v-ai-chat] {
+  background: var(--ar-color-surface);
+  border-left: 1px solid var(--ar-color-border);
+  box-shadow: var(--ar-shadow-modal);
+}
+[data-ar-design="remix"] .ai-chat__header[data-v-ai-chat],
+[data-ar-design="remix"] .ai-chat__toolbar[data-v-ai-chat] {
+  background: var(--ar-color-surface);
+  border-bottom: 1px solid var(--ar-color-border);
+}
+[data-ar-design="remix"] .ai-chat__heading h2[data-v-ai-chat] {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ar-color-text);
+}
+[data-ar-design="remix"] .ai-chat__spark[data-v-ai-chat] {
+  color: var(--ar-accent);
+  font-size: 27px;
+}
+[data-ar-design="remix"] :is(.ai-chat__hint, .ai-chat__status, .ai-chat__speaker, .ai-chat__tools)[data-v-ai-chat],
+[data-ar-design="remix"] .ai-chat__usage[data-v-ai-chat-usage] {
+  color: var(--ar-color-text-muted);
+  font-size: 12px;
+}
+[data-ar-design="remix"] .ai-chat__status.is-ready[data-v-ai-chat] { color: var(--ar-color-ok); }
+[data-ar-design="remix"] .ai-chat__icon[data-v-ai-chat] {
+  border: 0;
+  border-radius: var(--ar-radius-control);
+  background: transparent;
+  color: var(--ar-color-text-secondary);
+}
+[data-ar-design="remix"] .ai-chat__icon[data-v-ai-chat]:hover { background: var(--ar-color-hover); }
+[data-ar-design="remix"] .ai-chat__messages[data-v-ai-chat] { background: var(--ar-color-surface-alt); }
+[data-ar-design="remix"] .ai-chat__welcome-title[data-v-ai-chat] { font-weight: 700; }
+[data-ar-design="remix"] :is(.ai-chat__example, .ai-chat__diagnosis, .ai-chat__report)[data-v-ai-chat] {
+  border: 1px solid var(--ar-color-border);
+  border-radius: var(--ar-radius-cell);
+  background: var(--ar-color-surface);
+  color: var(--ar-color-text);
+  font: inherit;
+}
+[data-ar-design="remix"] .ai-chat__example[data-v-ai-chat]:hover { background: var(--ar-color-hover); }
+[data-ar-design="remix"] .ai-chat__message > p[data-v-ai-chat] {
+  border-radius: var(--ar-radius-cell);
+  background: var(--ar-color-bg);
+}
+[data-ar-design="remix"] .ai-chat__message.is-user > p[data-v-ai-chat] {
+  background: var(--ar-accent);
+  color: var(--ar-on-accent);
+}
+[data-ar-design="remix"] .ai-chat__diagnosis li[data-v-ai-chat] { border-bottom: 1px solid var(--ar-color-border-subtle); }
+[data-ar-design="remix"] .ai-chat__diagnosis-status[data-v-ai-chat] {
+  border-radius: var(--ar-radius-control);
+  background: var(--ar-color-bg);
+  color: var(--ar-color-text-secondary);
+}
+[data-ar-design="remix"] :is(.ai-chat__error, .ai-chat__diagnosis li.is-applies .ai-chat__diagnosis-status)[data-v-ai-chat] {
+  background: var(--ar-color-danger-subtle);
+  color: var(--ar-color-danger-ink);
+}
+[data-ar-design="remix"] .ai-chat__pending[data-v-ai-chat] {
+  border: 1px solid var(--ar-color-warn-line);
+  border-radius: var(--ar-radius-cell);
+  background: var(--ar-color-warn-subtle);
+}
+[data-ar-design="remix"] .ai-chat__pending pre[data-v-ai-chat] { background: var(--ar-color-surface); }
+[data-ar-design="remix"] .ai-chat__composer[data-v-ai-chat] {
+  background: var(--ar-color-surface);
+  border-top: 1px solid var(--ar-color-border);
+}
+[data-ar-design="remix"] .ai-chat__composer textarea[data-v-ai-chat] {
+  border: 1px solid var(--ar-color-field);
+  border-radius: var(--ar-radius-control);
+  background: var(--ar-color-surface);
+  color: var(--ar-color-text);
+}
+[data-ar-design="remix"] .ai-chat :is(button, textarea, input)[data-v-ai-chat]:focus-visible {
+  outline: 2px solid var(--ar-accent);
+  outline-offset: 2px;
+}
+@media(max-width:959px) {
+  [data-ar-design="remix"] .ai-chat__composer textarea[data-v-ai-chat] { font-size:16px; }
+}

package/src/styles.css

@@ -1,4 +1,5 @@
 /* ui-design-remix の見た目。scripts/gen-registry.mjs が parts/ から作る。手で直さない。 */
+@import "./parts/_ai-chat.css";
 @import "./parts/_base.css";
 @import "./parts/_choice.css";
 @import "./parts/_picker.css";