Drop the inner container boundary on listing spec items

19dee3-virtual-try-on-application/virtual-try-on-app.gts

@@ -726,8 +726,8 @@ class IsolatedTemplate extends Component<typeof VirtualTryOnApp> {
     this.newItemName = (event.target as HTMLInputElement).value;
   }
 
-  @action setCategory(cat: string): void {
-    this.newItemCategory = cat;
+  @action setCategory(cat: string | null): void {
+    this.newItemCategory = cat ?? '';
   }
 
   @action stopModalPropagation(event: Event): void {

46f065-popover/example/popover-playground-example.gts

@@ -36,11 +36,16 @@ import CodeSnippet from '@cardstack/catalog/components/code-snippet';
  * between them.
  */
 class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
-  kindOptions = ['details', 'edit', 'tools'];
-  anchoringOptions = ['beside', 'overlay', 'center'];
-  sizeOptions = ['compact', 'comfortable', 'spacious', 'auto'];
-  backdropOptions = ['none', 'tint', 'blur', 'dim'];
-  elevationOptions = ['flat', 'raised', 'elevated', 'floating'];
+  kindOptions: PopoverKind[] = ['details', 'edit', 'tools'];
+  anchoringOptions: PopoverAnchoring[] = ['beside', 'overlay', 'center'];
+  sizeOptions: PopoverSize[] = ['compact', 'comfortable', 'spacious', 'auto'];
+  backdropOptions: PopoverBackdrop[] = ['none', 'tint', 'blur', 'dim'];
+  elevationOptions: PopoverElevation[] = [
+    'flat',
+    'raised',
+    'elevated',
+    'floating',
+  ];
   keyboardOptions = ['none', 'pick', 'edit'];
   trapFocusOptions = ['off', 'on'];
 
@@ -90,7 +95,8 @@ class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
     return this.pickOptions[this.pickIndex] ?? '—';
   }
 
-  setPickByLabel = (label: string): void => {
+  setPickByLabel = (label: string | null): void => {
+    if (label === null) return;
     const index = this.pickOptions.indexOf(label);
     if (index >= 0) this.pickIndex = index;
   };
@@ -135,15 +141,15 @@ class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
     return this.arrowOn ? true : undefined;
   }
 
-  setPlacement = (value: Placement): void => {
-    this.placement = value;
+  setPlacement = (value: Placement | null): void => {
+    if (value) this.placement = value;
   };
 
-  setOffset = (value: string): void => {
-    this.offset = Number(value);
+  setOffset = (value: string | null): void => {
+    if (value !== null) this.offset = Number(value);
   };
 
-  setArrow = (value: string): void => {
+  setArrow = (value: string | null): void => {
     this.arrowOn = value === 'on';
   };
 
@@ -205,29 +211,29 @@ class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
     return lines.join('\n');
   }
 
-  setKind = (value: PopoverKind): void => {
-    this.kind = value;
+  setKind = (value: PopoverKind | null): void => {
+    if (value) this.kind = value;
   };
 
-  setAnchoring = (value: PopoverAnchoring): void => {
-    this.anchoring = value;
+  setAnchoring = (value: PopoverAnchoring | null): void => {
+    if (value) this.anchoring = value;
   };
 
-  setSize = (value: PopoverSize): void => {
-    this.size = value;
+  setSize = (value: PopoverSize | null): void => {
+    if (value) this.size = value;
   };
 
-  setBackdrop = (value: PopoverBackdrop): void => {
-    this.backdrop = value;
+  setBackdrop = (value: PopoverBackdrop | null): void => {
+    if (value) this.backdrop = value;
   };
 
-  setElevation = (value: PopoverElevation): void => {
-    this.elevation = value;
+  setElevation = (value: PopoverElevation | null): void => {
+    if (value) this.elevation = value;
   };
 
-  setKeyboard = (value: string): void => {
+  setKeyboard = (value: string | null): void => {
     this.keyboard =
-      value === 'none' ? undefined : (value as PopoverKeyboardModel);
+      !value || value === 'none' ? undefined : (value as PopoverKeyboardModel);
   };
 
   get keyboardChoice(): string {
@@ -245,12 +251,12 @@ class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
     return this.trapFocusOn ? true : undefined;
   }
 
-  setTrapFocus = (value: string): void => {
+  setTrapFocus = (value: string | null): void => {
     this.trapFocusOn = value === 'on';
   };
 
-  setAutoFocus = (value: string): void => {
-    this.autoFocusChoice = value;
+  setAutoFocus = (value: string | null): void => {
+    this.autoFocusChoice = value ?? 'default';
   };
 
   escalationOptions = ['off', 'on'];
@@ -259,7 +265,7 @@ class PopoverPlaygroundIsolated extends Component<typeof PopoverPlayground> {
     return this.escalationEnabled ? 'on' : 'off';
   }
 
-  setEscalation = (value: string): void => {
+  setEscalation = (value: string | null): void => {
     this.escalationEnabled = value === 'on';
   };
 

aef6db-stepper/example/stepper-playground-example.gts

@@ -38,13 +38,13 @@ class StepperPlaygroundIsolated extends Component<typeof StepperPlayground> {
   @tracked modalOn = false;
   @tracked jumpOn = false;
 
-  setModal = (value: string): void => {
+  setModal = (value: string | null): void => {
     this.modalOn = value === 'modal';
     // Re-open the demo when switching into modal so there is something
     // to see behind the knob.
     if (this.modalOn) this.dismissed = false;
   };
-  setJump = (value: string): void => {
+  setJump = (value: string | null): void => {
     this.jumpOn = value === 'on';
   };
 
@@ -67,8 +67,8 @@ class StepperPlaygroundIsolated extends Component<typeof StepperPlayground> {
   setName = (event: Event): void => {
     this.name = (event.target as HTMLInputElement).value;
   };
-  setWorkspace = (value: string): void => {
-    this.workspace = value;
+  setWorkspace = (value: string | null): void => {
+    this.workspace = value ?? undefined;
   };
   invite = (): void => {
     this.invited += 1;

catalog-app/listing/listing.gts

@@ -392,7 +392,10 @@ class EmbeddedTemplate extends Component<typeof Listing> {
                             }}
                             data-test-spec-card={{spec.id}}
                           >
-                            <SpecComponent @format='fitted' />
+                            <SpecComponent
+                              @format='fitted'
+                              @displayContainer={{false}}
+                            />
                           </CardContainer>
                         {{/let}}
                       {{/each}}
@@ -747,6 +750,7 @@ class EmbeddedTemplate extends Component<typeof Listing> {
         gap: 0.75rem;
       }
       .include-card {
+        min-height: 3.5rem;
         border: 1px solid var(--border, #e7e3d8);
         border-radius: 0.5rem;
       }

fields/audio/components/base-audio-player.gts

@@ -321,8 +321,8 @@ export class BaseAudioPlayer extends GlimmerComponent<BaseAudioPlayerSignature>
   }
 
   @action
-  handleSpeedChange(selected: { value: number }): void {
-    if (!this.audioElement) return;
+  handleSpeedChange(selected: { value: number } | null): void {
+    if (!this.audioElement || !selected) return;
     this.playbackRate = selected.value;
     this.audioElement.playbackRate = this.playbackRate;
   }

fields/contact-link/contact-link.gts

@@ -97,7 +97,9 @@ export default class ContactLinkField extends FieldDef {
 
     options = this.args.model.items ?? [];
 
-    onSelect = (option: ContactLink) => (this.args.model.label = option.label);
+    onSelect = (option: ContactLink | null) => {
+      this.args.model.label = option?.label;
+    };
 
     get selectedOption() {
       return this.options?.find(