symbiote-ui 0.3.0-alpha.64 → 0.3.0-alpha.65

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to `symbiote-ui` will be documented in this file.
 
 ## Unreleased
 
+## [0.3.0-alpha.65] - 2026-07-18
+
+### Fixed
+
+- Kept compact composer parameters on the same action row at narrow widths.
+- Preserved full native select hit areas and explicit accessible names when footer controls collapse to icon-only presentation.
+
 ## [0.3.0-alpha.64] - 2026-07-18
 
 ### Added

package/chat/ChatComposer/ChatComposer.css.js

@@ -417,6 +417,7 @@ sn-button.btn-send[variant="icon"].btn-stop::after {
 
 .composer-footer-select-control {
   padding-right: var(--sn-step-2);
+  position: relative;
 }
 
 .composer-footer-checkbox-control {
@@ -464,20 +465,27 @@ sn-button.btn-send[variant="icon"].btn-stop::after {
   text-overflow: ellipsis;
 }
 
-.composer-param-collapsed .composer-footer-select,
-.composer-param-collapsed .composer-footer-label,
-.composer-param-collapsed .composer-footer-value,
-.composer-param-collapsed .composer-footer-suffix {
-  width: var(--sn-composer-collapsed-control-width);
-  max-width: var(--sn-composer-collapsed-control-width);
-  padding-right: var(--sn-composer-collapsed-control-padding);
-  color: transparent !important;
+.composer-param-collapsed {
+  --sn-is-collapsed: 1;
 }
 
-.composer-param-collapsed .composer-footer-label,
-.composer-param-collapsed .composer-footer-value,
-.composer-param-collapsed .composer-footer-suffix {
-  display: none;
+@container style(--sn-is-collapsed: 1) {
+  .composer-footer-select {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-width: var(--sn-composer-collapsed-control-width);
+    height: 100%;
+    box-sizing: border-box;
+    padding-right: var(--sn-composer-collapsed-control-padding);
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  :is(.composer-footer-label, .composer-footer-value, .composer-footer-suffix) {
+    display: none;
+  }
 }
 
 .composer-footer-details-popover {
@@ -786,108 +794,33 @@ sn-button.btn-send[variant="icon"].btn-stop::after {
 }
 
 @container composer-footer (width <= 560px) {
-  .composer-priority-1 .composer-footer-select,
-  .composer-priority-1 .composer-footer-label,
-  .composer-priority-1 .composer-footer-value,
-  .composer-priority-1 .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-priority-1 .composer-footer-label,
-  .composer-priority-1 .composer-footer-value,
-  .composer-priority-1 .composer-footer-suffix {
-    display: none;
+  .composer-priority-1 {
+    --sn-is-collapsed: 1;
   }
 }
 
 @container composer-footer (width <= 500px) {
-  .composer-param-model.composer-long-value .composer-footer-select,
-  .composer-param-model.composer-long-value .composer-footer-label,
-  .composer-param-model.composer-long-value .composer-footer-value,
-  .composer-param-model.composer-long-value .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-param-model.composer-long-value .composer-footer-label,
-  .composer-param-model.composer-long-value .composer-footer-value,
-  .composer-param-model.composer-long-value .composer-footer-suffix {
-    display: none;
-  }
-
-  .composer-priority-2 .composer-footer-select,
-  .composer-priority-2 .composer-footer-label,
-  .composer-priority-2 .composer-footer-value,
-  .composer-priority-2 .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-priority-2 .composer-footer-label,
-  .composer-priority-2 .composer-footer-value,
-  .composer-priority-2 .composer-footer-suffix {
-    display: none;
+  .composer-param-model.composer-long-value,
+  .composer-priority-2 {
+    --sn-is-collapsed: 1;
   }
 }
 
 @container composer-footer (width <= 440px) {
-  .composer-priority-3 .composer-footer-select,
-  .composer-priority-3 .composer-footer-label,
-  .composer-priority-3 .composer-footer-value,
-  .composer-priority-3 .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-priority-3 .composer-footer-label,
-  .composer-priority-3 .composer-footer-value,
-  .composer-priority-3 .composer-footer-suffix {
-    display: none;
+  .composer-priority-3 {
+    --sn-is-collapsed: 1;
   }
 }
 
 @container composer-footer (width <= 380px) {
-  .composer-priority-4 .composer-footer-select,
-  .composer-priority-4 .composer-footer-label,
-  .composer-priority-4 .composer-footer-value,
-  .composer-priority-4 .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-priority-4 .composer-footer-label,
-  .composer-priority-4 .composer-footer-value,
-  .composer-priority-4 .composer-footer-suffix {
-    display: none;
+  .composer-priority-4 {
+    --sn-is-collapsed: 1;
   }
 }
 
 @container composer-footer (width <= 320px) {
-  .composer-priority-5 .composer-footer-select,
-  .composer-priority-5 .composer-footer-label,
-  .composer-priority-5 .composer-footer-value,
-  .composer-priority-5 .composer-footer-suffix {
-    width: var(--sn-composer-collapsed-control-width);
-    max-width: var(--sn-composer-collapsed-control-width);
-    padding-right: var(--sn-composer-collapsed-control-padding);
-    color: transparent !important;
-  }
-
-  .composer-priority-5 .composer-footer-label,
-  .composer-priority-5 .composer-footer-value,
-  .composer-priority-5 .composer-footer-suffix {
-    display: none;
+  .composer-priority-5 {
+    --sn-is-collapsed: 1;
   }
 }
 
@@ -1231,67 +1164,6 @@ chat-composer.drag-over .composer-body {
 }
 
 @container chat-composer (width <= 480px) {
-  .composer-body {
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    grid-template-rows: minmax(var(--sn-composer-input-min-height), auto) auto auto;
-  }
-
-  :host([leading-controls]) .composer-body,
-  chat-composer[leading-controls] .composer-body {
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-  }
-
-  :host([leading-controls]) .composer-leading-controls,
-  chat-composer[leading-controls] .composer-leading-controls {
-    grid-column: 1;
-    grid-row: 3;
-  }
-
-  :host([leading-controls]) .composer-body textarea,
-  chat-composer[leading-controls] .composer-body textarea {
-    grid-column: 1 / -1;
-  }
-
-  .composer-footer {
-    grid-column: 1 / -1;
-    grid-row: 2;
-  }
-
-  .composer-actions {
-    grid-column: 2;
-    grid-row: 3;
-    width: auto;
-    max-width: min(54cqi, var(--sn-composer-actions-max-inline-size, 460px));
-    flex-wrap: nowrap;
-    overflow: hidden;
-  }
-
-  .btn-mic {
-    grid-column: 3;
-    grid-row: 3;
-    align-self: end;
-  }
-
-  .composer-body > sn-button.btn-send {
-    grid-column: 4;
-    grid-row: 3;
-  }
-
-  :host([leading-controls]) .composer-actions,
-  chat-composer[leading-controls] .composer-actions {
-    grid-column: 2;
-  }
-
-  :host([leading-controls]) .btn-mic,
-  chat-composer[leading-controls] .btn-mic {
-    grid-column: 3;
-  }
-
-  :host([leading-controls]) .composer-body > sn-button.btn-send,
-  chat-composer[leading-controls] .composer-body > sn-button.btn-send {
-    grid-column: 4;
-  }
-
   .btn-voice-language {
     min-width: calc(var(--sn-composer-send-size) * 2.2);
     max-width: calc(var(--sn-composer-send-size) * 2.6);

package/chat/ChatComposer/ChatComposer.js

@@ -168,6 +168,7 @@ function decorateFooterControl(item) {
   let meterValue = normalizeProgress(meterSource.value ?? meterSource.progress ?? details?.progress ?? item.progress ?? 0);
   let meterLabel = String(meterSource.label || '');
   let meterTitle = String(meterSource.title || details?.title || item.title || item.label || item.id || '');
+  let accessibleName = String(item.title || item.label || item.id || '');
   let hasMeter = Boolean(item.meter || details);
   let baseClass = [
     'composer-footer-btn',
@@ -220,6 +221,7 @@ function decorateFooterControl(item) {
     hasMeter,
     hasMeterLabel: Boolean(meterLabel),
     meterStyle: progressStyle(meterValue),
+    accessibleName,
     options,
   };
 }
@@ -1732,7 +1734,7 @@ ChatComposer.template = html`
           <label ${{ '@class': 'selectClass', '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', '@title': 'title', '@hidden': '!isSelect' }}>
             <span class="material-symbols-outlined" ${{ '@hidden': '!hasIcon' }}>{{icon}}</span>
             <span class="composer-footer-label" ${{ '@hidden': '!hasLabel' }}>{{label}}</span>
-            <select class="composer-footer-select" ${{ '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', '@disabled': 'disabled' }} itemize="options">
+            <select class="composer-footer-select" ${{ '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', '@disabled': 'disabled', '@aria-label': 'accessibleName' }} itemize="options">
               <template>
                 <option ${{ '@value': 'value', '@selected': 'selected' }}>{{label}}</option>
               </template>
@@ -1741,7 +1743,7 @@ ChatComposer.template = html`
           </label>
           <label ${{ '@class': 'checkboxClass', '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', '@title': 'title', '@hidden': '!isCheckbox' }}>
             <span class="material-symbols-outlined" ${{ '@hidden': '!hasIcon' }}>{{icon}}</span>
-            <input class="composer-footer-checkbox" type="checkbox" ${{ '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', checked: 'checked', '@disabled': 'disabled' }}>
+            <input class="composer-footer-checkbox" type="checkbox" ${{ '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', checked: 'checked', '@disabled': 'disabled', '@aria-label': 'accessibleName' }}>
             <span class="composer-footer-label" ${{ '@hidden': '!hasLabel' }}>{{label}}</span>
           </label>
           <button type="button" ${{ '@class': 'buttonClass', '@data-footer-control-id': 'id', '@data-footer-control-kind': 'kind', '@title': 'title', '@disabled': 'disabled', '@hidden': '!isButton' }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "symbiote-ui",
-  "version": "0.3.0-alpha.64",
+  "version": "0.3.0-alpha.65",
   "type": "module",
   "description": "Agent-ready Web Components, layouts, themes, manifests, and UI contracts for Symbiote systems.",
   "main": "index.js",