style(conversation-ai): define WHCM, typography utils, CSS patterns

2nd-gen/packages/swc/.storybook/preview.ts

@@ -377,6 +377,7 @@ const preview = {
                 'Illustrated message',
                 [
                   'Accessibility migration analysis',
+                  'Migration plan',
                   'Rendering and styling migration analysis',
                 ],
                 'Infield button',
@@ -388,6 +389,17 @@ const preview = {
                   'Accessibility migration analysis',
                   'Rendering and styling migration analysis',
                 ],
+                'Menu',
+                [
+                  'Accessibility migration analysis',
+                  'Rendering and styling migration analysis',
+                ],
+                'Menu group',
+                ['Accessibility migration analysis'],
+                'Menu item',
+                ['Accessibility migration analysis'],
+                'Menu separator',
+                ['Accessibility migration analysis'],
                 'Meter',
                 [
                   'Accessibility migration analysis',

2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css

@@ -25,6 +25,6 @@
 .swc-ConversationThread {
   display: flex;
   flex-direction: column;
-  gap: var(--swc-conversation-thread-gap, 16px);
+  gap: var(--swc-conversation-thread-gap, token("spacing-100"));
   inline-size: 100%;
 }

2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts

@@ -28,8 +28,6 @@ import '../../upload-artifact/index.js';
 
 import { uniqueId } from '../../../../utils/id.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -610,9 +608,7 @@ class ConversationFullPatternDemo extends LitElement {
         @swc-message-sources-toggle=${this.handleSourcesToggle}
       >
         <div class="swc-ConversationFullPatternDemo-scroll">
-          <swc-conversation-thread
-            style="--swc-conversation-thread-gap:24px;padding:4px;"
-          >
+          <swc-conversation-thread style="padding:4px;">
             ${this.renderTurns()}
           </swc-conversation-thread>
         </div>
@@ -648,7 +644,7 @@ if (!customElements.get('swc-conversation-full-pattern-demo')) {
 }
 
 const fullPatternSource = `<div style="max-width:800px; margin:auto; padding:24px; display:flex; flex-direction:column; gap:16px;">
-  <swc-conversation-thread style="--swc-conversation-thread-gap:24px;">
+  <swc-conversation-thread>
     <swc-conversation-turn type="user">
       <swc-user-message>Can you help me create a 45-minute presentation?</swc-user-message>
     </swc-conversation-turn>

2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css

@@ -13,8 +13,6 @@
 :host {
   display: block;
   inline-size: 100%;
-  container-name: swc-conversation-turn;
-  container-type: inline-size;
 }
 
 :host(:focus-visible) {

2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts

@@ -19,8 +19,6 @@ import '../../user-message/index.js';
 import '../../response-status/index.js';
 import '../../message-feedback/index.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────

2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css

@@ -35,7 +35,7 @@
   padding: 0;
   color: token("neutral-content-color-default");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--swc-message-feedback-button-border-radius, token("corner-radius-300"));
   cursor: pointer;
   transition:
@@ -62,3 +62,15 @@
 .swc-MessageFeedback-button[aria-pressed="true"]:hover {
   background: token("neutral-background-color-selected-hover");
 }
+
+@media (forced-colors: active) {
+  .swc-MessageFeedback-button[aria-pressed="true"],
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    color: SelectedItemText;
+    background: SelectedItem;
+  }
+
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    border-color: Highlight;
+  }
+}

2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css

@@ -32,21 +32,25 @@
 
 .swc-MessageSources-toggle {
   display: inline-flex;
-  gap: var(--swc-sources-toggle-gap, token("spacing-75"));
+  gap: var(--swc-sources-toggle-gap, token("spacing-100"));
   align-items: center;
-  padding: 5px 0;
+  inline-size: fit-content;
+  padding: var(--swc-sources-toggle-padding, 3px) token("spacing-100");
   font-family: token("sans-serif-font");
   font-size: token("font-size-100");
   font-weight: token("bold-font-weight");
   line-height: token("line-height-font-size-100");
   color: token("neutral-content-color-default");
   background: transparent;
   border: none;
+  border-radius: token("corner-radius-medium-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 .swc-MessageSources-toggle:hover {
   color: token("gray-800");
+  background: token("gray-100");
 }
 
 .swc-MessageSources-chevron {
@@ -68,7 +72,7 @@
   flex-direction: column;
   gap: var(--swc-message-sources-list-gap, token("spacing-75"));
   block-size: 0;
-  padding: 0;
+  padding: 0 token("spacing-100");
   margin: 0;
   overflow: hidden;
   list-style: none;

2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css

@@ -42,6 +42,7 @@
   gap: token("spacing-300");
   padding: token("spacing-300");
   background: token("background-layer-2-color");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-800");
   box-shadow: token("drop-shadow-emphasized-default-x") token("drop-shadow-emphasized-default-y") token("drop-shadow-emphasized-default-blur") token("drop-shadow-emphasized-default-color");
   overflow: hidden;
@@ -79,7 +80,7 @@
 .swc-PromptField-artifacts {
   display: flex;
   flex-wrap: wrap;
-  gap: token("spacing-100");
+  gap: token("spacing-300");
   align-items: start;
 }
 
@@ -92,17 +93,13 @@
   flex: 0 0 auto;
 }
 
-/* Figma (node 2:2035): single card artifact is 324px wide. */
 .swc-PromptField-artifacts--single > slot::slotted([type="card"]) {
-  flex: 0 1 var(--swc-prompt-field-artifact-single-inline-size, 324px);
-  inline-size: min(100%, 324px);
-  max-inline-size: var(--swc-prompt-field-artifact-single-max-inline-size, 324px);
+  flex-basis: auto;
 }
 
 /* Multi-artifact card layout targets 3+ cards per row responsively. */
 .swc-PromptField-artifacts--multiple > slot::slotted([type="card"]) {
-  flex: 1 1 var(--swc-prompt-field-artifact-multiple-inline-size, 160px);
-  min-inline-size: var(--swc-prompt-field-artifact-min-inline-size, 160px);
+  flex-basis: auto;
 }
 
 /* Prompt-field media artifact uses 68×68 preview tile. */
@@ -191,7 +188,7 @@
   padding: 0;
   color: token("gray-800");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-500");
   cursor: pointer;
 }
@@ -223,7 +220,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("neutral-background-color-default");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -238,7 +235,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("gray-900");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -304,3 +301,7 @@
 .swc-PromptField-legal-disclaimer a {
   color: inherit;
 }
+
+.swc-PromptField-artifacts[hidden] {
+  display: none !important;
+}

2nd-gen/packages/swc/patterns/conversational-ai/response-status/response-status.css

@@ -39,10 +39,13 @@
 
 /* When the row is a button (reasoning toggle) */
 .swc-ResponseStatus-row--button {
-  padding: 0;
+  inline-size: fit-content;
+  padding: var(--swc-sources-toggle-padding, 3px) token("spacing-100");
   background: transparent;
   border: none;
+  border-radius: token("corner-radius-medium-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 /* Progress circle — indeterminate loading indicator */
@@ -65,6 +68,10 @@
   color: token("gray-800");
 }
 
+.swc-ResponseStatus-row--button:hover {
+  background: token("gray-100");
+}
+
 /* ─────────────────────────────────────
    Chevron direction
    ───────────────────────────────────── */
@@ -87,6 +94,7 @@
   display: block;
   visibility: hidden;
   block-size: 0;
+  padding-inline: token("spacing-100");
   font-family: token("sans-serif-font");
   font-size: token("font-size-100");
   font-weight: token("regular-font-weight");

2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/suggestion-item.css

@@ -21,18 +21,22 @@
 }
 
 .swc-SuggestionItem {
+  -webkit-tap-highlight-color: transparent;
   display: inline-flex;
   align-items: center;
+  block-size: var(--swc-suggestion-item-min-block-size, token("component-height-100"));
+  padding: 0;
   font-family: token("sans-serif-font");
-  font-size: token("font-size-200");
+  font-size: token("font-size-100");
   font-style: token("default-font-style");
   font-weight: token("regular-font-weight");
-  line-height: token("line-height-font-size-200");
+  line-height: token("line-height-font-size-100");
   color: token("neutral-content-color-default");
   background: token("gray-100");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-extra-large-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 .swc-SuggestionItem:hover,
@@ -66,5 +70,11 @@
   display: inline-flex;
   padding-block: var(--swc-suggestion-item-label-padding-block, 7px);
   padding-inline-end: var(--swc-suggestion-item-label-padding-inline-end, token("spacing-300"));
-  text-align: left;
+  text-align: start;
+}
+
+@media (forced-colors: active) {
+  .swc-SuggestionItem:focus-visible {
+    outline-color: CanvasText;
+  }
 }

2nd-gen/packages/swc/patterns/conversational-ai/suggestion/suggestion-group.css

@@ -26,15 +26,15 @@
   gap: token("spacing-100");
 
   h3 {
-    font-size: token("font-size-300");
+    font-size: token("font-size-200");
   }
 }
 
 .swc-SuggestionGroup-title {
   margin: 0;
   font-family: token("sans-serif-font");
   font-weight: token("bold-font-weight");
-  line-height: token("line-height-font-size-300");
+  line-height: token("line-height-font-size-200");
   color: token("gray-900");
 }
 

2nd-gen/packages/swc/patterns/conversational-ai/system-message/stories/system-message.stories.ts

@@ -22,8 +22,6 @@ import '../../suggestion/index.js';
 import '../../suggestion-item/index.js';
 import '../../response-status/index.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -32,7 +30,7 @@ const { args, argTypes, template } = getStorybookHelpers('swc-system-message');
 
 const slotStatusRich = `<swc-response-status slot="status" open>The user said make a presentation deck but didn't specify duration of deck. Assumption is a brief presentation. I should check previous Hilton executive presentation decks and extract the structure.</swc-response-status>`;
 
-const slotMessageRich = `<div class="swc-conversationalAi-systemProse swc-Typography--prose"><p>According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p><p style="font-size:var(--swc-font-size-400);font-weight:800;line-height:var(--swc-line-height-font-size-400);color:var(--swc-gray-900);margin:0;">Big idea/ core narrative: The warmth of welcome</p><p>Hospitality begins the moment our customers set foot off their plane. We are more than accommodation, and we service a diverse base. We hope to be the anchor and bounce board for all who stay with us.</p><p style="font-size:var(--swc-font-size-300);font-weight:800;line-height:var(--swc-line-height-font-size-300);color:var(--swc-gray-900);margin:0;">Belonging happens at Hilton</p><p>We strive to be familiar but exceed expectations. These assets highlight how belonging is personified.</p><p style="font-size:var(--swc-font-size-300);font-weight:800;line-height:var(--swc-line-height-font-size-300);color:var(--swc-gray-900);margin:0;">We are more than accommodation</p><ul><li>Airport pick up service</li><li>Local recommendations</li><li>Everyday excursions</li><li>Customizable experience</li></ul></div>`;
+const slotMessageRich = `<div class="swc-conversationalAi-systemProse swc-Typography--prose"><p class="swc-Body ">According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p><h2 class="swc-Heading">Big idea/ core narrative: The warmth of welcome</h2><p class="swc-Body ">Hospitality begins the moment our customers set foot off their plane. We are more than accommodation, and we service a diverse base. We hope to be the anchor and bounce board for all who stay with us.</p><h3 class="swc-Heading swc-Heading--sizeXS">Belonging happens at Hilton</h3><p class="swc-Body ">We strive to be familiar but exceed expectations. These assets highlight how belonging is personified.</p><h3 class="swc-Heading swc-Heading--sizeXS">We are more than accommodation</h3><ul class="swc-Body "><li>Airport pick up service</li><li>Local recommendations</li><li>Everyday excursions</li><li>Customizable experience</li></ul></div>`;
 
 const slotFeedback = `<swc-message-feedback slot="feedback"></swc-message-feedback>`;
 

2nd-gen/packages/swc/patterns/conversational-ai/system-message/system-message.css

@@ -63,5 +63,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--swc-system-message-content-gap, token("spacing-100"));
-  padding-inline: token("spacing-300");
 }